Olá meus nekos!
Hoje e troxe um tutorial, de um menu, o menu que eu uso no blog, se chama Menu Hover Lateral, aprendi no blog Vodka & Coca, então, créditos à ele!
O menu é este:
Vá em modelo >> editar HTML >> procure por: ]]></b:skin>
Cole acima dele este código:
.menuhoverlateral {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-left: 5px solid #ff5c5c; /*Borda de lado*/
font-size: 8pt;
font-family: verdana, Lucida Sans Unicode;
line-height: 15px;
border-bottom : 1px dashed #666666; /*Borda de baixo*/
text-indent : 5px;
vertical-align : middle;
background: #f5f5f5; /*Cor de fundo*/
padding-left : 10px;
padding-bottom : 2px;
-webkit-transition: 0s linear;
-webkit-transition: all 0.5s linear;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.menuhoverlateral:hover {
border-left: 25px solid #ff5c5c; /* Borda de lado em hover*/
font-size: 8pt;
font-family: verdana, Lucida Sans Unicode;
border-bottom : 1px solid #666666; /*borda de baixo em hover*/
line-height: 15px;
text-indent : 5px;
background : #ffffff; /*fundo em hover*/
padding-left : 10px;
padding-bottom : 5px;
}
Sbititua as cores usando a tabela de cores e salve.
Agora adicione um gadget HTML/JavaScripte cole nele:
<div class="menuhoverlateral"><a href="URL DA PÁGINA">NOME DA PÁGINA</a></div>
<div class="menuhoverlateral"><a href="URL DA PÁGINA"> NOME DA PÁGINA</a></div>
<div class="menuhoverlateral"><a href="URL DA PÁGINA">NOME DA PÁGINA</a></div>
<div class="menuhoverlateral"><a href="URL DA PÁGINA"> NOME DA PAGINA</a></div>
Faça as alterações e salve!
Até mais!
Este estilo de menu é muito kawaii e tem sido bastante usado. Já vi vários blogs com ele, mas nunca tinha procurado o tutorial >.< arigatou pelo post, talvez eu use em meu próximo lay :-p
ResponderExcluirMaria-chan, gostei muito seu blog, é tão kawaii ^_^ não tinha como não virar seguidora! Kissus ;->
www.shoujoeafins.blogspot.com
Este estilo de menu é lindo mesmo!
ExcluirQue bom que gostou do meu blog!
Fico muito agradecida!
Vou visitar seu blog!