Como sempre falamos aqui no PhTutos as redes sociais estão cada vez mais dispostas a ajudar a nós blogueiros. O que devemos fazer é simplesmente instalar nossos blogs nessas redes sociais, como o Facebook e o Twitter. E para isso, existem os gadgets que fazem isso. Os mais eficientes que podemos citar hoje são o Tweet (do Twitter), o Like (do Facebook), o +1 (lançado a pouco tempo pela Google) e o Addthis (esse incrível botão reúne várias formas de compartilhamento). Nesse artigo você vai ver como adicionar um gadget flutuante animado que reúne todos esses 4 botões.

Como sempre falamos aqui no PhTutos as redes sociais estão cada vez mais dispostas a ajudar a nós blogueiros. O que devemos fazer é simplesmente instalar nossos blogs nessas redes sociais, como o Facebook e o Twitter. E para isso, existem os gadgets  que fazem isso. Os mais eficientes que podemos citar hoje são o Tweet (do Twitter), o Like (do Facebook), o +1 (lançado a pouco tempo pela Google) e o Addthis (esse incrível botão reúne várias formas de compartilhamento). Nesse artigo você vai ver como adicionar um gadget flutuante animado que reúne todos esses 4 botões.

Esse gadget anteriormente era possível ser usado somente em blogs da plataforma WordPress.org. Até então que o Claudio Sanches adaptou ele para o Blogger. Mas ainda resolvi adicionar o botão do Addthis e complementar esse gadget.

Se você notar, esse box flutua de forma animada enquanto rolamos a página do blog.

Também mostramos como instalar outros modelos de gadgets assim:

• Botões Flutuantes de compartilhamento
• Novo gadget flutuante para compartilhamento em redes sociais
• Gadget de Redes Sociais para compartilhamento

Como instalar?

Para instalar, basta ir no “Editar HTML” do blog e fazer uma cópia de segurança para prevenir seu blog. Depois, marque a caixinha “Expandir modelos de widgets”.

→ 1° passo

Encontre a linha </head> e logo ANTES dela, cole o 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 = $(&quot;#fblog-box&quot;).offset();
var topPadding = 60;
$(window).scroll(function() {
if ($(window).scrollTop() &gt; offset.top) {
$(&quot;#fblog-box&quot;).stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
$(&quot;#fblog-box&quot;).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: &#39;pt-BR&#39;}
</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>

Em vermelho, você pode alterar a espessura da borda do box. Em azul, você pode alterar o tipo de borda, pode mudar para dashed (traçada) e dotted (pontilhado). Em verde representa a cor da borda. Em laranja, representa a cor de fundo do box. Para alterar as cores, pegue o código na nossa paleta de cores aqui.

→ 2° passo

Depois de colado o código anterior, procure pela linha: </body> e adicione o seguinte código logo ANTES:

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

→ 3° passo

Faça uma nova busca e encontre a linha: <div class=’post-footer-line post-footer-line-3′> e cole logo DEPOIS, o seguinte código:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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>

Salve o modelo e veja como ficou.

Categories: blogger