15/06/2012

Menu Scars

Hello Boys and Girls, como estão? Espero que muito bem assim como eu! Depois de muito revirar o HTML do meu Blog de testes, e depois de ir no Google tradutor várias vezes durante minhas experiências, consegui criar um Menu super legal para vocês.
O nome do menu ~~Scars~~ é inspirado em uma música da Miley e significa cicatriz ~~não me perguntem porque eu o chamei desse nome esquisito porque eu não saberei responder~~ O Menu fica como a foto abaixo, quem tiver afim de aprender clique para ver o Tutorial completinho!


No Painel do Blog, Clique em Design, Editar HTML, e pesquise por: ]]></b:skin>
Acima dessa Tag cole o código abaixo:
/*-- Início do Menu Scars por Part Of Me--*/
Scars {
font-family: Arial; /*-fonte do menu-*/
width: 20%; /*-largura-*/
float: left; /*-posicionamento do menu-*/
background: #9BCD9B; /*-cor de fundo-*/
padding: 3px; /*-altura-*/
text-align: center; /*-posicionamento do texto-*/
margin: 2px; /*-espaço-*/
-webkit-transition-duration: .90s; /*-Tempo de duração-*/
font-size: 08pt; /*-tamanho da fonte-*/
color: #ffffff; /*-cor da fonte-*/
}
Scars:hover {
font-family: Arial; /*-fonte do menu hover-*/
width: 20%; /*-largura hover-*/
float: left; /*-posicionamento do menu hover-*/
background:  #EBE5D4; /*-cor de fundo hover-*/
padding: 3px; /*-altura hover-*/
text-align: center; /*-posicionamento do texto hover-*/
margin: 2px; /*-espaço hover-*/
-webkit-border-radius: 15px 15px 15px 15px; /*-bordas hover-*/
-webkit-transition-duration: .80s; /*-Tempo de duração-*/
color: #A64D28; /*-cor da fonte hover-*/
}
/*--Fim do Menu Scars por Part Of Me--*/
Salve o Modelo e Clique na Aba Elementos de Página, Adicionar um Gadget, HTML/JavaScript e cole o código abaixo, fazendo as devidas alterações no que está de Amarelo:
<a href="Link"><Scars>NomedoLink</Scars></a>
E aê pessoal? Gostaram do meu primeiro Menu? Deu um trabalhinho viu gente, mas foi com muito carinho! Fiquem bem e Até mais ver

