PERSONALIZE OS MARCADORES DO BLOG (4 MODELOS)

30 junho 2016


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:


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!

12 comentários:

  1. Adorei o tutorial, o segundo modelo é meu preferido!
    Preciso lhe dizer que não consigo mais sair do seu blog, conheci-o a quase uma hora e já li mais posts aqui do que em qualquer outro blog durante toda a semana. Adorei a forma como você coloca seu conteúdo e o layout é maravilhoso. Ganhaste uma nova leitora e seguidora. Muito sucesso :)
    www.lagrimasdediamante.com

    ResponderExcluir
    Respostas
    1. Luisa, minha linda <3 Muito obrigada! Suas palavras são músicas para os meus ouvidos. É muito gratificante ler isso! Eu que agradeço sua presença aqui no Manual <3 Espero que volte mais vezes. Bjs linda :*

      Excluir
  2. Não consigo deixar os marcadores lado a lado, me ajuda por favor??

    Adorei seu blog, amando todas as dicas.

    ResponderExcluir
    Respostas
    1. Oi Drika! Tente diminuir o tamanho da fonte. Em font-size: 14px; troque o número 14 por um menor. Espero ter ajudado. Bjs linda :*

      Excluir
  3. Ameiiii o Post, amei o modelo 4 s2

    ResponderExcluir
    Respostas
    1. Fico feliz que tenha gostado Cacau <3
      Bjão :*

      Excluir
  4. Tem como trocar a fonte do titulo do marcador?

    ResponderExcluir
    Respostas
    1. A fonte do título do marcador não está incluso nesse código. Aquela fonte está presente em meu blog de testes. Os únicos elementos que sofrerão mudanças através dos códigos desse post, são os marcadores. Espero que eu tenha te ajudado. Bjs :*

      Excluir
  5. BOA NOITE AMORE, SEM DUVIDAS O SEU BLOG É UM DOS MELHORES QUE JÁ VI. JÁ AMO <3
    PORÉM NÃO CONSIGO DEIXAR ALINHADO O MARCADOR COM O TEMA DO GADGET TIPO FICA MUTO PRA DIREITA NÃO FICA ALINHADO. VOCÊ PODE AJUDAR?
    MEU BLOG É permariae.blogspot.com.br se vc poder dar uma olhada vc vai ver que os marcadores não estão alinhados

    ResponderExcluir
    Respostas
    1. Maria, primeiramente agradeço o elogio <3 é uma alegria saber que concidera o Manual um dos melhores blogs <3 vc é um amor =) E sobre o probleminha, bom o que deve está acontecendo é so seguinte, a estrutura do seu blog está errada, a largura está elevada. O tamanho ideia seria de 1300 no máximo. Espero ter ajudado. Bjão :* <3

      Excluir