Personalize seus marcadores


Antes que qualquer alteração, faça o backup do seu layout!

Hoje vou ensinar um modo de personalizar os seus marcadores (tags), este sera o resultado final.  
  
Primeiro - Adicione seu gadget  de marcadores, caso você já tenha, clique em 'editar' 


Selecione as opções desejadas, e desmarque a opção de 'número de postagens por marcador' e salve!

Agora, abra o código do seu layout, em Modelo >> Edit Html, aperte 'ctrl+f '  e procure por ]]></b:skin> e cole este código depois da tag encontrada. 

/* ---marcadores por enjoythelittllethings.blogspot.com --- */  
#Label1 ul li {float:left; padding-left:10px; font-family: 'Georgia'; font-size: 12px;
background:url(http://static.tumblr.com/8buytvw/30imlqqy9/tags.png) no-repeat left;text-indent : 8px;
width:100px; font-style: italic; -webkit-transition-duration: .40s;-webkit-transition-duration: .40s}  
#Label1 ul li:hover{background:url(http://static.tumblr.com/8buytvw/rE4mlqr3g/tags1.png) no-repeat left;}
#Label1 ul li a {color: #D9CFA3;} 
#Label1 ul li a:hover {color: #9b9b91;}   
/* ---fim--- */    

Salve e visualize!


Personalizando :
Label1 ul li - mude o icone em background, a e fonte utilizada; 
Label1 ul li:hover - mude seu efeito de quando passa o mouse;
Label1 ul li a / a:hover - mude a cor dos links.




Qualquer dúvida, deixe nos comentários :)

Comente pelo Facebook

30 comentários:

  1. Gostei! Já estava querendo usar marcadores assim! E combinou!

    ResponderExcluir
  2. Bruna sempre segui seus tutoriais no tumblr, e agora tô te perseguindo aqui pelo blogger hahaha ! Queria fazer uma sugestão: tem como você tentar fazer um tutorial ajudando na personalização dos títulos dos widgets? Desde já agradeço, beijo.

    http://luccasuriel.blogspot.com

    ResponderExcluir
  3. Amei! Estava procurando e achei no lugar certo. Personalizei e ficou super lindo.
    Beijos

    ResponderExcluir
  4. Olá Bruna acabei de usar lá no meu cantinho,mais uma vez te agradeço...

    ResponderExcluir
  5. Este comentário foi removido pelo autor.

    ResponderExcluir
  6. Este comentário foi removido pelo autor.

    ResponderExcluir
  7. Oi Bruna,

    será que você consegue me ajudar a dar uma melhorada no template do meu blog? To precisando de um help, não tô satisfeita com ele :/

    Meu blog: www.ummetroemeiodelivros.com

    Obrigada!

    Beijinhos

    ResponderExcluir
  8. Tentei agora no blog e não pegou, quando eu salvo o código aparece sob o Banner no topo :$ .

    será que tem alguma solução?
    beijos.

    www.oquefaltou.com

    ResponderExcluir
    Respostas
    1. O meu também

      Excluir
    2. Também aconteceu comigo :(
      blogdaumzoom.com

      Excluir
  9. Ajudou muitoo Brigadinhuuh Ameii seu Blog ;) bjs .

    ResponderExcluir
  10. Não consegui achar o codigo :/ Eu procurei e ele deu que não existiu

    ResponderExcluir
  11. Bruna (ou qualquer outra pessoa que conseguiu personalizar os marcadores), eu coloco o códio e continua a mesma coisa :/ (o lay é seu, mas eu não acho que seja isso). Você pode me ajudar?

    ResponderExcluir
  12. Funcionou aqui. Obrigado e parabéns pelo o tutorial =)

    ResponderExcluir
  13. Bruna, como faço pra tirar do itálico??? :(

    ResponderExcluir
  14. Funcionou no meu, ficou tão fofo *-* Muito obrigada

    ResponderExcluir
  15. Obrigada, amei mesmo!! <3

    http://fakescomm.blogspot.com.br/

    ResponderExcluir
  16. Não estou conseguindo. Será que poderia explicar melhor?

    ResponderExcluir
  17. Funcionou direitinho!
    Muito obrigada por esse tutorial :D

    ResponderExcluir
  18. só pega um? tentei fazer mais, mas só aparece um

    ResponderExcluir
    Respostas
    1. Você precisa usar os marcadores nas postagens :)

      Excluir
  19. Fiz tudo direitinho, mas não mudou nada, só ficou um caixa com o código acima do banner do blog :/ ajuda?
    blogdaumzoom.com

    ResponderExcluir
  20. Olá, Bruna. Relacionado ao tema marcadores, to aqui implorando, te pedindo pra fazer um tutorial ensinando a mostrar os marcadores da postagem como imagem, como essas fofas que você põe.
    Bjs <3

    ResponderExcluir
  21. Vou tentar em nosso blog e depois volto para dizer se deu certo. O endereço é www.viagenspelobrasil.net
    Grato desde já.

    ResponderExcluir