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.

Veja o demo aqui: http://rdemo.blogspot.com.br/2012/01/botoes-de-compartilhamento.html

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  ]]>
4. colocar o código abaixo acima de ]]>

#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(‘http://4.bp.blogspot.com/-94xCOZSsMhI/Td9Cglmov5I/AAAAAAAAA4M/0kADSqbjdek/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:

Ou

Cole logo apos um desses códigos o seguinte:

Ao comentar você concorda com nossa Política de Comentários.