Tutorial: Menu com Gifs (Cute Menu)

Oi, vim trazer hoje um tutorial, à pedido de uma leitora, como instalar um menu com gifs. Ficará mais ou menos assim:

Vamos ao tutorial!

(Para continuar, clique em "Leia Mais")

Vá em Modelo > Editar HTML

Procure usando CTRL + F ou pressione F3, por:

]]></b:skin>

E acima dessa tag cole o seguinte código:

/* Cute Menu----------------------------------------------- */
#menuextra {
display : block;
font-size: 11px;
font-family: Tahoma;
letter-spacing : 0;
border-bottom : 1px dashed #CDB7B5;
background-repeat : no-repeat;
text-indent : 5px;
vertical-align : middle;
text-decoration : none;
line-height : 15px;
margin-bottom : 1px;
background : url('URL DO MINI GIF 1') no-repeat left;
padding-left : 10px;
}

 #menuextra:hover {
display : block;
text-decoration : none;
vertical-align : middle;
line-height : 15px;
border-bottom : 1px dashed #FF69B4;
background : url('URL DO MINI GIF 2') no-repeat left;
padding-left : 10px;
}

Personalização:

Aonde está URL DO MINI GIF 1 você coloca a URL do seu mini gif, caso você queira colocar gifs diferentes à cada linha não preencha.

Aonde está URL DO MINI GIF 2 você coloca a URL do mini gif que irá aparecer quando passar o mouse, caso você queira colocar gifs diferentes à cada linha não preencha.

Aonde está #CDB7B5 você pode mudar a cor da linha inferior tracejada.

Aonde está #FF69B4 você pode mudar a cor da linha inferior tracejada quando passa o mouse.

Quando terminar, salve as alterações!

Para instalar o menu:

No HTML, seja postagem ou widget, coloque o seguinte código:

<div id="menuextra"><a href="Link">Nome do link</a></div><div id="menuextra"><a href="Link">Nome do link</a></div>

Ou, caso você queira um gif diferente a cada linha, use o seguinte código:

<div id="menuextra"><a href="Link"><img src="URL do mini gif"/> Nome do link</a></div><div id="menuextra"><a href="Link">Nome do link</a></div>

E, se você quiser dividir os links em 2 colunas, assim como o meu menu de Tags:

<div style="float: left; width: 45%">Escreva aqui o Texto da Coluna da Esquerda</div>
<div style="float: right; width: 45%">Escreva aqui o Texto da Coluna da Direita</div>
<div style="clear: both"></div>

É isso! Qualquer dúvida é só falar! Até mais :)