Efeito JQuery no blog terça-feira, 26 de julho de 2011 Lipe_Uchiha

Eae Galera hoje vou estar ensinando como colocar Menu Vertical Efeito JQuery......Let's Go!!!
1º vamos inserir o código abiaxo (CSS) acima de  ]]></b:skin>

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/AVvXsEgsObiEGPyImMVHQwhywE2tQU_5nUBVgj-aAWhf4qpjoh6bAxU2JEVMZvQ9Pd3hyXbxF0X5flqhj1ObTgdFtIIaH025XaAKKCXEWDpuCpVPfpexvgsCTvwwS_ENp4ZwmiSqs6JKVa5lWcI/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ºcopie o script abixo e cole antes da tag </head>


<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º cole o código HTML abixo de </body>

<ul id='menusisi'>
<li class='home'><a href='http://designblackx.blogspot.com/' title='Home'/></li>
<li class='twitter'><a href='twitter.com/Seu Twitter' title='Twitter'/></li>
<li class='comentários'><a href='http://designblackx.blogspot.com/feeds/comments/full' title='Comentários'/></li>
<li class='contato'><a href='Seu Endereço de Email' title='Contato'/></li>
</ul>

Ta ai galera espero que gostem....

Flws!!!