Menu Vertical Cute


|

Esse menu super lindo que eu vi no Trechy Teen e tem até aqui no meu blog é muito fofo e fácil de fazer! Quer colocar um menu desses no seu blog? Leia o tutorial!
Vá em Design > Editar Html no seu blog. Lá, aperte CTRL+ F e procure na barrinha por:
]]></b:skin>
Achou? Agora vamos ao código do menu. Aconselho que você cole no Word ou no Bloco de Notas para editar.
/* Menu Vertical Cute----------------------------------------------- */#menuextra {display : block;font-size: 11px/*tamanho da fonte*/font-family: Tahoma/*fonte*/letter-spacing : 0;border-bottom : 1px /*largura da linha*/ dashed /*formato da linha (dashed é a linha picotada, você pode trocar por solid se quiser reta)*/#CDB7B5/* aqui você pode mudar a cor da linha*/;background-repeat : no-repeat;text-indent : 5px;vertical-align : middle;text-decoration : none;line-height : 15px;margin-bottom : 1px;background : url('aqui a url da imagem 1') no-repeat left;padding-left : 10px;}#menuextra:hover { /*essa parte corresponde a quando se passa o mouse sobre os links*/display : block;text-decoration : none;vertical-align : middle;line-height : 15px;border-bottom : 1px /*largura da linha*/ dashed /*formato da linha (dashed é a linha picotada, você pode trocar por solid se quiser reta)*/#FF69B4/* aqui você pode mudar a cor da linha*/;background : url('aqui a url da imagem 2') no-repeat left;padding-left : 10px;}
As partes destacadas em vermelho são as editáveis. Mas tenha cuidado, não mude nada além delas, porque poderá deformar o menuzinho! No código mesmo estão as instruções de como editar, e como ele é grande, é melhor editar em algum lugar antes de colar no seu blog, como eu já disse. Ah, as imagens tem de ser pequenas para caberem numa linha. Aqui no site Evelyn's Place tem um monte desses gifs.

 Pronto, terminou? Salve!
Agora vamos pôr o menu onde quiser no blog. É a parte mais fácil.
Vá em Design > Adicionar um Gadget, no lugar que quiser. Lá, procure por HTML/Java Script e cole o código:
<div id="menuextra"><a href="coloque aqui o link>Nome do link</a></div>
Como explicado no código, personalize. Lembrando que cada tag dessa corresponde a apenas uma linha! Se quiser mais links vá adicionando abaixo dele a quantidade desejada.
Pronto! Ficou do jeito que queria? Creio que sim!
Se não me chama por comment que já tô aí!
Espero que tenham gostado do tuto! Comentem!

Um comentário:

Naiara :) disse...

Adorei o seu blog , já estou seguindo !!!!!

Já ia me esquecendo , eu queria saber se você aceita parcerias ....

http://lovefofis.blogspot.com/