Menu lateral deslizante

1. Procure por ]]></b:skin> e acima desse código, cole:

ul#menusisi {position:fixed;margin:0;padding:0;top:30px;left:0;list-style:none;z-index:9999;}ul#menusisi li {width:190px;}ul#menusisi li a {display:block;margin-left:-10px;width:110px;height:55px;background-color:#ded8d8; /* Cor de fundo do botão */ background-repeat:no-repeat;background-position:48px center;border:1px solid #ded8d8; /* Cor da borda do botão*/ -moz-border-radius:0px 5px 5px 0px;-webkit-border-bottom-right-radius: 5px;-webkit-border-top-right-radius: 5px;-khtml-border-bottom-right-radius: 5px;-khtml-border-top-right-radius: 5px;/*-moz-box-shadow: 0px 4px 3px #000;-webkit-box-shadow: 0px 4px 3px #000;*/opacity:0.7;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);}ul#menusisi .home a {background-image:url(http://i1234.photobucket.com/albums/ff411/SweetLG/menu.png);}ul#menusisi .pagina1 a {background-image:url(http://i1234.photobucket.com/albums/ff411/SweetLG/menu.png);}ul#menusisi .pagina2 a {background-image:url(http://i1234.photobucket.com/albums/ff411/SweetLG/menu.png);}ul#menusisi .pagina3 a {background-image:url(http://i1234.photobucket.com/albums/ff411/SweetLG/menu.png);}ul#menusisi .pagina4 a {background-image:url(http://i1234.photobucket.com/albums/ff411/SweetLG/menu.png);}ul#menusisi .pagina5 a {background-image:url(http://i1234.photobucket.com/albums/ff411/SweetLG/menu.png);}

Entenda o código:

position:fixed; - Troque o fixed por absolute se quiser que o menu não role junto com a página.

Atenção: Visualize e veja se deu tudo certo. Um código de erro apareceu? Coloque OUTRO </script> abaixo do último. 3. Salve. Mas como usar o menu? Adicione um gadget de HTML/Javascript lá ná área de editar HTML e cole:

width:110px; - O menu cortou sua imagem? Aumente esse número para ter uma maior largura.

background-image:url(http://i1234.photobucket.com/albums/ff411/SweetLG/menu.png); - Mude para o link da SUA imagem :3

2. Agora procure por </head> e acima do código cole: 

<script src="http://www.google.com/jsapi"><script>google.load(&quot;jquery&quot;, &quot;1.3.2&quot;);</script><script type="text/javascript">$(function() {$(&#39;#menusisi a&#39;).stop().animate({&#39;marginLeft&#39;:&#39;-50px&#39;},1000);$(&#39;#menusisi &gt; li&#39;).hover(function () {$(&#39;a&#39;,$(this)).stop().animate({&#39;marginLeft&#39;:&#39;-2px&#39;},200);},function () {$(&#39;a&#39;,$(this)).stop().animate({&#39;marginLeft&#39;:&#39;-50px&#39;},200);});});</script>

<ul id='menusisi'>
<li class='home'><a href='link do seu blog' title='Home'/></li>
<li class='pagina1'><a href='link da pagina' title='Titulo'/></li>
<li class='pagina2'><a href='link da pagina' title='Titulo'/></li>
<li class='pagina3'><a href='link da pagina' title='Titulo'/></li>
<li class='pagina4'><a href='link da pagina' title='Titulo'/></li>
<li class='pagina5'><a href='link da pagina' title='Titulo'/></li>
</ul>

Mude apenas o link da página e o título.

Creditos: http://www.garotas-cupcakes.com/2012/07/tutorial-menu-lateral-deslizante.html