Instalando o Box Flutuante em seu Blogger/Blogspot

Instalando o Box Flutuante em seu Blogger/Blogspot o mesmo utilizado aqui no blogger:

Com este código que vamos ensinar, são inseridos automaticamente os botões das seguintes redes sociais:

• Botão de RT do Twitter
• Botão Google +1
• Botão “Curtir” do Facebaook
• Botão “Enviar” de grupos do Facebook

Vá até o menu “Design” e procure por “Editar HTML”, então clique para “Expandir modelos de widgets”:

Depois de feito isso procure pela tag  (utilize o atalho CTRL + F para realizar a busca). Exatamente ACIMA dela você irá colar o seguinte código:

<scriptsrc='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>

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

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

Ainda nesta mesma página e dentro do código fonte do Blogger onde você está, procure pela tag . ACIMA dela cole este outro código:

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

Finalmente procure pela linha de código 

 post-footer-line-3′> e cole ABAIXO dela este 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'>Tweeta>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>

b:if>

Agora clique no botão “Salvar modelo” e veja o resultado que irá aparecer APENAS dentro das páginas dos posts e não na home do blog.

Personalizando o widget:

Podemos ainda personalizar o widget, primeiro de tudo mudando o usuário do Twitter. Procure pelo trecho:

1	data-via='ferramentasblog'

Nele basta substituir o “ferramentasblog” pelo seu nome de usuário no Twitter.

É possível também modificar a distancia entre o post e o Widget, para isso basta alterar a margem que for determinada na seguinte linha:

1	#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;}

Basta alterar o -100px que é encontrado em “margin:0 0 0 -100px“. Quanto maior o numero negativo, mais longe do post ele irá ficar.

E ainda nesta parte do código podemos alterar a posição inicial do widget na tela, para isso altere o valor de “top:200px“.