8. Menu lateral deslizante

Hello ｡◕‿◕｡

 

Então, como disse na postagem 7, vou postar um menu bem legal chamado: Menu Lateral deslizante se bem que já está no título do post e_e Eu pessoalmente gostei e já usei ele no primeiro template de quando meu blog se chamava: Kawaii Down. Bom, eu espero que vocês também gostem :) Pois eu também gostei ^3^

 

Vamos explicar a postagem, vi o tutorial do KW. Bom, o menu é na lateral do seu blog, na lateral direita, você passa o mouse por cima e ele desliza :) E não é só isso, ele fica maior, mas melhor que falar é mostrar, Leia mais para aprender e curtir a postagem.

Você pode botar no lugar dos corações qualquer foto ^3^

 

1. Acima de ]]></b:skin> 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(URLDAIMAGEMAQUI);
}
ul#menusisi .pagina1 a {
background-image:url(URLDAIMAGEMAQUI);
}
ul#menusisi .pagina2 a {
background-image:url(URLDAIMAGEMAQUI);
}
ul#menusisi .pagina3 a {
background-image:url(URLDAIMAGEMAQUI);
}
ul#menusisi .pagina4 a {
background-image:url(URLDAIMAGEMAQUI);
}
ul#menusisi .pagina5 a {
background-image:url(URLDAIMAGEMAQUI);
}

2. Agora procure por </head> e acima 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>

OBS: Se aparecer uma menssagem de erro coloque mais um </script> no final.

3. Para o menu aparecer cole no final em um Gadget: HTML/Javascript:

<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>