3 de ago. de 2011

Cute Menu

Hoje o post saiu cedo! Estava pensando em fazer um tutorial para vocês e como várias pessoas elogiaram o jeito como coloquei os links da página de arquivo e de parceiros, vim lhes ensinar como fazer esse tipo de menu.
     O Cute Menu é aquela lista de links que fica com um gif e quando você passa o mouse aparece outro, fica muito legal, pois deixa seu blog super bonito.
     Para utilizar ele você vai em Design no painel do Blogger e depois em Editar HTML, aperte Ctrl+F e procure por ]]></b:skin>
     Depois que encontrar cole esse código logo acima:
/* Cute Menu
----------------------------------------------- */
#menuextra {
display : block;
font-size: 13px;
font-family: tahoma;
letter-spacing : 0;
border-bottom : 1px dashed #FFFFFF;
background-repeat : no-repeat;
text-indent : 5px;
vertical-align : middle;
text-decoration : none;
line-height : 15px;
margin-bottom : 1px;
background : url ('URL DO GIF SEM O MOUSE POR CIMA') no-repeat left;
padding-left : 10px;
}


#menuextra:hover {
display : block;
text-decoration : none;
vertical-align : middle;
line-height : 15px;
border-bottom : 1px dashed #FFC0CB;
background : url ('URL DO GIF QUANDO O MOUSE ESTIVER EM CIMA') no-repeat left;
padding-left : 10px;
}

     Seu HTML tem que ficar igual a imagem:

     Então vamos para as alterações que precisam ser feitas:
     Onde estiver font-size você pode mudar o tamanho da letra aumentando ou diminuindo o número que está  lá, eu acho que 13 do jeito que está fica bom, mas você quem sabe.
     Eu uso a fonte tahoma mas você pode mudar a fonte do seu menu trocando de tahoma pra qualquer outra ao lado de onde estiver font-family.
     Onde estiver #FFFFFF você muda para a cor que quiser que seja a linha que ficará em baixo do link sem o mouse estar por cima e onde estiver #FFC0CB muda para a cor que essa linha ficará quando o mouse estiver por cima.
     Também tem que colocar o url dos gifs onde está indicado. Você pode encontrar mini gifs legais nesses sites:
Evelyns Place
Place Fame Extras
Trechy Teen

     Agora acabamos a parte dos códigos e vou ensiná-los como utilizar esse tipo de menu:
     Para utilizar o menu você só tem abrir o gadget ou a postagem onde você quer utilizá-lo e colar o seguinte código:

<div id="menuextra"><a href="http://www.blogger.com/Link">Nome do link</a></div>

     Você repete o código quantas vezes precisar e substitui http://www.blogger.com/Link e Nome do link pelo url e pelo nome do link que você for colocar.
     Vai ficar assim, aí você substitui o nome do link e a url:


Qualquer dúvida pode colocar nos comentários que eu te respondo.

10 comentários:

camila disse...

Oi! Adorei o tutorial cute menu!!! Já mandei a imagem pra você, bjs

www.rosachiclete-s2.blogspot.com

leandroaleixo disse...

Boa dica;;..realmente ficou ,muito show..lindao!

Emily Caroline disse...

Adoooorei beijos

camila disse...

Eu vi rafa! Ficou muito bom!!! Obrigada, vou colocar nos próximos posts! Amei! Obrigada também pelo comentário! Isso me deixou muito feliz! Não vou desistir nunca, gosto muito de ser blogueira! Muita obrigada pela força! Eu também queria dizer que gosto muito do seu blog, porque seus post são diferentes de todos que já vi, sempre tem alguma curiosidade ou coisa legal! Muito sucesso Rafa! parabéns pelo seu blog! Bjs!

www.rosachiclete-s2.blogspot.com

Any Brasil disse...

adorei
trendluxo.blogspot.com

Emily Caroline disse...

Eu aprendi a páginação no menina nerd, dá uma olhada lá bjs

Laryssa Holanda disse...

adorei o post ^^
bjs ; http://sweetgirl-blog.blogspot.com/

Bruna Teixeira disse...

Olá retribuindo a visitinha
e obrigada por me seguir de volta
bjos

brunaporelamesma.blogspot.com

Anônimo disse...

Ola foi ameiii seu blog muiot bom e amo este tutorial aqui rsrs to seguindo flor você retribui? blognew-girl.blogspot.com bom flor vi no seu faq sobre parcerias e afiliados você aceita esses dois comigo (claro ne se vc quiser) a caso vc quiser aceitar eu tenho 161 seguidor ta bjs Jhessyca (;

Anônimo disse...
Este comentário foi removido pelo autor.

Postar um comentário

- Para evitar que seu comentário venha a ser excluído, leia a política de comentários do blog.
- Antes de fazer uma pergunta dê uma olhada na página de FAQ para ver se sua pergunta já não foi respondida lá.

Obrigada por comentar. Saber que minhas postagens são valorizadas por outras pessoas é o que me faz continuar com o blog