Menu para marcadores

|
Kit Kat *OO*
Olá! Tudo bem com vocês? Estou muito feliz que tenham gostado das mudanças no blog e que tenha tanta gente interessada em fazer parte da equipe do CB ^^. Aguardem o resultado na segunda feira.

Indo para o assunto do post, hoje vou ensinar como fazer um menu bem bonitinho para organizar seus marcadores/tags. Ele é bem parecido com o que eu usava no antigo layout:


Instalá-lo é muito simples. Abra o modelo HTML do seu blog, aperte as teclas ctrl+F e cole ]]></b:skin> na caixa de pesquisa.

Acima do trecho que você procurou, cole o seguinte código:

Código
/***Menu para marcadores***/
.tag {
font-family: verdana; /*Fonte do menu*/
font-size: 10px; /*Tamanho da fonte*/
height: 16px;
background: url('URL_DA_IMAGEM') no-repeat left; /*Imagem que fica ao lado do link (16x16 px)*/
display: block;
margin-bottom: 5px; /*Espaço inferior entre cada link*/
padding-left: 18px; /*Não mude*/
transition:All 0.5s ease; -webkit-transition:All 0.5s ease; -moz-transition:All 0.5s ease; -o-transition:All 0.5s ease;}

.tag a {color: #fe97cd !important; /*Cor dos links*/}

.tag a:hover { color: #bb588b !important; /*Cor dos links quando passa o mouse em cima*/
font-weight: bold; /*Deixa os links em negrito quando passa o mouse, apague se não quiser este efeito*/
transition:All 0.5s ease; -webkit-transition:All 0.5s ease; -moz-transition:All 0.5s ease; -o-transition:All 0.5s ease;}
/***Por cherry-liah.blogspot.com - não retire os créditos***/

Edite como quiser e salve o modelo do seu blog. Agora vá na guia layout do blogger e adicione um gadget de HTML/Javascript onde quiser que o menu fique. Dentro do gadget cole o seguinte código:

<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>

Repita este código para cada tag que quiser no seu menu.

Para dividir o menu em três colunas
Se quiser o menu em três colunas como mostra a preview, ao invés de usar o código acima no gadget de HTML/Javascript, use esse:

Código
<div style="float: left; width: 30%">
<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>
<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>
<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>
<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>
</div>

<div style="float: left; width: 30%">
<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>
<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>
<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>
<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>
</div>

<div style="float: left; width: 30%">
<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>
<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>
<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>
<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>
</div>
<div style="clear: both"></div>

Cada bloco de código corresponde a uma coluna.  É só editar com atenção que fica tudo certinho.
Como extra, aqui tem algumas imagens para serem usadas neste menu. Aproveitem!




Espero que tenham gostado! Se usarem, não esqueçam de creditar. Este tutorial foi uma sugestão de um leitor, peça seu tutorial também pelo meu ask.

Gostou deste tutorial e quer reblogar? Leia as regras primeiro!

94 comentários

  1. Eu acho que no meu próximo layout eu vou usar é bem legal esse menu de tag ^^

    sense-wonder.blogspot.com.br

    ResponderExcluir
  2. Como sempre o blog ta lindo. Adorei a nova versão do layout!

    ResponderExcluir
  3. Que layout perfeito, estava precisando mesmo desse menu, outro dia estava procurando se existia tutorial dele aqui no blog.

    Página da Barbie

    ResponderExcluir
  4. Que fofo esse menu, com certeza vou usar no próximo layout.. Seu blog está MUIITOO LIINDO.. Parabéns
    Seguindo aqui se puder retribuir ou visitar eu agradeço muito..

    Há e eu queria convidar você para ser minha afiliada, aceita??
    Esperando sua resposta !

    sweet-divertido.blogspot.com

    ResponderExcluir
  5. Muito legal o tutorial, eu não sabia que era tão fácil :D
    the-paradiise.blogspot.com.br

    ResponderExcluir
  6. Vou tentar colokar no meu blog ^u^

    http://giirl-pink-s2.blogspot.com.br/

    Beijos e beijokas!

    ResponderExcluir
  7. Como não poderíamos amar as mudanças, tipo, você fez um layout ainda mais perfeito que o outro!

    Antes de mais nada, estou bem, arigatou gozaimasu por perguntar, com certeza, teria, postar em um blog, tão lindo quanto esse, acho que é o sonho de todo (a) blogueiro (a)...

    Esse jeito dos marcadores, isto era uma das coisas que mais me encantava no seu antigo layout, fico contente por você ter postado ele, acho que vou usá-lo no meu próximo layout!

    Kisus...
    Things Crazy

    ResponderExcluir
  8. Gostei do tuto, tava procurando um menu bonito, vou usar AGORA *-* Ah, e obirgado pelo coment lá no blog *O*

    blog-espelhodigital.blogspot.com

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

    ResponderExcluir
  10. Se tivesse postado antes, eu teria usando no meu novo layout... Agora não preciso mais e.e ótimo tutorial, sempre quis saber dele! hehe
    http://www.responsabilidadechic.com/

    ResponderExcluir
  11. Esse menu era muito perfeito *U*

    ~> caindoonareal.blogspot.com

    ResponderExcluir
  12. Que lindo que fica >< Talvez eu o coloque no blog.
    Kisses

    ResponderExcluir
    Respostas
    1. Me inscrevi para fazer parte da equipe do blog, estou louca pelo resultado amanhã >,
      universechic.blogspot.com

      Excluir
  13. Primeiro, que divo que o CB está, Liah, arrasou no design *-*
    Sempre quis aprender esse menu, adorei o tuto.

    World Of Tutos

    ResponderExcluir
  14. Amei o tutorial muito bom....

    Sempre que puder dá uma passadinha no meu blog, você e seus leitores serão sempre bem vindos...

    http://sorriso-jovem.blogspot.com.br

    Beijinhos!

    ResponderExcluir
  15. Tutorial da hora :3 Fica muito lindo este menu nos marcadores;
    x Mais que lay divo é esse garota, muito perfeito. Parabéns tá uma gracinha ! Se tivesse tempo até me inscreveria para ser postadora, mas tenho uma vida muito agitada [oqmdera] '
    Seguindo iiy amando*

    Blog novo >CaféComChocolate
    2Bjs & 5Amaços

    ResponderExcluir
  16. nossa que charme que ficou seu blog
    a tuto é ótima parabéns
    bjks
    itsrockmore.blogspot.com.br

    ResponderExcluir
  17. adoreiiiii,,,no proximo coloco no meu ..

    bju

    http://aieuvivantagem.blogspot.com.br/

    ResponderExcluir
  18. Liah eu quero saber como vc colocou esse modelo de comentário!!!!Faz tutô, pleaseeee!!!!!
    http://myworldispink-4you.blogspot.com->Fashin Girls

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

    ResponderExcluir
  20. Fica muito lindo os marcadores assim. Vou usa-lo no meu próximo layout.

    ResponderExcluir
  21. *oooooooooooooooooooooo* OMG! Esse layout está perfeitamente D-I-V-O! Completamente encantada, vomitando arco-iris!!! Os marcadores assim ficam ótimos, com toda certeza. Acho que vou usar no próximo layout do meu blog.

    ♥ blogthistime.blogspot.com

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

    ResponderExcluir
  23. adoreii o lay arrasou , quem nao gostaria de postar aqui em !! Eu quero muitoo , ameii o tuto sempre fiquei curiosa e ficava procurando ele !!

    perfectexplosionn.blogspot.com

    ResponderExcluir
  24. Que perfeito !
    pequeena-princesa.blogspot.com.br/

    ResponderExcluir
  25. flor eu não sei mais acho que eles plagiarão seu nome http://mary-cherrybomb.blogspot.com.br/ só to te avisando

    ResponderExcluir
  26. Uau to vendo que vc voltou com tudo em adoreiiii o seu lay lindo e adorei o tuto
    post novo passa lá ;) www.mymomentsz.blogspot.com

    ResponderExcluir
  27. LIINDOO >_< sempre quis, vou usar no meu proximo lay xD
    kisses

    ResponderExcluir
  28. sempre quis, salvei nos favoritos, e assim que tiver tempo colocarei no meu Blog :)) Liah, você pode postar como colocou esse efeito rosa no transition super amor nas postadoras?
    xx.

    ResponderExcluir
  29. Esse menuzinho para marcadores é lindo, Lia! E adorei sua caixinha de comentários, a imagem de perfil é simplesmente única <3

    ResponderExcluir
  30. Adorei.... estou precisando Mesmo Rsss...
    Beijossss Flor

    ResponderExcluir
  31. Sempre adorei esse menu para marcadores, é muito lindo ♥ Talvez use no meu próximo layout, beijos!

    ResponderExcluir
  32. Que menuzinho divo! *u* Acho que em um próximo lay eu uso, com certeza...

    Beijos >o<

    ResponderExcluir
  33. Olá, como você modificou o fã gatget?!!!!

    ResponderExcluir
  34. Aah, talvez eu use. Mais é bem provável que não, eu não gosto de marcadores. Mais é bem fofo. E original. O layout, também tá muito original. Beeijos ;*

    ResponderExcluir
  35. muuuito lindo *----------* acho que vou usar


    @YourWorld

    ResponderExcluir
  36. Adorei vou usar *.*
    Adorei o efeito das imagens faz tutorial? :3

    ResponderExcluir
  37. Eu realmente estava pensando que era o gadget de tags personalizado... Me enganou direitinho...
    Acho que é a primeira vez da minha vida que passo aqui, lembro de seguir e comento. rsrs'
    O menu é bem fofo e bem facinho de fazer e personalizar. A-m-e-i-!
    ~Ana @TSD

    ResponderExcluir
  38. Muito legal, é bom pq estou começando meu primeiro blog

    ResponderExcluir
  39. Muito bom Liaah *-*

    Estou começando hoje o meu blog! Ele está com um layout free, seu *-*
    No proximo layo, vou usar!

    Beijos

    garota-bomba.blogspot.com

    ResponderExcluir
  40. Parabéns pelo novo layout do blog! Sempre bonito e criativo. Fino mesmo!
    (´∀`)ノ Olá!
    Gostei desse menu tenho vontade de colocar. Quem sabe no meu próximo layout! Se eu usar coloco os créditos...como sempre!
    (≧◡≦)~♥ Amei os extras, as imagens de mini tags. Muito fofas
    E quem bom que vc retornou com gás e tudo com o blog!
    Abraços
    (づ。◕‿‿◕。)づ
    recantodafadaalice.blogspot

    ResponderExcluir
  41. bem legal o menu! Otimo tuto
    http://lovet--witter.blogspot.com.br/

    ResponderExcluir
  42. Fazia um tempo que não vinha aqui, me desculpe, Liah!
    O tempo não quer colaborar, então só consigo retribuir meus comentários. Mas dei um jeito de entrar aqui e fiquei surpresa quando vi que você mudou o layout. Acho que nem preciso dizer que ficou perfeito, assim como todos os outros <3
    Adorei esse tutorial, é bem fofo e dá um toque organizado para o blog, além de ser fácil de fazer.
    Beijo, espero que consiga vir aqui mais vezes :3
    pqngarota.tk

    ResponderExcluir
  43. Estava a proucura disto para o meu proximo lay! Obrigado!

    http://ocopodeleite.blogspot.com/

    ResponderExcluir
  44. AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA Liaaaah ♥
    Meu Deus, que saudade =DDDD Desculpe me pelo sumisso :c Faz tempo que não aparecia por aqui né? Bom... acho que vc nem lembra de mim mais :c Mas tudo bem eu falo tudo desde o começo, lembra eu sou aquela do blog, ou melhor, do ex-blog : Kawaii The World, mas aí acabei ficando em Hiatus e parei tudo. Hoje, eu voltei com o blog e claro, com o nome mudado para: Tentando Esquecer. Estou muito feliz com toda a mudança. Me sinto mais feliz assim =DDD Nossa, adália me desculpe mesmo por não vim mais aqui :CCC Estou muito triste comigo mesmo, e sériãaao, me desculpe. O sue blog, claro está no meu blogroll. Sei que não muda muita coisa, mas é só pra retribuir o carinho que me deu!!!!!! <33 Awwwn, e o lay então? OG! Ainda mais com a Ellen ♥ Adáliah, sua Linda amooo você, viu?! HAHAHHA *U* ~~ eu sou tontta =P

    Beijos minha Flor, espero que consiga postadores ótimos. Eu até me candidataria, mas acho melhor não. Meu tempo anda corrido demais, e acredito que te decepcionaria com a falta de posts :c

    aaaaaaaaaaaaaaaawn. que feliz que você voltou!!! Adoro vc Liah ♥
    Até mais, fique com Deus

    - BLOG Tentando Esquecer
    - AJUDA Curta a nossa FANPAGE

    ResponderExcluir
  45. Meu Deus que lay Lindo, arrasou ficou P-E-R-F-E-I-T-O, Sobre o tuto vou usar no meu próximo lay
    Beiijos Lia.,
    http://juulopes-moda.blogspot.com.br/

    ResponderExcluir
  46. Garotaaaaaaaaaaaaaaaaaaaa!
    Você tem noção do que fez com seu blog????????
    TÁ LINDÉRRIMOOOOOOOOOOOOOOOOO!
    OMG!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    Valeu a pena esperar por sua volta, seu blog tá demaaaaaaaaaaaais! <3 <3 <3

    ResponderExcluir
  47. Liah que saudade de você eu sempre fui sua leitora desde do meu primeiro blog pode crer!
    no meu próximo lay uso esse tuto super prático e legal :D
    beijinhoooooooos

    http://detudoumpoucoofficial.blogspot.com.br

    ResponderExcluir
  48. legal !!! amei =)

    Me ajuda a chegar a minha meta de seguidores ? meu blog é - http://papodabru.blogspot.com.br/ e quando conseguir minha meta haverá um sorteio repleto de coisas legais. Conto com a sua ajuda! Bj ;*

    ResponderExcluir
  49. Oi, preciso de ajuda! Não consigo de jeito nenhum mudar o cabeçalho do meu blog, vou no painel do blog, e depois em layout, ai para trocar tem que apertar no botaozinho Editar né, então, não vai! Não da para clicar, me ajude por favor! http://meninaprincesagirls.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Vá em Layout > Cabeçãlho > Remover imagem e selecione uma outra

      Excluir
  50. Adorei o menu, vou até usar no layout dum blog meu que estou fazendo! Agora que vi a volta do CB, sério aqui está lindo.

    ResponderExcluir
  51. Liah, queria pedir um tutorial explicando como você personalizou os direitos autorias do seu Blog!
    Obg !

    ResponderExcluir
    Respostas
    1. Liah,amei o tuto!
      Eu estava procurando um tutorial de personalizar os marcadores :)
      Beijos


      Cherry Girls

      Excluir
  52. muuuuito divo esse tutorial!! tipo, eu vivo usando teus tutoriais pro meu blog! falando nisso, gente vão no meu blog! terminei de criar hoje e já postei lah uma parada mas queria que vcs vissem! qro mto fazer parcerias!!

    http://blogjujubinhas.blogspot.com.br/

    ResponderExcluir
  53. Olá Liah, fico feliz que você tenha voltado *-* alias o blog está perfeito como sempre foi. Seus designs são os melhores que eu já vi e muito obrigada por postar tutos, me ajudam muito. Gostaria muito de ter tempo para me candidatar pra sua equipe mas infelizmente custo a manter meu blog, como poderia auxiliar outro?

    Também queria, humildemente, pedir para afiliar meu blog ao seu. Você aceita afiliação?

    Beijos, Amanda
    http://wishoffashion.blogspot.com/

    ResponderExcluir
  54. Eu uso um menu de tag também, mas é um tanto diferente... Mas gostei desse <3 Quem sabe eu use em outro layout? :3

    ResponderExcluir
    Respostas
    1. Olá,eu posso ser administradora de seu blog?
      sei que não é para qualquer um,mas é um grande sonho meu,sei que você não vai deixar só pedindo assim,mas quero saber o que faço para me tornar administradora?? Por favor,não me ignore!!

      Excluir
  55. Lindo esse menu, sempre quis saber como se fazia

    ResponderExcluir
  56. Olá, adorei o tutorial e quero, desde já, dar-lhe parabéns pelo ótimo trabalho.. Obrigado pelo turorial ajudou muito no meu blog!

    ResponderExcluir
  57. Adorei o tutorial, é o que eu estava procurando pra terminar de arrumar meu blog *-*
    XOXO :3

    ResponderExcluir
  58. Eu coloquei no meu blog, só que não entendi como direcionar para a página que eu quero...alguém me ajude?

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

    ResponderExcluir
  60. Amei nega to usando no meu novo layout sou nova no blog pois nao tenho nenhum seguidor http://hurricaneready.blogspot.com.br/

    ResponderExcluir
  61. Eu não consegui achar esse código e ]]> eu digitei mas não tem. =\

    ResponderExcluir
  62. Adorei!Vou usar quando eu tiver mais conteúdo no meu blog.Liah,está apoiada,seu blog é um dos melhores,mas se cansou não tem problema :)

    http://2desventuradas.blogspot.com.br/

    ResponderExcluir
  63. TÃO PERFEITO *O*
    Obrigada sua DIVA amei o tuto !

    ResponderExcluir
  64. Como sempre LINDO ! Agora que estou trabalhando em um novo layout todos os tutoriais do Cherry Boomb são necessários .

    Um Beijo & um queijo *-*

    ResponderExcluir
  65. Olá! Parabéns pelo tuto.
    Gostaria de saber como faço para dar mais espaço entre as colunas.

    Obrigada!

    ResponderExcluir
  66. Não acho aquele código no HTML do meu blog procuro faço o negócio do Ctrl F mas dá 0 de 0, oque eu faço ?
    http://mundoitgirl.blogspot.com/

    ResponderExcluir
    Respostas
    1. Antes de você clicar no Ctrl F clique no texto do Html. Estava com o mesmo problema até que minha irmã me ensinou. Por favor visite :
      http:// pausaparaparis.blogspot.com/

      Excluir
  67. Não acho o código inicial no meu blog,o que eu faço?

    ResponderExcluir
    Respostas
    1. Antes de você clicar em Ctrl F clique no texto do Html. Estava com o mesmo problema, mas minha irmã me ajudou. Por favor viste:
      http:// pausaparaparis.blogspot.com

      Excluir
  68. Muito bom flor, me ajudou muito. Eu quero agradecer e ao mesmo tempo só lamento por esse blog ter acabado, por que meu blog só está do jeito que tá foi por causa do seus tutoriais. Bjs!!! Meu blog é esse:
    http://pausaparaparis.blogspot.com

    ResponderExcluir
  69. Não acho o código , até segui a dica que a Clara deu, mas realmente não achei!
    Você poderia me ajudar?

    ResponderExcluir
  70. Muito obrigada! Deu tudo certinho!
    Eu só modifiquei colocando o menu em uma página.
    Parabéns pelo blog ♥

    http://patricinhadechuteira.blogspot.com.br/

    ResponderExcluir
  71. No meu não deu certo :(
    http://wordphotosca.blogspot.com.br/

    ResponderExcluir
  72. Adorei o tutorial, muito bem explicado! :D

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

    ResponderExcluir
  74. Meu blog bugou o codigo foi parar em cima do cabeçalho, me ajuda?
    ( http://glittercankill.blogspot.com.br/ )

    ResponderExcluir
  75. nao consigo, me ajuda??? criei meu blog semana passada e ainda nao sei quase nada de codigos


    https://jaqueeoliver.blogspot.com.br

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...