Box Flutuante de Redes Sociais nas postagens

Olá pessoal, alguns de vocês devem ter percebido em alguns blogs um box flutuante de redes sociais ao lado dos posts e muitos até se perguntaram como se coloca o mesmo. Então hoje estou ensinando a você a fazer isso. Como podem ter percebido, o box esta ligado ao Twitter, Google+ e Facebook

Vamos ao que interessa:

1º - Acesse o Painel de seu Blog e clique no Botão Editar HTML.

2º - Em seguida clique em Editar Modelo selecione a caixa ” Expandir modelos Widgets” .

3º - Agora pressione as teclas CTRL + F (atalho de busca na página) e procure pelo seguinte:

</head>

4º - Acima adicione o seguinte código:

<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><br /> <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><br /> <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>

5º - Agora iremos procurar pela seguinte Tag:

</body>

6º - E acima dela adicione o seguinte código:

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

7º - Agora iremos procurar pela seguinte Tag:

<div class=’post-footer-line post-footer-line-3′>

8º - E abaixo dela adicione o seguinte código:

<b:if cond='data:blog.pageType == "item"'><br /> <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></div></div></div></b:if>

9º – Depois clique em Salvar Modelo.

Comente deixando sua opinião...