Box Flutuante com botões de redes sociais




Hoje ensinarei como incluir um box flutuante com os botões do Facebook, Twitter e Google plus, que desliza ao rolar a página.

Com esses botões de compartilhamento você consegue facilmente divulgar seus post, assim atrair mais leitores.

Ele ficará como na imagem ao lado>>>

Acompanhe o tutorial:




1. No painel do blogger em "Layout" clique em "Adicionar um gadget" depois em "HTML/JavaScript" e cole o seguinte código:

<!--BOX FLUTUANTE REDES SOCIAIS-->
<style>  #pageshare {position:fixed;
bottom:15%;
left:15px;
float:left;
border: 0px solid black;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background-color:#FFFF;
padding:0 0 1px  0;z-index:10;
}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}  .fb_share_count_top {width:48px !important;}  .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}  .FBConnectButton_Small,
 .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
 </style>
 <div id='pageshare' title="Compartilhe isso com seus amigos"> <div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div> <div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div> <div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div> <div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><br/><div style="clear: both;font-size: 9px;text-align:center;"><a href="ENDEREÇO DO SEU BLOG" target="blank">free sidebar<font color="black"><font></font></font></a></div></div>
<!--BOX FLUTUANTE REDES SOCIAIS FINAL--> 
*Deixei destacado, em vermelho,onde você deve incluir o endereço do seu blog.

Espero que tenham gostado, deixe sua sugestão de post aqui nos comentários :)





Veja também

Comentários

  1. Oie amei a dica e achei bem fácil né
    bjs

    ResponderExcluir
  2. Só serve para blogger??
    https://quase18blog.wordpress.com/

    ResponderExcluir
    Respostas
    1. Não testei em outras plataformas somente no Blogger ;)
      beijos

      Excluir
  3. n consegui achar o site do blogger

    ResponderExcluir
  4. Oi lindah gostei bastante do seu blog vou ater adicionar aos favoritos contínua com este trabalho lindo que vc faz

    ResponderExcluir
Sua opinião é muito importante!
:3 :p :s :9 :| :'( :8( ;) :D :( 8) :)

Postar um comentário