Como colocar menu slide

Alguns usuários vem pedindo para que eu poste um tutorial de “menu slide”. Aquele menu que fica “escondido”, ai quando você clica na palavra, ou imagem, ele aparece.  (exemplo de menu slide). Neste tutorial ensinarei como fazer um =)

A primeira coisa a fazer antes de editar qualquer coisa no theme, é salvar uma cópia do código do seu theme, para caso der algo errado na hora de salvar, você possa voltar seu theme ao normal.

Após isso, procure por </head> no código do seu theme, e cole isso antes dele:

<script type="text/javascript" src="http://static.tumblr.com/3ikgvxs/0TGl4zgpu/jquery.min.js"></script>
<script type="text/javascript" src="http://blogonthenet.xpg.com.br/ttricks/menuslide.js"></script>
<style type="text/css">
#menu {margin:0px; padding:0px; width:180px;}
.nome_menu {padding-top:5px; padding-bottom:5px; cursor:pointer; position:relative; margin:1px; text-align:center;}
.itens_menu {padding:10px; text-align:left; color: #fff; display:none;}
.itens_menu a {text-decoration: none; display:block; color: #000;}
</style>

Você pode substituir o texto em negrito (#000) por um outro código de cor, este é o código da cor dos itens do menu. Para ver códigos de cores para usar, veja este link: http://tumbletricks.tumblr.com/cores

Depois, procure onde no seu theme você quer que o menu apareça (pode ser na Description), e cole o seguinte código:

<div id="menu">
<p class="nome_menu">Clique para ver o menu</p>
<div class="itens_menu">
<center>
<a href="URL DO LINK">NOME DO LINK</a>
<a href="URL DO LINK">NOME DO LINK</a>
<a href="URL DO LINK">NOME DO LINK</a>
</center>
</div></div>

Depois, basta substituir o nome do menu, os endereços e os nomes dos links. Se quiser, você pode acrescentar mais links, basta seguir o mesmo padrão =)

O nome do menu também pode ser uma imagem, para fazer isso, basta substuir o texto do nome por um código de imagem.

Espero que tenham gostado :D