Como Personalizar ''Mostrando postagens com marcador x''

novembro 23, 2015




Konnichiwa people! Tempos que não trago tutorial para o blog né? É que nesses casos sempre tento trazer algo mais inovador e do meu jeitinho sabe? Hehe
Ando observando em muitos blogs/sites o uso dessa mensagem automática quando selecionamos uma ''categoria'' ou melhor dizendo ''um marcador'', é sempre um detalhe que muitos esquecem , deixam ou retiram. Então hoje irei compartilhar com vocês como personalizar essa mensagem tão chatinha e sem graça , porque.. falando sério, personalizado deixa bem estiloso e organizado. Tentei trazer-los de vários estilos, espero que gostem ^.^. Lets Go? 
É recomendado que faça um backup do seu layout, pois se acontecer algum tipo de erro você poderá voltar ao seu layout anterior sem problemas.

Vá em Modelo, Editar HTML e procure por status-msg-wrap :





Selecione e substitua todo esse trecho ilustrado acima, por esse:

<div class='status-msg-wrap'>
<li>⚉ Categoria: <data:blog.pageName/></li>
</div>

Onde está em roxo, é onde substituirá o texto ''Mostrando postagens com marcador:'' , no meu caso preferi chama-los de ''Categoria'', mas se quiser modificar-los, essa é a hora xD. 
Para dar um charme eu coloquei esse botão no começo, ele está em forma de simbolo, então se quiser colocar outro tipo de simbolo como coração, estrela, carinhas, também funciona, um site que gosto muito é o Ponto de Fusão.

Agora pesquise por /b:skin> e acime dele cole:

