PERSONALIZE OS MARCADORES DO BLOG (4 MODELOS)

Uma das ótimas fontes de inspiração para criar novos posts sem sombra de dúvidas são os marcadores. Em 20 ideias de posts para o seu blog eu citei a importância da escolha dos marcadores e/ou categorias pois serão através delas que os futuros posts surgirão.

Pensando nisso, eu preparei 4 modelos de marcadores para você usar em seu blog. Lembrando que esse post pertence a nossa série Layout dos Sonhos e essa é a aula de número 14. No último post da série eu ensinei a criar um arquivo em forma de calendário corre lá pra conferir. Agora vamos ao tutorial!

1. Primeiro, acesse o painel do blogger e vá em: Layout - Adicionar um Gadget - Marcadores e selecione as opções como a imagem ilustra:

2. Ainda no painel do blogger, clique em Modelo - Editar HTML e procure por ]]></b:skin> e acima dessa linha cole o código do modelo desejado, visualize e estiver tudo ok, salve: 

MODELO 1

#Label1 ul li {float:left;padding-left:10px;font-family: 'Arial Narrow', sans-serif;font-size: 14px;background: #F2F2F2;text-indent: 8px;width:100px;-webkit-transition-duration: .40s;-webkit-transition-duration: .40s;margin-left: 30px;border-bottom: 2px solid #FFFFFF;}#Label1 ul li:hover{background:url(http://migre.me/uesAP) no-repeat left;}#Label1 ul li a {color: #2E2E2E;}#Label1 ul li a:hover {color: #FA5882;}

MODELO 2 

#Label1 ul li {float:left;padding-left:10px;font-family: 'Arial Narrow', sans-serif;font-size: 14px;background:url(http://migre.me/uf90c) no-repeat left;text-indent: 8px;width:100px;-webkit-transition-duration: .40s;-webkit-transition-duration: .40s;margin-left: 30px;border-bottom: 1px dashed #151515;list-style: none;
}#Label1 ul li:hover{background:url(http://migre.me/uf90c) no-repeat left;}#Label1 ul li a {color: #2E2E2E;}#Label1 ul li a:hover {color: #FA5882;}

MODELO 3

#Label1 ul li {float:left; padding-left:15px; font-family: 'Arial Narrow', sans-serif;font-size: 14px;background:url(http://migre.me/uf9uY) no-repeat left;text-indent: 8px;width:220px; -webkit-transition-duration: .40s;-webkit-transition-duration: .40s;margin-left: 30px;border-bottom: 1px dashed #BDBDBD;list-style: none;
} #Label1 ul li:hover{background:url(http://migre.me/uf9zq) no-repeat left;}#Label1 ul li a {color: #2E2E2E;} #Label1 ul li a:hover {color: #FA5882;}

MODELO 4

#Label1 ul li {float:left; padding-left:15px; font-family: 'Arial Narrow', sans-serif;font-size: 14px;background:url(http://migre.me/uf9Nw) no-repeat left;text-indent: 8px;width:100px; -webkit-transition-duration: .40s;-webkit-transition-duration: .40s;margin-left: 30px;border-bottom: 1px dashed #626262;list-style: none;
} #Label1 ul li:hover{background:url(http://migre.me/uf9Nw) no-repeat left;}#Label1 ul li a {color: #2E2E2E;} #Label1 ul li a:hover {color: #626262;}

+ Download: Categorias em imagens

Caso não dê certo, verifique se o  código ID do gadget marcador está correto. Como base eu coloquei Label1 mas pode ser que no seu template seja outro, pra saber, basta clicar em Ir para um widget como a imagem abaixo ilustra:

No meu caso, o ID do meu marcador é Label2, então, basta que eu troque para o meu ID, no código do modelo que eu escolhi. Resumindo subistitua o #Label1 por #ID do seu marcador (Obs: não retire o símbolo jogo da velha >> # << ).

Qualquer outro erro que aparecer por favor, me informe através dos comentários. E logo abaixo você conferi as últimas aulas da nossa série Layout dos Sonhos:

• Baixe o layout base
• Background personalizado
• Cabeçalho com largura total
• Categorias em imagem
• Centralizando o título do post
• Personalizando o rodapé do post
• Postagem Relacionada
• Títulos dos Gadgets Personalizados (5 Modelos)
• colocar a foto do perfil arredondada
• Exibir último vídeo do youtube no blog
• Arquivo em forma de calendário

Espero que tenha gostado e não esqueça de me contar qual modelo vai usar. E se você tiver alguma sugestão de post, é só deixar nos comentários. Um super beijo e até a próxima!