04/09/2012

Menu de Categorias

Olá crianças, como vão? Primeiro gostaria de Agradecer aos Elogios de todos com relação ao Layout e também a todo mundo que votou no Blog no Golden Awards, Obrigado! Assim como no Antigo Layout, resolvi criar algo exclusivo neste também. Desta vez foi um Menu de Categorias (Marcadores) e como de costume, trago hoje o Tutorial dele para vocês.
O Resultado é bem legal, vejam a prévia do Menu abaixo:

Gostaram? Pois então, vamos fazer! No Painel do Blogger, vá em Design, Editar HTML, Ctrl+F e pesquise por:  ]]></b:skin>
Cole o código abaixo antes do que você acabou de encontrar:
/*-Menu de Categorias por Part Of Me -*/
Categorias {

font: normal normal 11px 'Verdana', Helvetica, FreeSans, sans-serif; /*-fonte do Menu-*/
width: 96%; /*-largura-*/float: left; /*-posicionamento do menu-*/
background: transparent; /*-cor de fundo-*/
border-bottom: 1px solid #97bd51; /*-cor da borda de baixo-*/
padding: 2px; /*-altura-*/
text-align: center; /*-posicionamento do texto-*/
margin: 2px; /*-espaço-*/
-webkit-transition: 0.5s linear; /*-não precisa mexer aqui-*/
font-size: 11px; /*-tamanho da fonte-*/
color: #4f4f4f; /*-cor da fonte-*/
}
Categorias:hover {

font: normal normal 11px 'Verdana', Helvetica, FreeSans, sans-serif; /*-fonte do Menu Hover-*/

width: 96%; /*-largura hover-*/

float: left; /*-posicionamento do menu-*/
background: #97bd51; /*-cor de fundo hover-*/
border-bottom: 1px solid #fa7a57; /*-borda de baixo hover-*/
padding: 2px; /*-altura hover-*/
margin: 2px; /*-espaço-*/
-webkit-transition: 0.5s linear;
color: #ffffff; /*-cor da fonte hover-*/
letter-spacing: 3px; /*-espaço das letras hover-*/
border-radius: 10px; /*-bordas arredondadas hover-*/
}
Colou? Então salve o Modelo. Agora vá para a ala Elementos de Página, Adicionar um Gagget, HTML/Javascript e cole o código abaixo dentro da caixinha:
<a href="LinkdaCategoria"><Categorias>NomedaCategoria</Categorias></a>
 Gostaram do Resultado? Se usarem, por favor, creditem ta certo? Na próxima postagem eu trago um teste bem legal pra vocês ok? Beijão e Até a Próxima!

