Tutorial - Menu Simples


Boa noite, leitores!

Hoje, trouxe mais um tutorial para vocês. E sim, outro menu. Esse menu, eu uso no meu gadget das tags do blog, ou melhor "Meu Baú". Acho ele mais recomendado, em tags, como eu fiz, ou para colocar seu Tumblr, Twitter e Facebook. Mas vocês podem utilizar como quiserem.

Live Preview aqui.


1. Vá até Modelo > Editar HTML > Ctrl + F e procure por ]]></b:skin>. Acima disso que você achou, cole:


@font-face {font-family: "handy"; src: url('http://static.tumblr.com/lnvca6d/E6vm63ih7/pf_ronda_seven__1_.ttf');}.menusimples {float: center; font: 8px "handy", small fonts; color:#fff !important; text-align: center; text-transform: uppercase; background-color: #SUACOR1; padding: 3px; border-radius: 1px; text-shadow: 0 1px 0 #a0a0a0;margin-bottom: 5px; margin-top:5px; letter-spacing:0px; display: inline-block; width: auto; align: center; text-align: center; -webkit-transition-duration: .80s;}.menusimples:hover { background-color: #SUACOR2; -webkit-transition-duration: .80s;}

Em "#SUACOR1" coloque a cor que deseja quando não passa o mouse e em "#SUACOR2" coloque a cor que deseja ao passar o mouse(hover).

2. Agora, vá em Layout > Adicionar Gadget > HTML/JavaScript e cole:

<center><div class="menusimples"><a href="SEU LINK">Tumblr</a></div> + <div class="menusimples"><a href="SEU LINK">Twitter</a></div> + <div class="menusimples"><a href="SEU LINK">Facebook</a></div> </center>

 Entederam? Fácil né?

Talvez amanhã eu traga ilustrações para post. Beijos para todos e boa noite.

Nenhum comentário:

Postar um comentário