Kole galera da Design On Storm. Espero que estejam todos bem. Bom hoje eu vou trazer a vocês uma duvida que muitas pessoas tem, como fazer um menu houver. Sem mais delongas confiram o tutorial:
Primeiro passo: vá no seu painel do blogger.
Segundo passo: vá em modelo
Terceiro passo: vá em editar HTML.
Agora pesquise pela seguinte tag(para quem não sabe, para pesquisar use ctrl + f):
]]></b:skin>
Agora cole EM CIMA da TAG, o seguinte código:
/* Menu-D.O.F
----------------------------------------------- */
.menu-dos ul {
list-style: none;
margin: 6px 0px 0px 11px;
padding: 0;
border: none;
}
.menu-d.o.s li a {
width: 100px; * << Aqui coloque a largura da Imagem
height: 27px; * << Aqui coloque a Altura da Imagem
display: block;
padding: 2px 5px 5px 16px;
background: url(LINK DA SUA IMAGEM NORMAL AQUI!) no-repeat; /
color: #00000; *<<<Mude a cor dos links usando seus códigos
text-shadow: #fff1f2 0px 1px 2px; *<<<Mude a cor da sombra dos links e a sua distancia também
font-weight: normal;
text-decoration: none;
}
.menu-dos li a:hover {
background: url(URL DA SUA IMAGEM HOVER AQUI!)no-repeat;
color: #fffffff; /* Cor dos links no estado hover */
text-shadow: #000 0px 1px 2px; *<<<Mude a cor da sombra dos links e seu tamanho
Agora vem a parte mais fácil e só adicionar o código abaixo, em sua gadget de HTML/Javascript.
<div class="menu-d.o.s">
<ul><li><a href="LINK DE SUA IMAGEM AQUI!">NOME DO LINK EXEMPLO (''PAGINA INICIAL'') AQUI!</a></li></ul>
Não se esqueça do principal, edite onde tem os textos com a ordem de editação, como por exemplo URL DA SUA IMAGEM HOVER AQUI!.
Espero que tenham gostado do tutorial.
0 comentários:
Postar um comentário