Widget Redes Sociais Flutuante de compartilhamento horizontal para Blogger

Sites de redes sociais se tornaram o centro das atividades da internet , porque são capazes de atrair todos os usuários que usam a internet, seja a partir de escolas, escritórios ou residências . Hoje em dia, as pessoas gostam de compartilhar conteúdos que consideram realmente interessantes em sua rede social que beneficia a todos. É vital para todo blogueiro e webmaster integrar alguma forma de compartilhamento social ou Botão Curtir em seu Blog , para que seus visitantes possam compartilhar suas postagens no melhor site de rede social, o que não só lhes dará cobertura, mas que também irá construir leitores leais. 

Há um número ilimitado de widgets de compartilhamento social, que estão disponíveis em vários blogs. Se você já viu aqueles Blogs da plataforma WordPress que têm um widget de compartilhamento social horizontal, ou seja uma "social Bar" a maioria destes blogs, contam com um plugin que faz com que os botões flutuem quando a página é rolada, por isso hoje vou compartilhar um tipo de Widget semelhante, só que voltado para nós, usuário do Blogger, que conta com botões de compartilhamento Facebook , Twitter, Google Plus , Pinterest , Digg e StumbleUpon.

Veja como funciona:

Principais funcionalidades desse widget

• A característica mais impressionante deste widget é que ele rola junto com sua tela como uma pequena barra.
• Ele começa a rolar de onde é inserido seu código em seu blog e flutua até a seção de comentários. 
• Tem botões Facebook Like, Twitter Share, Google+ 1, Pin-lo e Digg. 
• Ele é construído com ultra-rápido Jquery e CSS para que você não note qualquer tipo de problemas de velocidade. 
• Você pode usar esse plugin em 99 por cento de Templates Blogger sem enfrentar nenhuma dificuldade.

Como instalar o widget no Blogger

Os passos para a instalação são bastante simples, por isso, basta seguir as instruções conforme mencionado abaixo.

1° passo: Acesse o painel do Blogger. Escolha o blog que será implementado. Acesse a opção Design.

2° passo: Realize o backup do seu template atual, contando que caso ocorra qualquer problema, basta realizar o upload do backup.

3° passo: Selecione a opção Editar HTML.

4° passo: Pesquise por </head> e logo ACIMA dela cole o seguinte código:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js' type='text/javascript'/> <b:if cond='data:blog.pageType == "item"'><style type='text/css'>/*<![CDATA[*/ #mblSocialFloat {clear:both;padding: 6px 0;display:block;background:#FFFFFF;} #mblSocialFloat td{padding:4px;margin:0;border:none;} #mblSocialFloat td iframe{max-width:82px;width:82px !important;} #mblSocialFloat.mblFloatSocial{position: fixed;top:0;z-index:9999999;border-bottom:1px solid #ccc;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.15);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.15);box-shadow:0 1px 1px rgba(0,0,0,0.15);} /*]]>*/ </style><script type='text/javascript'>/*<![CDATA[*/ // Set the Top Offset $theOffset = 0; jQuery(document).ready(function(b){var a=b("#mblSocialFloat");a.wrap('<div id="mblSocialPlaceholder"></div>').closest("#mblSocialPlaceholder").height(a.outerHeight());a.width(a.outerWidth());e=a.offset().top-$theOffset;b("#mblSocialFloat iframe[src*=plusone]").closest("div").css("max-width","82px");b(window).scroll(function(){d=b(this).scrollTop();d>=e?a.addClass("mblFloatSocial"):a.removeClass("mblFloatSocial");f=b(".post");if(f.length!=0){c=f.outerHeight()+f.offset().top;d>=c?a.stop().animate({top:"-150px"}):a.stop().animate({top:$theOffset+"px"})}else d>=e?a.css("top",$theOffset+"px"):a.css("top","0")})}); /*]]>*/ </script><script src='http://mbl-flipper-google-blogger.googlecode.com/files/mbl_blogger_pinit.js' type='text/javascript'/><script type='text/javascript'>/*<![CDATA[*/ // Twitter (function(a,b,c){var d=a.getElementsByTagName(b)[0];if(!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a,d)}})(document,"script","twitter-wjs"); // Google + (plus) (function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://apis.google.com/js/plusone.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})(); // Stumbleupon (function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://platform.stumbleupon.com/1/widgets.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})(); // Digg (function(){var a=document.createElement("SCRIPT"),b=document.getElementsByTagName("SCRIPT")[0];a.type="text/javascript";a.async=true;a.src="http://widgets.digg.com/buttons.js";b.parentNode.insertBefore(a,b)})(); /*]]>*/ </script></b:if>

5° passo: Agora vamos adicionar o código que realmente insere os botões, e para isso localize <data:post.body/> e ANTES/ACIMA dele cole o código abaixo:

<!-- MyBloggerLab.com Floating Social Bar --> <b:if cond='data:blog.pageType == "item"'><div class='mblSocialFloat' id='mblSocialFloat'><table class='mblSocialFloat' width='100%'><tr> <td> <a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a> </td> <td> <iframe allowTransparency='true' expr:src='"//www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/> </td> <td> <div class='w2bPinitButton' expr:id='"w2bPinit-" + data:post.id' style='display: none;visibility: hidden;height: 0;width:0;overflow: hidden;'> <data:post.body/> <script type='text/javascript'> w2bPinItButton({ url:"<data:post.url/>", thumb: "<data:post.thumbnailUrl/>", id: "<data:post.id/>", defaultThumb: "http://4.bp.blogspot.com/-YZe-IcKvGRA/T8op1FIjwYI/AAAAAAAABg4/j-38UjGnQ-Q/s1600/w2b-no-thumbnail.jpg", pincount: "horizontal" }); </script> </div></td> <td> <div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/> </td> <td> <su:badge expr:location='data:post.url' layout='1'/> </td> <td> <a class='DiggThisButton DiggCompact'/> </td> </tr></table></div></b:if><!-- MyBloggerLab.com Floating Social Bar -->

Pronto! Salve as alterações e seu widget já deverá estar funcionando! Clique em alguma postagem e teste sua funcionalidade! 

Até o próximo tutorial, e não se esqueça de deixar sua dúvida ou sugestão nos comentários! :)

Share This :