29/10/2012

Tutorial: Menu Lovely

||
Yo pessoal, trago o tutu do dia esse tutorial eu peguei do blog Sweet Poison  então todos os creditos vão para ela okay? Demostração.

 Bem em seu HMTL procure por ]]></b:skin> agora acima dele cole o proximo codigo:

.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;
}

Agora vá para seu layout e crie um gadget de  HTML Javascripte dentro dele coloque

<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>


Agora e só colocar os links e o nome do que desejar.

Nenhum comentário:

Postar um comentário

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