Bom apesar de ninguém ter pedido esse tutorial, eu vim trazer ele aqui porque eu amo ele e acho muito meigo^^so, let's get stared..
Bom se ve ainda não viu como ele
Então ai está um exemplo do menu normal/hover. Agoora que você já sabe como é vamos começar o tutorial …
Entre em Modelo>>Editar HTML e procure por
]]></b:skin>
e cole acima este código>>
/* Menu Deslizante*/#menudrs {
float: left;
display: line;
margin:1px;
background: #FFFFFF; /* COR DO FUNDO*/
color: #000000; /* COR DA FONTE*/
width: 240px; /*LARGURA DO MENU*/
height: 18px; /* ALTURA DO MENU*/
text-align:center;
text-decoration: yes;
font-family: georgia !important;/* FONTE DO MENU*/
font-size: 13px; /* TAMANHO DA FONTE*/
-moz-border-radius:0px 0;
-webkit-border-radius:0px 0;
-webkit-transition: color 0.4s ease-out;-moz-transition:
color 0.6s ease-out;transition: color 0.6s ease-out;
}
#menuqr:hover {
background: #000000; /* COR DE FUNDO QUANDO PASSA O MOUSE*/
color: #FFFFFF; /* COR DA FONTE*/
width: 200px; /*LARGURA QUANDO PASSA O MOUSE*/
height: 18px;/* ALTURA (deixe igual a do normal)*/
text-decoration: yes;
font-family: georgia !important; /*FONTE- se quiser pode mudar*/
letter-spacing: 2px;
-moz-border-radius: 0px 10px 10px 0px;
-webkit-border-radius: 0px 10px 10px 0px;
border-radius: 0px 10px 10px 0px;
}
Bom agora você tem que apenas abrir o Layout>>Adicionar um Gadget>> HTMLJavaScript e colar o seguinte código
<a href="LINK"id="menudrs">Nome do Link</a>
E fim…
Mentira ainda não acabou
a:hover {
e logo embaixo vai ver um código igual a esse
text-decoration:underline;apague e cole este
text-decoration:none;ou simplesmente so apague underline e troque por none… Mas tem uma coisa que eu não contei
Bom acho que é isso …..
BEIJOS

Teste
ResponderExcluir