Marcadores ou categorias - personalizando

Oiii!
Que tal personalizar os marcadores do seu blog? É super simples e fica muito fofo! Nesse post eu
trouxe três modelos pra vocês escolherem e em breve posto outros, ok?! :)

Leia Mais

Vamos começar?
1 - Escolha um dos três modelos e copie o código abaixo dele.

MODELO 1

/* Categorias */
.categorias {
width: 260px;
padding: 0px 10px 0px 10px;
margin: 0;
font-size: 14px;
font-family: ‘Arial Narrow’, sans-serif;
text-align:center;
text-transform: uppercase;
background: #f2ccfd;
}
.categorias ul {
list-style: none;
margin: 0px 0px 0px 0px;
padding: 0;
text-align:center;
background: #f2ccfd;
}
.categorias li {
border-bottom: 2px solid #fff;
margin: 0;
background: #f2ccfd;
text-align:center;
}
.categorias li a {
display: block;
padding: 0px 5px 0px 5px;
background-color: transparent;
color: #828282;
text-decoration: none;
margin-bottom:-4px;
margin-top:-4px;
text-align:center;
}
.categorias li a:hover {
background-color:none;
color: #fff;
text-align:center;
}
.categorias li a:visited {
color: #828282;
text-align:center;
}
.categorias a{
background-position: left center;
padding-left: 25px;padding-top: 2px;
padding-bottom: 2px;
border-bottom:0px solid #dfdfdf;
text-align:center;
text-align:center;
}

MODELO 2

/* Categorias */
.categorias {
width: 260px;
padding: 0px 10px 0px 10px;
margin: 0;
font-size: 15px;
font-family: ‘Century Gothic’, sans-serif;
text-align:center;
color:#fac0ca;
text-transform: uppercase;
}
.categorias ul {
list-style: none;
margin: 0px 0px 0px 0px;
padding: 0;
color:#fac0ca;
text-align:center;
}
.categorias li {
border-bottom: 1px solid #ececec;
margin: 0;
color:#fac0ca;
text-align:center;
}
.categorias li a {
display: block;
padding: 0px 5px 0px 5px;
background-color: transparent;
color: #828282;
text-decoration: none;
margin-bottom:-4px;
margin-top:-4px;
text-align:center;
}
.categorias li a:hover {
background-color:none;
color: #fac0ca;
text-align:center;
}
.categorias li a:visited {
color: #828282;
text-align:center;
}
.categorias a{
background-position: left center;
padding-left: 25px;padding-top: 2px;
padding-bottom: 2px;
border-bottom:0px solid #dfdfdf;
text-align:center;
text-align:center;
}

MODELO 3

/* Categorias */
.categorias {
width: 260px;
padding: 0px 10px 0px 10px;
margin: 0;
font-size: 15px;
font-family: ‘Georgia’, sans-serif;
text-align:center;
color:#fac0ca;
}
.categorias ul {
list-style: none;
margin: 0px 0px 0px 0px;
padding: 0;
color:#fac0ca;
text-align:center;
}
.categorias li {
border-bottom: 2px solid #ffdbe1;
border-top: 2px solid #ffdbe1;
margin: 0;
color:#fac0ca;
text-align:center;
}
.categorias li a {
display: block;
padding: 0px 5px 0px 5px;
background-color: transparent;
color: #828282;
text-decoration: none;
margin-bottom:-4px;
margin-top:-4px;
text-align:center;
}
.categorias li a:hover {
background-color:none;
color: #fac0ca;
text-align:center;
}
.categorias li a:visited {
color: #828282;
text-align:center;
}
.categorias a{
background-position: left center;
padding-left: 25px;padding-top: 2px;
padding-bottom: 2px;
border-bottom:0px solid #dfdfdf;
text-align:center;
text-align:center;
}

Observação: O trecho em vermelho é a largura dos marcadores. Modifique se necessário para ajustar ao seu template.
2 - Vá no painel do blogger > Modelo > Editar HTML. Pesquise (Ctrl + F) por:

]]></b:skin>

ACIMA desse trecho, cole o código referente ao modelo copiado.
Atenção: No novo modelo do blogger você só deve abrir a barra de pesquisa (Ctrl + F) após clicar dentro da caixa de códigos, caso contrário a sua pesquisa não apresentará resultados. A caixa de pesquisa deve aparecer assim:

3 - Agora, ainda no HTML do template pesquise por:

label1

Ao encontrar o trecho, clique na setinha preta ao lado esquerdo para expandir o widget.

Depois clique na setinha que aparecerá abaixo, para continuar expandindo.

Ao visualizar o trecho destacado abaixo:

Substitua-o por:

 <ul class=’categorias’>

4 - Visualize e se estiver tudo ok, salve.

Espero que tenham gostado do tutorial. Me avisem se deu certo e qualquer dúvida deixem um comentário aqui no post, como sempre, farei o possível para ajudar. ♥
Beijo!