18/05/2013

Menu de Categorias #2 - Explore

Irei tocar em um casamento hoje, assim que eu chegar retribuo os comentários :)
Olá pessoal, como passam o fim de semana? Eu estou bem, cansado porém bem! Hoje eu trouxe para vocês mais um Menuzinho super legal para as categorias do Blog, é o que eu uso atualmente nesse Layout. Eu o chamei de Explore (na verdade foi o Luiz que me ajudou com o nome :P).
Antes de começarmos, vejam a Previa do Menu logo abaixo:


É super fácil de fazer o menu, mamão com açúcar mesmo! Bom, para que funcione é necessário adicionar o CSS de personalização no Painel de HTML do Blog. Vocês podem personalizar da maneira que acharem melhor, fiquem a vontade!
No Painel do Blog clique no Nome do seu Blog - Modelo - Editar HTML e procure por ]]></b:skin>. Quando achar, cole o código abaixo antes dele:
.Explore a{
background: #90C7EF;
display: inline-block;
padding: 2px;
margin: 2px;
text-align: center;
line-height:12px;
height:13px;
color:#fff;
width:220px;
float: left;
border-radius: 5px;
font-family: Century Gothic;
font-size:11px; !important;
text-decoration: none;
letter-spacing: 0.10em;
-webkit-transition-duration: .90s;
border: 2px solid #B8E1FF;
}
.Explore a:hover {
background: #A88ABD;
color:#fff;
letter-spacing: 0.30em;
-webkit-transition-duration: .90s;
border: 2px solid #D6B8EC;
text-shadow:2px 3px 8px #ccc;
box-shadow: inset 0 0 8px #f5f5f5;
}
Colou? Agora faça suas personalizações mudando as cores, linhas, etc. Depois disso, Pule para a ala Layout - Adicionar um Gadget - HMTL/JavaScript e cole o seguinte código dentro da caixinha:
<div class="Explore">
<a href="LINKDACATEGORIA">NOMEDACATEGORIA</a>
</div>
Pronto! Mude o que é preciso e faça bom proveito do Menu *-* Espero que tenham gostado. Por hoje é só isso mesmo, fiquem com Deus! õ/ 

44 comentários:

  1. Bem fofo o menu ! talvez coloque no proximo lay
    pode deixar que credito!!

    Beijos
    http://nosnocomputador.blogspot.com.br/

    ResponderExcluir
  2. Que menu lindo, gostei muito *-*
    cr4zy-world.blogspot.com

    ResponderExcluir
  3. Gostei bastante do menu! xD
    Tanto tempo que não passo aqui, o blog tá lindo (como sempre)
    http://criticas-on.blogspot.com.br/

    ResponderExcluir
  4. haha achei super fofo *-* amei
    cute-bii.blogspot.com

    ResponderExcluir
  5. É lindo! :3 Tô procurando um menu pra usar nas tags do lay que tô fazendo. Talvez use esse! ^^
    Bjo, Sel ;*

    Jovens Gordinhas
    Unicórnio com Bigode
    Nerd Descolada

    ResponderExcluir
  6. Que bonitinho o menu, adorei :3
    Beijos.

    e--mpire.blogspot.com

    ResponderExcluir
  7. amor , me segue no twitter @fofocareality , te segui lá preciso falar com você , eu queria alguém pra dá um novo visu pro meu blog ! , e eu vi que você arrasa, você poderia troca o visual do meu ? , eu posso divulga seu blogg , no meu POR FAVOR , me responda assim que ler ! , bjs ;*

    ResponderExcluir
    Respostas
    1. Fico feliz por gostar do que faço, mas infelizmente não faço Layouts por encomenda :S Espero que encontre alguém que faça :)

      Excluir
  8. Gostei muito do menu.O efeito é tão fofo, ficou ótimo.Parabéns ♥ Vai tocar em um casamento *O* ? Boa sorte Alex *U*

    http://blog-bluesky.blogspot.com.br/

    ResponderExcluir
  9. Ótimo tuto, gostei mesmo...

    Espero sua visita em ~>Nateeladopc.blogspot.com<~

    ResponderExcluir
  10. Que lindo o menu, achei muito fofo.

    -Beijos ♥
    www.tutoriar.net

    ResponderExcluir
  11. Olá Ale, como vai? muito tempo desde que vim por aqui. Você como sempre dando ótimas dicas de html e isso é bem legal. Adorei o layout que você está usando, uma graça. :) Passar mais vezes por aqui, viu? Acho que vou deixar a preguiça um pouco de lado por enquanto.

    Beijos,
    Monique Premazzi.
    http://www.secretsofalittlegirl.com/

    ResponderExcluir
    Respostas
    1. Monique *--------* Saudades de tu por aqui! Pode deixar que sempre que tenho um tempinho passo pelo SOALG, as vezes não comento, mas sempre que posso estou por lá :)

      Excluir
  12. aaaaah, amei esse menu de categorias.. É simples, mas é fofo ^^ Vou ver se uso ele no meu próximo layout :3

    Lost In The Sky

    ResponderExcluir
    Respostas
    1. Que bom que gostou! Faça bom proveito, se usar *-*

      Excluir
  13. Esse menu é lindo. Adorei. Parece um outro que postou faz um tempo, no template antigo até. Mas esse é mais bonito. Gostei <3
    Visita?

    ResponderExcluir
    Respostas
    1. Uhun, adoro postar Menus de Categorias *O* e Amo esse! :)

      Excluir
  14. menu lindo
    o POM arrasa!!
    rockmoreworld.blogspot.com.br

    ResponderExcluir
  15. Muito bom,adorei,talvez eu use no próximo layout.
    Um beijo
    http//bombasticmusics.blogspot.com

    ResponderExcluir
  16. O efeito desse menu é muito lindo. Todos menus que você faz ficam com os efeitos divos.

    garotadifferente.blogspot.com

    ResponderExcluir
  17. O menu é lindo! E você sempre inventado essas coisas super úteis para nossos blogs... Obrigada Alex. Adorei o tutorial! Beijos.
    the-zombie-attack.blogspot.com

    ResponderExcluir
    Respostas
    1. E tu sempre me deixando feliz com esses comentários *---*
      Obrigado!

      Excluir
  18. ual em! amei o tutorial!!!

    www.meninaperdida.com

    ResponderExcluir
  19. Que legal!
    Se eu soubesse como mexer no HTML novo do blogger eu até usava :P
    Mas é ótimo. se um dia aprender a mexer, vai ser a primeira coisa que eu vou atualizar!kk
    http://zombieesvg.blogspot.com.br/**

    ResponderExcluir
    Respostas
    1. Ah, fico feliz por saber >.< Dedica um tempinho que você aprende rapidinho :P

      Excluir
  20. Lindo o menu, AHSUAHSUA' :3
    Vai tocar em casamento? u.u Que chic -n

    Modern HTML

    ResponderExcluir
    Respostas
    1. Já toquei Natália *----* Foi super bom, e Obrigado :)

      Excluir
  21. Que menu liiiindo! Achei muito fofo mesmo!
    Alex, me desculpe a ausência, eu andava meio relapsa por esses tempos mas já estou de volta u3u
    Beijos~

    www.black-cherry.net

    ResponderExcluir
  22. Alex, to usando no meu layout olha aí:http://blog-ffm.blogspot.com.br/

    ResponderExcluir