Menu Deslizante

Hello meus doces! Tenho certeza que muita gente vai gostar do tutorial de hoje. Vou ensinar a fazer aquele "menu" deslizante que tem na sidebar aqui do blog, que na verdade não é um menu, porque ele não leva a nenhum link, mas eu não achei uma palavra melhor para descrever. Veja uma demonstração do efeito na sidebar deste blog.
Vamos começar? 

 
Então, abra o HTML do seu blog, e cole o código a seguir abaixo da tag 

<!--- MENU DESLIZANTE -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script src='http://static.tumblr.com/ghoye6x/xBmloszst/colpaso.js' type='text/javascript'>
</script>
<script type='text/javascript'>
animatedcollapse.addDiv('jason', 'fade=1,height=80px')
animatedcollapse.addDiv('kelly', 'fade=1,height=100px')
animatedcollapse.addDiv('michael', 'fade=1,height=120px')
animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets')
animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets,persist=1,hide=1')
animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=pets,hide=1')
animatedcollapse.addDiv('lion', 'fade=0,speed=400,group=pets,persist=1,hide=1')
animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted //$: Access to jQuery //divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID //state: "block" or "none", depending on state
}
animatedcollapse.init()
</script>

Salve as alterações. Agora clique em "Layout" no meu lateral do blogger. Adicione um gadget de HTML/Javascript no lugar onde você quiser que o "menu" apareça e cole o código abaixo, modificando os títulos e o conteúdo de cada link.

<center><a href="#" rel="toggle[rabbit]" data-openimage="collapse.jpg" data-closedimage="expand.jpg">Título 1</a> |
<a href="#" rel="toggle[dog]" data-openimage="collapse.jpg" data-closedimage="expand.jpg">Título 2</a> | 

<a href="#" rel="toggle[cat]" data-openimage="collapse.jpg" data-closedimage="expand.jpg">Título 3</a></center>

<div id="rabbit" style="display:none">
Conteúdo do menu deslizante 1
</div>
<div id="dog" style="display:none">
Conteúdo do menu deslizante 2
</div>
<div id="cat" style="display:none">
Conteúdo do menu deslizante 3
</div>

  Prontinho! Gostaram? Se sim, comentem, e não esqueça de colocar os créditos se usar, ok?
Ah gente, desculpa estar meio ausente e não responder os comentários... Realmente não deu =(
Já ia esquecendo de avisar: Tem um wallpaper da Katy Perry para vocês baixarem lá na fanpage do blog no facebook. De vez em quando vou postar wallpapers pra vocês lá. Para ver, clique aqui.
Kissus!