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 :)
Comente

6 comentários

  1. oie amei seu blog e o post
    participando aqui
    poderia participar do meu tmb ficaria muito feli **) http://sonhomeu17.blogspot.com.br/

    ResponderExcluir
  2. já conhecia esse tutu, hahaha
    beijos
    http://meninamuitobonita.blogspot.com.br/

    ResponderExcluir
  3. Obg por atender meu pedido :)amei o post

    ResponderExcluir
  4. @Cacau aww de nada, flor *-*
    Estou aqui para ajudar todos! ^^

    Bjs ;*

    ResponderExcluir

✧ Não esqueça de comentar, sua opinião aqui vale ouro.
✧ Mantenha o respeito com a autora e os comentaristas.
✧ Com sua conta do Google ou como Nome/URL fica mais fácil de se identificar, mas para isso você precisa habilitar os cookies no seu navegador, senão seu comentário ficará automaticamente anônimo.
✧ Marque a opção Receber notificação para receber sua resposta por e-mail! ♡ Obrigada pela visita e volte sempre! ♡

▸ Vídeo Mais Recente

louiserichelle_

Richelle Castro | Blog de beleza, autocuidado, moda e mais!