/*------ Indicador de Marcador Personalizado -----*/ 

 .status-msg-wrap {

background: url(&quot;http://2.bp.blogspot.com/-sw1vyfqehUA/U0Gsy2tW0fI/AAAAAAAAB68/d7YjOatRarg/s1600/Faixinha1.png&quot;)  center; no-repeat;
color:#FFFFFF;
font-size:16px;
font-family:Delius, Delius, sans-serif;
text-align:center;
font-weight:bold;
list-style: none;
}

Salve, vá ao seu blog escolha um marcador e veja se apareceu, e ele ficará assim:



Caso não apareça, ou se você usa um outro tipo de template, vá em Editar Html novamente, recorte o código do /b:skin> e coloque abaixo de <style>.
Explicando o Código para Modificação
 background: url (''link da imagem de fundo'')
Obs: Em questão do fundo, oque normalmente se encaixam são faixinhas, caso coloque uma imagem muito grande não aparecerá, mas não precisa se preocupar que darei opções de fundos abaixo. 
E se você  não quer um fundo é só apagar esse link.
 color:#FFFFFF - Cor da letra
font-size:16pxTamanho da letra
 font-familyTipo de fonte [1º] corresponde ao começo (fonte da parte do ''Categoria:'' e o [2º] corresponde a fonte do marcador.
 text-align - Alinhamento do texto, caso não queira centralizado basta só retirar-lo.
✿ font-weight - Estilo de fonte (bold=negrito)

Outros Modelos


• ● Cinza & Branco



//*------ MSG DE MARCADOR Cinza -----*/
.status-msg-wrap {
background: url(&quot;http://i63.tinypic.com/2h64vac.jpg&quot;)  center; no-repeat;
color:#FFFFFF;
font-size:16px;
font-family:Delius, sans-serif;
text-align:center;
list-style: none;
}


/*------ MSG DE MARCADOR Cinza com pontilhado -----*/
.status-msg-wrap {
background: url(&quot;http://i65.tinypic.com/2lnxrv8.jpg&quot;)  center; no-repeat;
padding:2px 15px 2px 40px;
margin-bottom:25px;
width:96%;
color:#A4A4A4;
font-size:16px;
font-family: Arial, sans-serif;
text-align:center;
list-style: none;

OBS: Ajuste o width caso a faixa 
esteja cortada ou se repetindo.


/*------ MSG DE MARCADOR cinza sombreado -----*/
.status-msg-wrap {
background: url(&quot;http://i63.tinypic.com/257owht.jpg&quot;)  center; no-repeat;
padding:2px 15px 2px 40px;
margin-bottom:25px;
width:79%;
color:#A4A4A4;
font-size:16px;
font-family:Arial, sans-serif;
text-align:center;
font-weight:bold;
list-style: none;
}

• ● Lilás & Rosa



/*------ MSG DE MARCADOR Lilás -----*/
.status-msg-wrap {
background: url(&quot;http://i68.tinypic.com/15xk0ic.jpg&quot;)  center; no-repeat;
padding:2px 15px 2px 40px;
margin-bottom:25px;
width:93%;
color:#FFFFFF;
font-size:16px;
font-family: Arial, sans-serif;
text-align:center;
font-weight:;
list-style: none;
}

/*------ MSG DE MARCADOR Magic -----*/
.status-msg-wrap {
background: url(&quot;http://i67.tinypic.com/2ut23wk.jpg&quot;)  center; no-repeat;
color:#FFFFFF;
font-size:16px;
font-family:Delius, Delius, sans-serif;
text-align:center;
font-weight:bold;
list-style: none;

}

/*------ MSG DE MARCADOR Rosa -----*/
.status-msg-wrap {
background: url(&quot;http://i64.tinypic.com/f3cef7.jpg&quot;)  center; no-repeat;
padding:2px 15px 2px 40px;
margin-bottom:25px;
width:96%;
color:#FFFFFF;
font-size:16px;
font-family: Delius, sans-serif;
text-align:center;
list-style: none;
}



/*------ MSG DE MARCADOR Anime -----*/
.status-msg-wrap {
background: url(&quot;http://i65.tinypic.com/2ahfyid.jpg&quot;)  center; no-repeat;
padding:2px 15px 2px 40px;
margin-bottom:25px;
width:93%;
color:#DA81F5;
font-size:16px;
font-family: Arial, sans-serif;
text-align:center;
font-weight:Italic ;
list-style: none;
}



/*------ MSG DE MARCADOR Celeste -----*/
.status-msg-wrap {
background: url(&quot;http://i63.tinypic.com/259uxd1.jpg&quot;)  center; no-repeat;
padding:2px 15px 2px 40px;
margin-bottom:25px;
width:96%;
color:#FFFFFF;
font-size:16px;
font-family: Delius, sans-serif;
font-weight:bold;
text-align:center;
list-style: none;
}

• ● Faixas Pequenas



/*------ MSG DE MARCADOR Preta -----*/
.status-msg-wrap {
background: url(&quot;http://i65.tinypic.com/28999w2.jpg&quot;) no-repeat;
margin-bottom:25px;
width:96%;
color:#FFFFFF;
font-size:16px;
font-family: Arial, sans-serif;
font-weight:bold;
list-style: none;
}


/*------ MSG DE MARCADOR Pro -----*/
.status-msg-wrap {
background: url(&quot;http://i66.tinypic.com/9igu2e.jpg&quot;) no-repeat;
margin-bottom:25px;
width:96%;
color:#FFFFFF;
font-size:16px;
font-family: Arial, sans-serif;
font-weight:bold;
list-style: none;
}

/*------ MSG DE MARCADOR Roxo-----*/
.status-msg-wrap {
background: url(&quot;http://i63.tinypic.com/nv7029.jpg&quot;) no-repeat;
margin-bottom:25px;
width:96%;
color:#FFFFFF;
font-size:16px;
font-family: Arial, sans-serif;
font-weight:bold;
list-style: none;

}


/*------ MSG DE MARCADOR Lílas Kawaii -----*/
.status-msg-wrap {
background: url(&quot;http://i63.tinypic.com/kavco.jpg&quot;) no-repeat;
margin-bottom:25px;
width:96%;
color:#FFFFFF;
font-size:16px;
font-family: Arial, sans-serif;
font-weight:bold;
list-style: none;
}



/*------ MSG DE MARCADOR Rosa Kawaii -----*/
.status-msg-wrap {
background: url(&quot;http://i64.tinypic.com/35l7maf.jpg&quot;) no-repeat;
margin-bottom:25px;
width:96%;
color:#FFFFFF;
font-size:16px;
font-family: Arial, sans-serif;
font-weight:bold;
list-style: none;
}

Então, o que acharam? Gostaria de fazer várias e várias mas me faltou criatividade haha
Relembrando que você também pode criar o seu! A medida da faixa maior foi 700x38 +/- , e a menor 250x32. Antes de ir, quero dar os créditos a Karoline do blog Follow your Dreams, pois foi com o post dela que consegui ter uma noção de como fazer, a minha tá bem diferente mesmo, mas mesmo assim, se não fosse a postagem dela não conseguiria trazer esse tutorial para vocês. Enfim, é isso, até mais! Qualquer duvida ou pedido de modelo, deixe abaixo nos comentários ok? ^.^ Ja nee!



Veja também outros tutorias e utilitários no SM!


Leia também:

17 comentários

  1. Nossa, adorei o tutorial!
    Muito útil, usarei com certeza!
    Beijos
    www.blognekokawaii.blogspot.com

    ResponderExcluir
    Respostas
    1. Que bom que gostoou! *-*
      Use sim! *-* Gostaria de ver quando usasse ^.^
      Kissus! Obg pela visita <3

      Excluir
  2. Wow adorei o post me ajudou muito pois sempre quis saber como coloca assim direitinho mas nem achei pois tinha muita coisa mal explicada em outros blog e quando fui tentar acabei bugando o meu blog e talz mas agora desvendou todo mistério heuheuheu facilitou minha vida... gostei muito você tem talento em sucesso com o blog <3
    Meu blog: http://kiyomimatsui.blogspot.com.br/
    Post novo: http://kiyomimatsui.blogspot.com.br/2015/11/mascote-da-kiyomi.html

    ResponderExcluir
    Respostas
    1. Que ótimo que consegui ajudar de alguma forma *0*
      Eu também pesquisei, e realmente não achei nada direito, oque mais vejo é como retirar agr personalizar ta meio em falta, como sou insistente achei um meio e fiz do meu jeito hehe . Que otimo que gostou, aaah que isso, obg *-* <3

      Excluir
  3. Jujusinhaaa *---* quem é vivo sempre aparece shuashaus
    Adoreei o tutorial *¬* adorei vc começar a postar tutoriais (. ♥ ‿ ♥).
    Obs: o lay do seu blog está liindo e eu adorei o título, achei linda as pétalas e a harmonia de cores com o blog ^__^

    Meu último post: Hijabi Lolitas (Lolitas muçulmanas) (。’▽’。)♡
    Bjss ~(^з^)-☆
    Blog:ShyandBrave

    ResponderExcluir
    Respostas
    1. Biaaaaa!! Pois é né haha, sou assim msm menina, gente indecisa é assim, pensa , pensa pensa e no final acaba postado nada, #bem,eu.
      Awwwn, que bom que gostou *-* Eu postava bastante na época que precisava pro lay do blog xD tento trazer algo não tão comum hehe, mas se achar algo mais, pretendo continuar sim, amo demais HTML <3
      Awwwn obrigadaaaa *-*

      Excluir
  4. Adorei o tutorial! Mulher seu layout é maravilhoso! amei.. Xoxo' <3
    Não Sou Uma IT! | YouTube | Fanpage

    ResponderExcluir
    Respostas
    1. Que bom que gostoou! *0* <3
      Obrigadaa *-*, mudei faz pouco tempo, e fico mais satisfeita agr hihi :3
      Obg pela visitaa , volte smp ^.^ kissus!

      Excluir
  5. Adorei a dica!
    Fiquei um pouco confusa no incio x.x
    Pois não sou muito boa com essas coisas ;~;
    Adorei gatinha,beijos *3*
    Meu Blog The World by Koizumi Visite *o*

    Post Novo! Bônus: Inspirações + Músicas+ Wish list de Natal Confira! XD

    ResponderExcluir
    Respostas
    1. Que bom que gostou!
      Awn sério? :/ Vou ediitar o post então e tentar deixar o inicio mais explicadinho então ^.^ Porque mesmo que não seja boa, da pra entender se guiando ^.^
      Que otimo Koikoi <3
      Dsclp não estar sendo uma parça organizada kk' Vou editar seu button aqui (smp esqueço kk') e ve se volto pra pagina :3 , mas sei lá to quase apagando a pagina ;/

      Kissus ;***

      Excluir
  6. Obrigada pelo tutorial! Fazia tempo que eu queria editar essa parte e não conseguia. :D

    ResponderExcluir
    Respostas
    1. Nadaa! Fico muito feliz de ter ajudado!
      Perdão pela demora e obg por ter comentado ^.^
      ~Kissus

      Excluir
  7. VOU USAR MUITO SIM!!!! E muito obrigada pelas imagens disponibilizadas♥
    Sekai Bakawaii

    ResponderExcluir
    Respostas
    1. Use! É bem melhor doq essa do blogger, interessante deixar a cara do layout esse aviso de marcadores também ^^. Preciso dar um Update nas imagens mas obrigada! Fico feliz em ajudar ♥

      Excluir
  8. Adorei essas customizações. Vou utilizar o 6º modelo no layout novo que estou fazendo ♥ Beijos

    「 Bad Angel 」

    ResponderExcluir
    Respostas
    1. Que bom que gostou! ♥
      Use sim! vou adorar ver lá no seu blog
      ~Kissus

      Excluir
  9. Existe algum código que eu consiga colocar junto nessa mensagem uma foto pra cada marcado?

    ResponderExcluir

© 2017 Sweet Magic. Re-Design By: Juciane Damasceno. Tecnologia do Blogger.
Eu Sou do CBBlogers