BOTÕES DE COMPARTILHAMENTO COM EFEITO HOVER

Os botões de compartilhamento (Social sharing / bookmarking) tem a finalidade de facilitar a divulgação em redes sociais, como: Twitter,Orkut, Facebook etc. e são, com certeza, um recurso extremamente indispensável em qualquer blog.

Quando você adiciona tais botões no seu blog, você possibilita ao seu leitor divulgar os artigos que achou interessante com os amigos e contatos de redes sociais.

E isso, pode trazer novos visitantes para o seu blog.

Quero compartilhar com vocês botões de compartilhamento com efeito hover muito legal com CSS3.

Como instalar widget social sharing / bookmarking?

1. Acesso ao Painel do Blogger > Design > guia Editar Html
2. Clique em Expandir Widgets
3. Procure pelo código  ]]></b:skin>
4. colocar o código abaixo acima de ]]></b:skin>

#bt-share ul {list-style: none;clear: none;padding: 0px 0px ;margin: 5px 0;}
#bt-share ul li {display: inline;background:none;margin:0;padding:0;}
#bt-share ul li a {display: block;float: left;width: 32px;height:32px;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSop8JqgjdLEOmVswJj2lPH9CigZitZXrKETWyHfZ-ro4-6GjHTn6yCOuYmRsaR7VfGPmhd3P9DapcAdNseAitog0wRJNZoRHkfPrmnUR_BmoLKab1PknqKkoPc1sUsxtjHiVK4I4ULC9f/s1600/way2blogging-share-icons-sprite.png') ;margin-left:3px;background-repeat: no-repeat;margin-right: 2px;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; }
#bt-share ul li a.twitter    {background-position: -0px -0px;   }
#bt-share ul li a.twitter:hover {background-position: -0px -33px;  }
#bt-share ul li a.facebook   {background-position: -32px -0px;  }
#bt-share ul li a.facebook:hover {background-position: -32px -33px; }
#bt-share ul li a.stumbleupon  {background-position: -64px -0px;  }
#bt-share ul li a.stumbleupon:hover{background-position: -64px -33px; }
#bt-share ul li a.digg    {background-position: -192px -0px; }
#bt-share ul li a.digg:hover  {background-position: -192px -33px;}
#bt-share ul li a.reddit   {background-position: -160px -0px; }
#bt-share ul li a.reddit:hover  {background-position: -160px -33px;}
#bt-share ul li a.google   {background-position: -128px -0px; }
#bt-share ul li a.google:hover  {background-position: -128px -33px;}
#bt-share ul li a.del-icio-us  {background-position: -480px -0px; }
#bt-share ul li a.del-icio-us:hover{background-position: -480px -33px;}
#bt-share ul li a.mixx    {background-position: -96px -0px;  }
#bt-share ul li a.mixx:hover  {background-position: -96px -33px; }
#bt-share ul li a.technorati  {background-position: -416px -0px; }
#bt-share ul li a.technorati:hover {background-position: -416px -33px;}
#bt-share ul li a.linkin   {background-position: -256px -0px; }
#bt-share ul li a.linkin:hover  {background-position: -256px -33px;}
#bt-share ul li a.yahoobuzz  {background-position: -448px -0px; }
#bt-share ul li a.yahoobuzz:hover {background-position: -448px -33px;}
#bt-share ul li a.myspace   {background-position: -512px -0px; }
#bt-share ul li a.myspace:hover {background-position: -512px -33px;}
#bt-share ul li a.more    {background-position: -576px -0px; }
#bt-share ul li a.more:hover  {background-position: -576px -33px;}

Segundo passo

Procure pelo código seguinte:

<div class='post-footer-line post-footer-line-1'>

Ou

<div class='post-footer'>

Cole logo apos um desses códigos o seguinte:

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='bt-share'> <ul> <li><a class='twitter' expr:href='&quot;http://twitter.com/?status=&quot; + data:post.title + &quot; - &quot; + data:post.url ' rel='nofollow' target='_blank' title='Share this post on twitter'/></li> <li><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Facebook'/></li> <li><a class='stumbleupon' expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Stunbleupon'/></li> <li><a class='digg' expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Digg'/></li> <li><a class='reddit' expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Reddit'/></li> <li><a class='google' expr:href='&quot;http://www.google.com/bookmarks/mark?op=add&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Bookmark this post on Google'/></li> <li><a class='del-icio-us' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on delicious'/></li> <li><a class='mixx' expr:href='&quot;http://www.mixx.com/submit?page_url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank' title='Share this post on Mixx'/></li> <li><a class='technorati' expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Fav on Technorati'/></li> <li><a class='yahoobuzz' expr:href='&quot;http://buzz.yahoo.com/submit/?url=&quot;+ data:post.url' rel='nofollow' target='_blank' title='Share this post on Yahoo!Buzz'/></li> <li><a class='myspace' expr:href='&quot;http://www.myspace.com/Modules/PostTo/Pages/?u=&quot;+ data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='nofollow' target='_blank' title='Sahre this post on Myspace'/></li> <li><a class='a2a_dd more' expr:href='&quot;http://www.addtoany.com/share_save?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title '/><script src='http://static.addtoany.com/menu/page.js' type='text/javascript'/></li> </ul> </div> </b:if>

Salve e pronto!