17/12/2012

Tutorial: Menu Color

||

Hayoo meus bunnys como vão vocês? Foi mal a demora para postar hoje, tive pequenos probleminhas, mas trago um tutorial que achei no blog Birthday Cake que achei muito kawaii, então decidi postar aqui, mas e claro dando os créditos ao merecido blog. O menu se chama "Menu Color" caso queiram dar uma olhadinha aqui esta Preview.

Vá ate seu HTML e procure pela tag ]]></b:skin>, assim que achar cole esse próximo código acima dele:

.menu{text-align: center; text-decoration: none;} 
a.verde{padding: 5px 5px 5px 5px; display: inline-block; background:#8BBF6D; margin-top: 5px; font-size: 13px; color: #ffffff; font-family: georgia; font-style: italic; -webkit-transition: all 0.6s ease-out; -moz-transition: all 0.6s ease-out;} 
a.verde:hover{opacity: 0.5;} 
a.rosa{padding: 5px 5px 5px 5px; display: inline-block; background:#EE97B7; margin-top: 5px; font-size: 13px; color: #ffffff; font-family: georgia; font-style: italic; -webkit-transition: all 0.6s ease-out; -moz-transition: all 0.6s ease-out;} 
a.rosa:hover{opacity: 0.5;} 
a.amarelo{padding: 5px 5px 5px 5px; display: inline-block; background:#F4EF74; margin-top: 5px; font-size: 13px; color: #ffffff; font-family: georgia; font-style: italic; -webkit-transition: all 0.6s ease-out; -moz-transition: all 0.6s ease-out;} 
a.amarelo:hover{opacity: 0.5;} 
a.azul{padding: 5px 5px 5px 5px; display: inline-block; background:#ABC9D6; margin-top: 5px; font-size: 13px; color: #ffffff; font-family: georgia; font-style: italic; -webkit-transition: all 0.6s ease-out; -moz-transition: all 0.6s ease-out;} 
a.azul:hover{opacity: 0.5;} 
a.laranja{padding: 5px 5px 5px 5px; display: inline-block; background:#FF8A2C; margin-top: 5px; font-size: 13px; color: #ffffff; font-family: georgia; font-style: italic; -webkit-transition: all 0.6s ease-out; -moz-transition: all 0.6s ease-out;}
a.laranja:hover{opacity: 0.5;}

Visualize para ver se não deu erro, se estiver tudo ok salve. Agora vá em layout e crie uma Gadget HTML/JAVASCRIPT e cole:
<div class="menu"> 
 <a class="verde" href="URL">Nome</a> 
 <a class="rosa" href="URL">Nome</a> 
 <a class="amarelo" href="URL">Nome</a> 
 <a class="azul" href="URL">Nome</a> 
<a class="laranja" href="URL">Nome</a> 
 </div>


Onde esta "URL" coloque o link da pagina que desejar, e em "Nome" você já sabe né? rsrs Bom e isso, espero que tenham gostado! Beijocas e ate mais.

4 comentários:

  1. Achei super fofo esse menu.. simples mas bem fofo >.<
    Beijos!!

    ResponderExcluir
  2. Meu muito cute!! ;3
    Você poderia ensinar a fazer esse quadro de noticias q tem no cabeçalho?Eu acho muito fofo, e queria aprender...
    Beijokass
    Fer --->retardadasdanet.blogspot.com

    ResponderExcluir
    Respostas
    1. Hayooo claro mostro sim como fazer *-*

      Excluir

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram