3 Estilos de Menu

Tutorial por Garota no mundo HTML

Veja como ficou Aqui

Como todo mundo já está acostumado e sabem, vão até o modelo editar Html e procure por:

]]></b:skin>

Depois de achar cole este seguinte código acima dele:

/* Menu  Heart  Cute By Roh Chan */

.menuheart {

background-image: url(http://static.tumblr.com/koam7dd/YB6mejejb/menu_1.png) ;

display: block;

float: left;

padding:0px;

margin:0px;

-webkit-transition-duration: .90s;

height:40px;

width:56px;

-webkit-border-radius: 8px; 

-moz-border-radius: 8px; 

border-radius: 8px;

}

.menuheart:hover {

-webkit-border-radius: 380px; 

-moz-border-radius: 380px; 

border-radius: 380px;

background-image: url(http://static.tumblr.com/koam7dd/vtPmejekk/menu_hover_2.png);

-webkit-transition-duration: .90s;

}

/*Fim do Menu*/

Salve e vá até Layout, adicione um java script e dentro cole este código:

<a href="http://testesgarotanomundohtml.blogspot.com.br/"><div class="menuheart"></div></a>

<a href="http://testesgarotanomundohtml.blogspot.com.br/"><div class="menuheart"></div></a>

<a href="http://testesgarotanomundohtml.blogspot.com.br/"><div class="menuheart"></div></a>

<a href="http://testesgarotanomundohtml.blogspot.com.br/"><div class="menuheart"></div></a>

<a href="http://testesgarotanomundohtml.blogspot.com.br/"><div class="menuheart"></div></a>