35 comentários:

  1. Adorei ! Irei usar achei muito fofo

    mundo-teens-mt.blogspot.com.br

    ResponderExcluir
  2. Legal o tutorial Alex,bem útil,vou salvar aqui nos meus favoritos (ja ta cheioo)
    Bangteen.blogspot.com

    ResponderExcluir
  3. O menu fica lindo! Acho que vou usar...

    omeubrilhantemundo.blogspot.com

    ResponderExcluir
  4. O menu é lindo Alex, esse efeito de transição nele dá um charme a mais. Adorei. Um beijo.

    Anna || World Cutest

    ResponderExcluir
  5. Gostei bastante, achei muito original mesmo! Talvez eu faço no próximo layout, já até salvei em favoritos! HAHA!

    Beijos Alex!
    Garota Vertigem

    ResponderExcluir
  6. Ficou divo <3 Vou usar no meu proximo lay que esta proximo.
    http://catchingfeelings-love.blogspot.com.br/

    ResponderExcluir
  7. Nossa que lindão esse menu u.u ele é tipo divo KOSAKOSA adorei!

    jovenclube(.blogspot.com.br)

    ResponderExcluir
  8. Você sempre arrasando no blog! Ficou ótimo!
    Blog atualizado

    ResponderExcluir
  9. Oi,oi,amei o menu ! Gostaria de te fazer 2 convites, o primeiro é se voce aceita afiliação ? e o segundo,se você viu a nova post lá do blog deve saber que eu estou precisando de um novo postador (a) e gostaria de te convidar pra postar lá no blog?aceita ? aguardo a resposta .
    Beijos .

    Sweet Imagination ~.~

    ResponderExcluir
  10. Ah eu amei amei amei o novo layout,minha diva Demi , sua linda ! S2

    ResponderExcluir
  11. OMG , que lindo =O peerfeito
    vooou usar cooncerteeza ; Mais é claro colando os créditos ..

    cherry-cand.blogspot.com

    ResponderExcluir
  12. Fica muito bonito, acho que vou usar no meu próximo layout!
    Amei aqui, o blog é lindo, vou visitar aqui mais vezes ♥
    Beijos ~
    Bolo de Morango (visite pelo perfil)

    ResponderExcluir
  13. Que lindo, com certeza vou usar no meu próximo lay e já votei em você no Golden Awards. Boa sorte c:
    umadoceimperfeicao.blogspot.com.br

    ResponderExcluir
  14. Aah que lindo que fica! Fica super diferente. :3 E é fácil de fazer, adorei! :D Ah, eu votei em você no Golden Awards, boa sorte! :*
    Beijos, Paula! ♥
    ~Sweet Makeup~
    (clica no perfil pra visitar meu blog) :3

    ResponderExcluir
  15. O menu é super fofo, muito fácil de colocar, bonito e organizado :)
    Talvez use num próximo layout ^^

    Bjoos!
    http://sorvete--de--morango.blogspot.com/

    ResponderExcluir
  16. Que lindo *w* Estou pensando em colocar esse menu de categorias no meu próx. layout, favoritei (: Ansiosa pro teste ^-^

    Beijos, Candy Cherry

    ResponderExcluir
  17. -Hey Amigo ,adorei o menu de categorias eu acho que vou usar <3
    Mil Beijos <3 Soraya

    smileretro.blogspot.com

    ResponderExcluir
  18. Adorei seu blog é muito perfeito,ficou ainda mais com a minha Diva Demi♥,Como que você colocou aquela música no cabeçalho,pode fazer um tutorial?

    ResponderExcluir
  19. Ficou lindo! Adoro menus assim, porque deixa o blog bonitinho e organizado *-*

    Beijos, momamoraes.blogspot.com s2

    ResponderExcluir
  20. ja conhecia o tuto é mt útil!
    véi, que lay é esse? *o*
    pirei dms.. lindasso!Cê que fez? *-*

    blogportalteen.blogspot.com

    ResponderExcluir
  21. ótimo tutu!! adoreei <3 ta tudo bem explicadinho hihi'
    Bezoos Amoree! Nhaaack :3

    ResponderExcluir
  22. Ah,entendo sim ! mas obrigada mesmo assim,e na questão afiliação se vocÊ for fazer geral nos afiliados,e estiver interessado a se afiliar com o SI me avisa,ok ? Beijos .

    Sweet Imagination

    ResponderExcluir
  23. Esta é a primeira vez que acesso o seu blog e achei incrível! Amei o design e o layout ^^
    Já estou seguindo e curtindo!!! Ah e gostei do resultado deste menu, quem sabe eu aplique em meu próximo layout! Se puder, visita meu blog?

    Abraços,
    Revolução Nerd

    ResponderExcluir
  24. Heey, seu blog é lindo!
    Fiquei surpresa, afinal, é o primeiro menino blogueiro que eu vi.. acho isso super legal!
    bjos.

    ResponderExcluir
  25. Seu novo layout ficou divino, viu? REALMENTE divino. HSUHASUAH Ando um pouco ausente daqui, por causa da administração e da escola, mas eu sempre passo no teu blog pra dar uma espiadinha no que anda fazendo de novo, e eu realmente gostei muuuito desse layout, como todos os outros, né? Talento é talento.
    Parabéns, e beijo enorme.

    http://pequenasevidenciasdoamor.blogspot.com.br/

    ResponderExcluir
  26. o layout esta lindo,o tutorial e super simples -irei fazer concerteza.e quero este layout pra mim AGORA!

    ResponderExcluir
  27. Que menu legal! Caprichou muito hein. E por falar em caprichar, que layout maravilhoso é esse? Tô completamente in love. As cores, a Demi... Tudo ficou perfeito *-*
    Na minha opinião, o melhor design de um blog masculino é o seu! E já votei lá no Golden Awards.

    Beijos,
    Anna
    garota-queen.blogspot.com

    ResponderExcluir
  28. Oi alex tudo bom antes de tudo seu blog é lindo eu acompanho sempre e queria agradecer muito a você pelos tutorias me ajudaram muito a fazer o meu theme valeu :)

    http://letraspalavrashistorias.blogspot.com.br/

    ResponderExcluir
  29. Eu Adorei
    mais tipo ficou faltando vc explica como muda as cores.Porq sou kinder nesses assuntos kkk
    formula-amor.blogspot.com

    ResponderExcluir
  30. Adorei o tutorial, o menu ficou lindo. Nossa que layout lindo, sério está de parabéns, ficou uma graça, adorei a combinação de cores. Estaremos aguardando o teste!

    Beijos,
    Paraisodemenina(.blogspot.com)

    ResponderExcluir
  31. Adorei o tutorial, o menu ficou lindo. Nossa que layout lindo, sério está de parabéns, ficou uma graça, adorei a combinação de cores. Estaremos aguardando o teste!

    Beijos,
    Paraisodemenina(.blogspot.com)

    ResponderExcluir
  32. Amei o tutorial! op menu é lindooo, amei o blog super original! tô seguindo segue de volta?

    ~retribui? Adolescente Nerd

    ResponderExcluir
  33. Ameei o tutorial e já adiquiri lá no blog... Beeijos ;*

    http://laara-teen.blogspot.com.br/

    ResponderExcluir