Gadget Com Ícones Fixos Com Efeito JQuery

Como colocar um simpático  conjunto de ícones, em gadget fixo na lateral do blog, com efeito JQuery (deslizante), desenhado em CSS.
E esse truque muito bacana para atrair  e estimular os leitores a assinarem os feeds, acompanhar o blog em redes sociais, fazer contato, etc. Peguei os códigos, fiz umas adaptações e vou ensinar como instalar.
Vamos lá:
Copie todo o código CSS abaixo. Observe que você poderá alterar as cores de fundo e bordas do botão, se quiser, assim como substituir os ícones por outros modelos. No site FIND ICONS você encontra uma enorme variedade de ícones para tudo o que imaginar.

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/AVvXsEhNOI6QMwaXq4QvdYLDDYqDY0p_l7B2BvWDqO3EkV-Sza-gOfvTr7BG_BFxv0FllYd_1zaNFegNjRYQIE9ZbzbQkhw_X8nkVOAWKfXJJIjdu2keXJG-zmhwmpWW2QLTqngriiMD2AlEqMY/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);
}

Dentro da página “Editar HTML”  Cole o código CSS ANTES/ACIMA do seguinte código:

]]></b:skin>

Agora copie o Script abaixo:

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

Cole ANTES da tag </head>

Por último, copie o código HTML abaixo, coloque seu endereço nos locais sinalizados.

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

Cole ANTES da tag </body> (No final da página)
Prontinho!
Espero que gostem
Lembrando que com um pouco de paciência, você poderá mudar todo o desenho, alterar cores e deixar seu seu jeito, ou do jeito do seu blog.

Receba nossas atualizações: