2 de out de 2012

Menu Vibrante

Oi pessoal! Achei um tutorial muito legal no Tumblr Sweet Help! É um menu vibrante. Veja o menu deles aqui. Só pra lembrar, não fui eu quem fiz!! Apenas converti para blogger. Já testei e dá certo se fizer tudo certinho. Mudei também as imagens do menu pra não ficar tudo igual. 

1- Vá no HTML do seu blog, aperte CTRL+F e procure por:

</head>

Acima disso, cole:

<script type='text/javascript' src='http://static.tumblr.com/pbo3dwp/NqZm4a1bc/byforgettingthelove.js'></script>
<script type='text/javascript' src='http://static.tumblr.com/pbo3dwp/tEem4a19e/naocopie_.js'></script>
<script type='text/javascript' src='http://static.tumblr.com/pbo3dwp/ck8m4a176/forgettingthelove.js'></script>

2- Agora procure por:

/b:skin

Acima disso, cole:


.menu a{display:inline-block;text-decoration:none;list-style:none;color: #FFF;}
.menu ul{display:inline-block;margin:0px 0 0 0;padding:0px 0px 0px 0px;list-style:none;line-height:normal}
.menu li{display:inline-block;float:left;margin:0px 0px 0px 1px;margin-left:-12px;}
.menu a{display:inline-block;width:auto;height:28px;padding:8px 20px 0px 20px;background:; }
3- Agora procure por:

</header>

Acima disso, cole:

<div style='display:inline-block;'>
<div class='menu' id='menu6'>
<ul id='main'>
<li class='page_item current_page_item'>
<a href='OLINK'><img src='http://i.imgur.com/ddRiS.png'></a></li>
<li class='page_item current_page_item'>
<a href='OLINK'><img src='http://i.imgur.com/NK302.png'></a></li>

<li class='page_item current_page_item'>
<a href='OLINK'><img src='http://i.imgur.com/0sC6B.png'></a></li>

<li class='page_item current_page_item'>
<a href='OLINK'><img src='http://i.imgur.com/Xvxxn.png'></a></li>

</ul></div></div>

A imagem que vocês podem usar como base: 

Preview do menu: 
Veja clicando aqui

Talvez seja preciso subir o banner, para isso use o tutorial: retirando espaço entre banner e postagens. E acrescente no último passo: margin-top:50px;


2 comentários:

  1. Amei muito, vou usar no próximo layout :3333
    Beijos!
    CherryCupcaskull.blogspot.com

    ResponderExcluir

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!