Como colocar Icone Fixos No Seu Blog

Vamos lá, primeiramente vamos inserir o código abaixo (CSS) acima de ]]>b:skin

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

Agora copie o script abixo e cole antes da tag <*/head>

<script src='http://www.google.com/jsapi'/><br> <script><br> google.load("jquery", "1.3.2");<br> </script><br> <script type='text/javascript'><br> $(function() {<br> $('#menusisi a').stop().animate({'marginLeft':'-50px'},1000);<br> $('#menusisi > li').hover(<br> function () {<br> $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);<br> },<br> function () {<br> $('a',$(this)).stop().animate({'marginLeft':'-50px'},200);<br> }<br> );<br> });<br> </script>

Por ultimo cole o código HTML abaixo de <*/body>

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

OBS: TIRE OS ASTERISCOS

Gostou? Comente e Vire Um Seguidor!!