Box Flutuante de Redes Sociais ao Lado das Postagens.
Autor: Lucas Lima | Publicado: 2012-01-25T05:33:00-08:00

Olá Pessoal, estou aqui com mais um ótimo Código, quem andou olhando postagens nessas últimas horas viu que agora tem um Box Flutuante ao lado de todas as postagens, isso foi adicionado agora a pouco, e felizmente achei muito bom e resolvi divulgar para vocês. Como vocês viram na imagem de demonstração o Código está ligado o Twitter, Google e Facebook, ficou muito bacana e ainda possui um efeito jquery quando o Box fica no limite de cima, ele desce com efeito jquery até se alinhar na Postagem. Esse código é muito comum no WordPress, mas são poucos os blogs do Blogger que possuem esse código. Este código fcriado pelo Blog Inglês&nbsp;Web and Designers.
Vamos ao tutorial:
1º – Acesse o Painel de seu Blog e clique no Botão Editar HTML.
2º – Em seguida clique em Editar Modelo selecione&nbsp;a caixa ” Expandir modelos Widgets”&nbsp;.
3º – Agora pressione as teclas CTRL + F (atalho de busca na página) e procure pela seguinte Tag:
]]&gt;&lt;/b:skin&gt;
4º ACIMA dela adicione o seguinte código:
#box{border:1px solid #ccc; padding:5px; background:#fff; z-index:9999; display:block; position:absolute; top:300px; float:left; margin:0 0 0 -100px; text-align:center;}
#box div{margin: 10px 0;}
5º – Agora iremos procurar pela seguinte Tag:
&lt;div class='post-footer-line post-footer-line-3'&gt;
6º – E ABAIXO dela adicione o seguinte código:

&lt;b:if cond='data:blog.pageType == "item"'&gt;
&lt;div id='floating-box'&gt;&lt;div id='box'&gt;
&lt;div&gt;&lt;a class='twitter-share-button' data-count='vertical' data-via='bcf_oficial' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'&gt;Tweet&lt;/a&gt;&lt;/div&gt;
&lt;div&gt;&lt;g:plusone size='tall'/&gt;&lt;/div&gt;
&lt;div&gt;&lt;fb:like expr:href='data:post.url' font='arial' layout='box_count' send='true' show_faces='false' width='54'/&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/b:if&gt;
7º – Agora iremos procurar pela seguinte Tag:
&lt;/head&gt;
8º – E ABAIXO dela adicione o seguinte código:
&lt;script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/&gt;
&lt;script type='text/javascript'&gt;
$(function() {
&nbsp; &nbsp; &nbsp;var offset = $("#box").offset();
&nbsp; &nbsp; &nbsp;var topPadding = 210;
&nbsp; &nbsp; &nbsp;$(window).scroll(function() {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if ($(window).scrollTop() &gt; offset.top) {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$("#box").stop().animate({
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;marginTop: $(window).scrollTop() - offset.top + topPadding
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;});
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} else {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$("#box").stop().animate({
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;marginTop: 0
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;});
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;};
&nbsp; &nbsp; &nbsp;});
&nbsp;});
&lt;/script&gt;
&lt;script src='http://platform.twitter.com/widgets.js' type='text/javascript'/&gt;
&lt;script src='https://apis.google.com/js/plusone.js' type='text/javascript'&gt;
{lang: 'pt-BR'}
&lt;/script&gt;
&lt;script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1' type='text/javascript'/&gt;
9º – Depois clique em Salvar Modelo&nbsp;