13 de out de 2012

Tutorial : Menu Zoom

 
Oieh gente hoje vou ensinar á fazer o menu zoom igual o do blog veja:
 Aprendi no blog Brilho dos Olhos então créditos dado




1- Vá até Modelo -> Editar HTML e procure por:
]]></b:skin>

 2- Acima,cole:
/*---Início do Menu Zoom by My Fantasy---*/
menumf {
font-family: century gothic; /* Fonte do Menu */
width: 17%; /* Tamanho do Menu */
float: left;
background:#FF82AB; /* Cor do fundo do Menu */
padding: 5px;
text-align: center;
margin: 2px;
-webkit-border-radius: 0px 0px 0px 0px; /* Pontinhas da Borda */
-webkit-transition-duration: .80s; /* Duração do Efeito - não modifique se quiser o efeito igual ao meu */
font-size: 08pt; /* Tamanho da fonte */
color: #fff; /* Cor da fonte */
}
menumf:hover {
font-family: century gothic; /* Fonte do Menu */
-webkit-transform: scale(1.8) rotate(-10deg); -moz-transform: scale(1.8) rotate(-10deg);
-o-transform: scale(1.8) rotate(-10deg); -ms-transform: scale(1.8) rotate(-10deg); transform: scale(1.8) rotate(-10deg);
font-family: tahoma; /* Fonte do Menu quando passa o mouse */
width: 17%; /* Tamanho do Menu quando passa o mouse */
float: left;
background:#9C9C9C; /* Cor do fundo do Menu quando passa o mouse */
padding: 5px;
text-align: center;
margin: 2px;
-webkit-border-radius: 9px 9px 9px 9px; /* Pontinhas da Borda */
-webkit-transition-duration: .80s; /* Duração do Efeito - não modifique se quiser o efeito igual ao meu */
font-size: 08pt; /* Tamanho da fonte do Menu quando passa o mouse */
color: #fff; /* Cor da fonte do Menu quando passa o mouse */
}
/*---Fim do Menu com Zoom by My Fantasy---*/

3- Faça suas modificações.
4- Vá até Layout -> Adicionar um Gaget -> HTML/Javascript e cole:
<a href="linkaqui"><menumf>títuloaqui</menumf></a>

 5- Salve e está pronto :3

Nenhum comentário:

Postar um comentário

Related Posts Plugin for WordPress, Blogger...