39 comentários:

  1. Que bonitinho esse menu guri ^-^
    e o blog tbm..tri bonito aqui

    ~~bad-reputation-13.blogspot.com.br~~

    ResponderExcluir
  2. aah é lindo Alex! Ameei, ainda mais porque tem o nome de uma musica da minha Diva s2' kkkk

    docequintafeira.blogspot.com

    ResponderExcluir
  3. Que fooofo! Adorei o menu. Criei o meu próprio esses tempinhos atrás. Alex, estava com saudades de você e do blog. Aqui está lindo (: Um beijo

    http://onthefame.blogspot.com.br/

    ResponderExcluir
  4. O menu fica bem bonito,adorei o tutorial.
    http://i-teenbr.net.tc

    ResponderExcluir
  5. Que lindo o menu. Adorei! Super criativo em querido!

    http://anikspink.blogspot.com.br/

    ResponderExcluir
  6. È tão lindinho o menu *-*
    eu adoorei ele *--*

    http://the--baby.blogspot.com.br

    ResponderExcluir
  7. Eu amo essa música, ahaha!
    Adorei o menu. *--*

    Seguindo, o blog é show! ^^
    http//pensamentosda-aline.blogspot.com.br/

    ResponderExcluir
  8. Ameio menu Alex, muito lindo o efeito dele! Talvez eu use em algum extra em meu blog ^-^

    ResponderExcluir
  9. Amei o menu,adoreii demais.
    Muito legal também o blog.
    lifeonalin.blogspot.com.br

    ResponderExcluir
  10. O menu ficou muito bom ! :)
    shuashaushuahs

    Vc é da Paraíba né? Sou daqui de SP mas adoro ai =) Beijos

    http://bb-garotax.blogspot.com

    ResponderExcluir
  11. Efeito fofo, no meu próximo designer quero um menu assim.

    http://imaginesooficial.blogspot.com.br/

    ResponderExcluir
  12. Acho super legais esses efeitos assim, tá de parabéns pela sua paciência e criatividade para fazer menus Alex rs. Beijão :*

    http://www.world-cutest.blogspot.com.br/

    ResponderExcluir
  13. Amei o menu *O*
    eu nunca consegui criar um menu, mais muitas vezes já fiz um monte de personalizações, deixando sempre diferente *-*
    beijos Alex !
    diariodeumameninanerd.tk

    ResponderExcluir
  14. Aii que lindo Alex,arrasou! Muito útil ♥ O efeito muito demais, e as cores perfeitas :) Beijos :3
    http://www.viciadasemcupcake.blogspot.com.br/

    ResponderExcluir
  15. Ai, que fofo<3 amei demais, ainda vô usa, creditando é claro! Que linda essa foto da Miley! agora me diz: quando ela não tá linda, né?
    Bjs ~> imnanda.blogspot.com

    ResponderExcluir
  16. Awn, que fofo Alex! Ainda não tomei coragem pra fazer meu próprio menu, mas qualquer dia desses, invento um. Ah, eu aceito seu pedido de afiliação se ele ainda estiver válido! Obrigada por me convidar, será uma honra. Beijos, the-zombie-attack.blogspot.com

    ResponderExcluir
  17. Obrigada Alex! Já vou colocar você lá no blog também, agradeço de novo. Beijos, the-zombie-attack.blogspot.com

    ResponderExcluir
  18. alex que vida é essa em vivendo é aprendendo né hoje eu digitei Ctrl-c e Ctrl-v pra uma vida kkkk mas é fofinho o menu

    ResponderExcluir
  19. Ficou bem bacana ! Google tradutor salvando nossas vidas ^^
    -------------------------------
    http://bugigangazdanet.blogspot.com/

    ResponderExcluir
  20. Adorei o tuto *-*
    Beijinhos
    www.em-teusbracos.blogspot.com

    ResponderExcluir
  21. Muito legal o menu! O efeito é bem bacana. O design novo também esta lindo, viu?

    Kissus ---> Blog Bola de Chiclete.com

    ResponderExcluir
  22. O menu fica lindo *-------------* No meu próximo lay vou usar ele eu acho!

    Blog

    ResponderExcluir
  23. Fica super lindo! Imagino o trabalho que deve ter dado, mas valeu a pena!!
    Parabéns por ter feito!
    Beijo e bom final de semana =)

    blogmodaonline.blogspot.com

    ResponderExcluir
  24. O menu é mto legal! E o blog é liindo! To seguindo,segue de volta?

    www.girlteenlinda.blogspot.com

    ResponderExcluir
  25. Ficou muito lindo! Amei! Vou usar no meu próximo lay :3 Adorei o blog, ja to seguindo, beijos ♥

    mylittlebear-official.blogspot.com

    ResponderExcluir
  26. Lindo o menu, e o efeito melhor ainda1 Bjs, http://happy-charllote.tk/

    ResponderExcluir
  27. Bem caprichado seu menu, parabéns!
    E obrigado lindo pelo carinho de sempre no CL!

    bjãoo

    ResponderExcluir
  28. Blog lindo. AMEI *-*!

    Beijos,
    Camila Angelina
    http://cantinhodacaps.blogspot.com.br/ (agora com TEMPLATE ANIMADO)

    ResponderExcluir
  29. Uma ótima dica!!! E amei as mudanças aqui!!! Mudei o pouco o meu blog, mas quero mudar mais ainda!!!
    Me visita depois?

    ResponderExcluir
  30. Oie Alex!
    Vim agradecer o seu comentário lá no meu blog, e te desejar um bom final de semana! ^^

    http://pensamentosda-aline.blogspot.com.br/

    ResponderExcluir
  31. Sucesso com o novo blog! Passa lá no meu, bjos
    http://valeapena-helena.blogspot.com.br/

    ResponderExcluir
  32. Ameei seu blog s2seguindo

    opedecoelho.blogspot.com

    ResponderExcluir
  33. Adorei o tutorial! Muito bacana o efeito.
    http://rosaschiclete.blogspot.com.br

    ResponderExcluir
  34. o menu ta tão lindinho rs ^^

    http://garotoonerd.blogspot.com

    ResponderExcluir
  35. Legal o menu, eu faria se entendesse de HTML :P

    Beijos
    Anne
    meninasantenadas.tk

    ResponderExcluir
  36. Ai Oi , Bom acabei de comchecer seu blog
    Mais pra te dizer eujá amei ja tornei-me fã
    nossa você merece meus devidos parabeens
    amei tudo aqui
    Visita ai Lindo:http://smileretro.blogspot.com.br/

    ResponderExcluir
  37. Ótimo menu! Eu tentei usar, mas não deu muito certo >.<
    rsrs lindo blog viu? parabéns!
    ismeninadelicada.blogspot.com

    ResponderExcluir
  38. Amei o enu, fica muito lindinho!
    e aja paciencia hein rs Beijoos ;*
    amoraazeda.blogspot.com

    ResponderExcluir
  39. Que menu lindo!
    *--* Meu blog não está pegando menu '-------------' Se tivesse eu usaria ;3
    Cute Memories
    (Link no Perfil)

    ResponderExcluir