#1 Botões de compartilhamento com efeito hover Sáb maio 19, 2012 4:32 pm
Daniel D2S
Admin
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: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Como instalar widget social sharing / bookmarking?
Segundo passo
Procure pelo código seguinte:
Cole logo apos um desses códigos o seguinte:
Salve e pronto
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: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Como instalar widget social sharing / bookmarking?
- Acesso ao Painel do Blogger > Design > guia Editar Html
Clique em Expandir Widgets
Procure pelo código ]]></b:skin>
colocar o código abaixo acima de ]]></b:skin>
- Código:
#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:
<div class='post-footer-line post-footer-line-1'>
Ou
<div class='post-footer'>
Cole logo apos um desses códigos o seguinte:
- Código:
<b:if cond='data:blog.pageType == "item"'> <div id='bt-share'> <ul> <li><a class='twitter' expr:href='"http://twitter.com/?status=" + data:post.title + " - " + data:post.url ' rel='nofollow' target='_blank' title='Share this post on twitter'/></li> <li><a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Facebook'/></li> <li><a class='stumbleupon' expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Stunbleupon'/></li> <li><a class='digg' expr:href='"http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Digg'/></li> <li><a class='reddit' expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Reddit'/></li> <li><a class='google' expr:href='"http://www.google.com/bookmarks/mark?op=add&bkmk=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Bookmark this post on Google'/></li> <li><a class='del-icio-us' expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on delicious'/></li> <li><a class='mixx' expr:href='"http://www.mixx.com/submit?page_url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank' title='Share this post on Mixx'/></li> <li><a class='technorati' expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Fav on Technorati'/></li> <li><a class='yahoobuzz' expr:href='"http://buzz.yahoo.com/submit/?url="+ data:post.url' rel='nofollow' target='_blank' title='Share this post on Yahoo!Buzz'/></li> <li><a class='myspace' expr:href='"http://www.myspace.com/Modules/PostTo/Pages/?u="+ data:post.url + "&t=" + data:post.title' rel='nofollow' target='_blank' title='Sahre this post on Myspace'/></li> <li><a class='a2a_dd more' expr:href='"http://www.addtoany.com/share_save?url=" + data:post.url + "&title=" + data:post.title '/><script src='http://static.addtoany.com/menu/page.js' type='text/javascript'/></li> </ul> </div> </b:if>
Salve e pronto