Menu Vertical fixo no Blog com efeitos JQuery

Olá leitores! Neste tutorial venho lhes mostrar um menu Vertical com efeito JQuery que é feito todo por código Css, esse menu fica fixo na lateral esquerda do blog e tem um efeito deslizante quando passamos o Mouse sobre o botão...

Para colocar esse menu, primeiro acesse o painel de edição do seu Blog, em seguida vá em Modelo>> depois em Editar HTML >> e clique em Prosseguir.

Agora vamos procurar um código então pra facilitar use a tecla de atalho Ctrl + F e procure por essa tag: ]]></b:skin>  

Depois de ter localizado o Tag, copie esse código CSS e cole CIMA do Tag que você localizou. 

ul#menusisi { 
position:fixed; 
margin:0; 
padding:0; 
top:50px; 
left:0; 
list-style:none; 
z-index:9999; 
} 
ul#menusisi li { 
width:100px; 
} 
ul#menusisi li a { 
display:block; 
margin-left:-50px; 
width:100px; 
height:55px; 
background-color:#141414;  /* Cor de fundo do botão */ background-repeat:no-repeat; 
background-position:48px center; 
border:1px solid #cfcfcf;  /* Cor da borda do botão*/ 
-moz-border-radius:0px 10px 10px 0px; 
-webkit-border-bottom-right-radius: 10px; 
-webkit-border-top-right-radius: 10px; 
-khtml-border-bottom-right-radius: 10px; 
-khtml-border-top-right-radius: 10px; 
/*-moz-box-shadow: 0px 4px 3px #000; 
-webkit-box-shadow: 0px 4px 3px #000; 
*/ 
opacity:0.8; 
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); 
} 
ul#menusisi .home a { 
background-image:url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaBfhOhI/AAAAAAAAD_0/nV3ITEV9d3M/d/nav_home.png); 
} 
ul#menusisi .twitter a { 
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM7ylGP__pufDxKMgpPqBGQA_fpTAD-_0N1Z_ZWnViesaBezAmcfEZuD-oMlHN6_p1K3oPukY3A4JofAraHF_8Xi8V24OlgJoKlT1Kdqb9U2__FoQR9sGyEPtNxZ7AvR1VQgTMKGIzcyg/s1600/1283728665_twitter_47.png); 
} 
ul#menusisi .comentários a { 
background-image:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaFyqDGI/AAAAAAAAD_w/pNO6TUSigBg/d/nav_comment.png); 
} 
ul#menusisi .rssfeed a { 
background-image:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaabJhzI/AAAAAAAAEAA/Oo4mhwCwzbI/d/nav_rss.png); 
} 
ul#menusisi .contato a { 
background-image:url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaVZkksI/AAAAAAAAD_8/g5fo6OKT5wE/d/nav_mail.png); 
}

 2° Vamos agora procurar outro código, então novamente utilize as teclas Ctrl + F e procure por esse Tag: </head>

 E antes desse tag acrescente esse Código Script:

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

 3° E por fim, procure por esse outro Tag: </body> e cole esse código a Antes dele:


<ul id='menusisi'> 
<li class='home'><a href='SEU-ENDEREÇO' title='Home'/></li> 
<li class='twitter'><a href='twitter.com/USARNAME' title='Twitter'/></li>
<li class='rssfeed'><a href='http://SEU_BLOG.blogspot.com/feeds/posts/default' title='RSS Feed'/></li> 
<li class='comentários'><a href='http://SEU_BLOG.blogspot.com/feeds/comments/full' title='Comentários'/></li> 
<li class='contato'><a href='mailto: SEU_EMAIL' title='Contato'/></li> 
</ul>

E nesse Terceiro código altere as informações destacadas em vermelho pelas do seu Blog, de acordo com o título de cada referido botão.

Agora clique em visualiza e depois salve.

Observações: Olá pessoal este código anteriormente estava com erros mais eu refiz o tutorial novamente e já está tudo organizado, o erro foi encontrado no 3 terceiro código... Obrigado.

Post Relacionados