::..Conexão D2S..::
Botões de compartilhamento com efeito hover Logo10


Seja bem vindos ao ConexãoD2S,


Cadastre-se no fórum e tenha benefícios:


*Baixe músicas, jogos, vídeos;
*Faça perguntas, tire suas dúvidas;
*Entre em nosso Xat;
*Crie tópicos, converse direto com o Admin;
*Leia tutoriais completos



Cadastre-se e faça parte da equipe CD2S
Tudo gratuito!
::..Conexão D2S..::
Botões de compartilhamento com efeito hover Logo10


Seja bem vindos ao ConexãoD2S,


Cadastre-se no fórum e tenha benefícios:


*Baixe músicas, jogos, vídeos;
*Faça perguntas, tire suas dúvidas;
*Entre em nosso Xat;
*Crie tópicos, converse direto com o Admin;
*Leia tutoriais completos



Cadastre-se e faça parte da equipe CD2S
Tudo gratuito!
Sign Up NowFAQ
Signup Now
Esta afim fazer uma postagem iniciar um novo tópico e ou interagir com outros
membros deste conselho, você precisa criar uma conta primeiro.
Se esta é sua primeira visita, não se esqueça de verificar o FAQ clicando no link acima. Você pode ter que registrar antes que você possa postar: clique no link de registro para prosseguir. Para começar a ver as mensagens, selecione o fórum que pretende visitar da seleção abaixo.

Você não está conectado. Conecte-se ou registre-se

Ver o tópico anterior Ver o tópico seguinte Ir para baixo Mensagem [Página 1 de 1]

#1Botões de compartilhamento com efeito hover Empty Botões de compartilhamento com efeito hover Sáb maio 19, 2012 4:32 pm

Daniel D2S

Daniel D2S
Admin
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?

  1. 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 == &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

https://conexaod2s.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Ir para o topo  Mensagem [Página 1 de 1]

Permissões neste sub-fórum
Não podes responder a tópicos


Ganhadores da SOTW
Small BannerSmall BannerSmall BannerSmall BannerSmall BannerBig Banner
PurevB Banner Placeholder