::..Conexão D2S..::



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 em baixo Mensagem [Página 1 de 1]

#1 Botões de compartilhamento com efeito hover em Sab Maio 19, 2012 4:32 pm

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: [Você precisa estar registrado e conectado para ver 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

Ver perfil do usuário http://conexaod2s.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum


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