Box vertical flutuante de redes social

Foto: ID da Imagem: 94209826 Shutterstock, Inc.

Olá amigos vamos mostrar como colocar um Box vertical flutuante de redes social, muito útil para divulgação dos seus artigos.
Este Box aparecerá ao lado das suas postagens, caso você use mais de um post na página inicial ele aparecerá no post individual.

Vamos à obra, antes de qualquer coisa faça o backup do seu template, se não sabe fazer click no link e aprenda.

Agora sim vamos começar:

1º Entre em seu blogger e vá em "Editar HTML". Após ter feito isso de um CTRL+ F, procure pela linha </head> e antes dela cole o seguinte código.
<span id="preserve0b359d91c91d47e088858596b9ae91cb" class="wlWriterPreserve"><script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> $(function() { var offset = $("#fblog-box").offset(); var topPadding = 60; $(window).scroll(function() { if ($(window).scrollTop() > offset.top) { $("#fblog-box").stop().animate({ marginTop: $(window).scrollTop() - offset.top + topPadding }); } else { $("#fblog-box").stop().animate({ marginTop: 0 }); }; }); }); </script></span> <span id="preserve183b3436b606423fad578bc546437971" class="wlWriterPreserve"><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/> <script src='https://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'pt-BR'} </script></span> <style type='text/css'> #floating-fblog {width:60px;} #fblog-box {border:1px solid #ccc; padding:5px; background:#fff; z-index:9999; display:block; position:absolute; top:200px; float:left; margin:0 0 0 -100px; text-align:center;} #fblog-box div {margin:0 0 5px;} </style>

2º Usando o mesmo processo, procure por </body> e ANTES dele adicione o seguinte código.

<span id="preserve69f69c5330be4dc1b4f802cc2f822c75" class="wlWriterPreserve"><script src='http://connect.facebook.net/pt_BR/all.js#appId=102576646508501&xfbml=1' type='text/javascript'/>

3º Ainda usando o mesmo CTRL+F e encontre a linha: <div class=’post-footer-line post-footer-line-3′> ou em alguns blogs ela pode aparecer assim <div class='post-footer-line post-footer-line-3'> cole logo após, o seguinte código.

<b:if cond='data:blog.pageType == "item"'> <div id='floating-fblog'> <div id='fblog-box'> <div> <a class='twitter-share-button' data-count='vertical' data-related='ferramentasblog:Aprende como criar um Blog - Blogger ou WordPress [ Ferramentas Blog ]' data-via='ferramentasblog' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a></div> <div> <g:plusone size='tall'/></div> <div> <div id='fb-root'/> <fb:like expr:href='data:post.url' font='arial' layout='box_count' send='true' show_faces='false' width='54'/></div> <div> <div class="addthis_toolbox addthis_default_style "> <a class="addthis_counter"></a></div> <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e5c1b1835b6b565"></script></span></div> </div> </div> </b:if>

Prontinho visualize se estiver tudo a contento salve e corra para o abraço, mas antes comente aqui sua experiência, agora sim um abraço!