Como Personalizar ''Mostrando postagens com marcador x''

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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtzbshbHbBFsciT-m5jKr7XJDsGpAjhj2zmdKfha8OrNNsU99y2nYygZN8eOSH9JZZ3uF4Nm7E2OlNtvShrXHU3icS6ijaPFCXmd0vUP9Lssyqk50zJJF7dtu9UdGDCNpWuMP2w6VlHVg/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:16px - Tamanho da letra

✿ font-family - Tipo 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!

Como colocar um contador de visitas personalizado

Como personalizar gadget do tradutor - Rilakkuma

Barra fixa separadora de postagens e Botões Compartilhar

Área de comentários personalizada

Como separar sidebar do template ''Janela de Imagem''

Barrinhas Divisórias e Backgrounds - Sweet

Wallpapers Hyperdimension Neptunia