Hide menu com imagem


Mais um tutorial para vocês e dessa vez é de como colocar um menu deslizante! (para ver como fica clique aqui ou aqui.

Primeiro vá em Modelo > Editar html. Aperte Ctrl+F ou Command+F (Mac) e procure por </head>.  Agora coloque o código abaixo ACIMA de </head>
<script type="text/javascript" src="http://static.tumblr.com/3ikgvxs/0TGl4zgpu/jquery.min.js"></script><script type="text/javascript">$(document).ready(function(){$(".l-corpo").hide();$(".l-top").click(function(){$(this).next(".l-corpo").slideToggle('fast');}); }); </script>


                                        Agora coloque o código abaixo ACIMA de ]]></b:skin>


.lista { margin:0px; padding:0px; width:130px; /*largura*/ }.l-top { cursor:pointer; position:relative; text-align:center; }.l-corpo { padding:10px; text-align:left; color: #e86c81; /*cor da fonte quando não tem link*/ font-family:Sofia; font-size:13px; display:none; }.l-corpo a{ color: #000000; /*cor da fonte link*/ text-decoration:Italic; }.l-corpo a:hover{ color: #e86c81; /*cor da fonte ao passar o mouse sobre o link*/ text-decoration:none; }


Feito isso salve!

 No local que você deseja que o menu apareça o menu (postagem, sidebar, etc) é só adicionar o seguinte código:

<div class="lista"><img src="www.LINKDASUAIMAGEM" class="l-top"><div class="l-corpo"><center><a href="www.SEULINKAQUI.com">Link</a><br /><a href="www.SEULINKAQUI.com">Link</a><br /><a href="www.SEULINKAQUI.com">Link</a><br /><a href="www.SEULINKAQUI.com">Link</a></center></div></div>


No lugar de "Link" você coloca o título/nome do lugar para onde você vai ser redirecionado (ex.Twitter) e no lugar de "www.SEULINKAQUI.com"você coloca o link direto da página do site. Espero que tenham sido útil.

Créditos: Os links foram pegos no blog da Jackie Zanini (esse). O segundo código foi editado por mim (as cores, fonte, tamanho da fonte etc.)

Algumas imagens que podem ser usadas (se reblogar credite!)

By: Suzy do Cor Seletiva Blog

By: Giulia Azevedo
By: Jackie Zanini






                                         *****************************************

0 leitores soltaram o verbo:

Postar um comentário

Leia, é importante!

- Todos os comentários serão lidos e quando possível, respondidos;
- Comentários com apenas "Oi, segue o meu blog?" não serão publicados;
- No final do comentário deixe o link do seu site ou blog para que eu possa retribuir a visita;
- Encomendas e pedidos deverão ser feitos na Ask (menu).

Obrigada por comentar e volte sempre!