Gadget Com Ícones Fixos Com Efeito JQuery

Agora irei ensinar Como colocar um simpático  conjunto de ícones, em gadget fixo na lateral do blog, com efeito JQuery (deslizante), desenhado em CSS.
Esse Widget muito bacana serve para atrair  e estimular os leitores a assinarem os feeds, acompanhar o blog em redes sociais, fazer contato, etc. Peguei os códigos, e vou ensinar como instalar.
Confesso que ainda não sabia adicionar esse maravilhoso Widget no blogger,
e acabei aprendendo no blog Mamanunes .

Vamos ao tutorial:
1-Entre na aba design do seu blog e clique em editar HTML
2-Aperte ctrl+F e procure por:

]]></b:skin>

3-Antes dele cole o código a seguir:

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/AVvXsEhQJoCiqeylgIGwrU6NUEDXbvRg6WM0iiTwZkCI8Jcl_04Zsbp6jWSVmvTSyHBg0Nzyt0hkewllKvw-DMjsL-MlC2IcSYyHMuHaRhNF1oiGSgWamHPaoQWVDK8hTeQyNUMKttiMcDIctLM/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); }

• Os links negritados em vermelho são o link das imagens, que podem ser trocados .

4-Agora pressione ctrl+F e procure por:

</head>

5-Acima dele cole o seguinte código:

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

6-Mais uma vez aperte crtl+f procure por:

</body>

7-Antes da tag body  cole o seguinte codigo:

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

Configure o ultimo código com suas informações, e pronto visualize seu modelo e se estiver tudo ok salve. :D