10 julho, 2012

Menu Lovely



Oiee amores, hoje vou ensinar a fazer um menu muito fofo, olha só como ele vai ficar :



Créditos da imagem e do tutorial > http://blog-sweetpoison.blogspot.com.br/

Tutorial:
Vá em design > Editar HTML > Aperte F3 e pesquise por :

]]></b:skin>

Acima de ]]></b:skin> cole o seguinte código :


.nav {
display:inline; /* Modo de exibição */
font-size: 25px; /* Tamanho da fonte */
border-bottom: 5px solid #4682B4; /* Estilo da borda inferior */
text-transform:uppercase; /* Formatação do texto */
-webkit-transition-duration: .20s; /* Efeito fade */
}
nav: hover {
border-bottom: 5px solid #63B8FF; /* Borda inferior em hover */
-webkit-transition-duration: .20s; /* Efeito fade */
}
nav a{
font-family: Arial; /* Fonte */
font-size: 25px; /* Tamanho da fonte */
text-transform:uppercase; /* Todas maiúsculas */
-webkit-transition-duration: .20s; /* Efeito fade */
text-decoration: none;
}
nav a:hover {
-webkit-transition-duration: .20s; /* Efeito fade */
text-decoration: none;
}

Edite de acordo com seu gosto.
Agora vá em design > Elementos da Página > Adicionar um Gadget > HTML / Java Script > E nela cole o seguinte código :

<div class='nav'><a href='LINK'>Nome</a></div> <div class='nav'><a href='LINK'>Nome</a></div> <div class='nav'><a href='LINK'>Nome</a></div> <div class='nav'><a href='LINK'>Nome</a></div> <div class='nav'><a href='LINK'>Nome</a></div> <div class='nav'><a href='LINK'>Nome</a></div>

Onde está LINK você substitui pelo url da página, e onde está Nome (Em frente a LINK) você substitui pelo nome da página. Salve e visualise se tiver dado tudo certinho.

Beijos amores ♥

4 comentários:

  1. Adoro esse menu,vou usar no próximo design do meu blog.

    beijos
    cherrycandy-viih.blogspot.com

    ResponderExcluir
  2. Acho lindo esse menu, já vi ele em vários blogs esse menu.
    http://magic--teens.blogspot.com.br/

    ResponderExcluir
  3. Nossa que lindo o menu adorei
    beijos amor :)
    wwwstartyley.blogspot.com

    ResponderExcluir
  4. Já tinha visto esse menu, é lindo. E é incrível como é só ter criatividade, né? É só uma barrinha solid colorida embaixo de cada palavra do meu e já fica perfeito :3
    Beijo, flor! Aqui tá lindo! Demetria diva \o/
    Just Debee

    ResponderExcluir