Gadget com Botões Flutuantes de Redes Sociais no Blogger

Colocar os botões flutuantes no blog pode ser uma boa forma de conseguir mais divulgação do seu blog em redes sociais como Twitter, Facebook, Orkut e outros. Nós já mostramos diversas opções de botões de compartilhamento nas redes sociais.
Então vamos mostrar hoje um código mais simples para fazer os botões flutuantes ao lado do conteúdo da sua pagina sem ficar fixos no canto da pagina.

Vamos usar o código dos botões de compartilhamento do AddThis para demonstrar o código dos botões flutuantes no blogspot, mas você pode usar com qualquer outro tipo de botão ou código que desejar.

Entre na pagina layout > adicionar gadget > html/javascript e cole esse código.

<div style="position:fixed; bottom:20%; margin-left:-98px; float:left;width:60px;background-color:#ffffdf;padding: 5px;border:1px solid #000;border-right:none"><center><div class="addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div></center></div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e2088636f7cce31"></script>
</div>

Não importa o lugar no seu layout que esse gadget ficará posicionado ele sempre aparecerá na posição que você configurar.

Veja como editar e escolher a posição dos botões flutuantes das redes sociais no seu blog:

position:fixed; bottom:20%; margin-left:-98px: posicionamento da caixa, então altere a altura na pagina 20% e o posicionamento horizontal modificando o valor -98px, aqui note que o valor é negativo ou seja o sinal de menos faz parte do posicionamento.

float:left: lado que aparece a caixa

width:60px: largura da caixa

padding: 5px: margem entre as bordas da caixa e os botões

background-color:#ffffdf: cor de fundo da caixa de botões de compartilhamento.

border:1px solid #000;border-right:none: neste trecho retiramos um lado da borda para parece que a caixa com os botões flutuantes fazem parte do nosso layout.


Testamos alguns códigos e a maioria deles usa códigos javascript para fazer o movimento dos botões na tela, mas achamos que usar um código apenas para corrigir o posicionamento dos botões funciona do mesmo jeito e precisa depender de mais códigos que deixam seu blog mais lento.

Para terminar queremos falar novamente que o uso dos botões do addthis é opcional você poderá trocar por qualquer outro como, por exemplo, colocar o Botão +1, Botão Curtir e Enviar do Facebook, Botão Retweet ou Linkedin como mostramos nos links acima. Portanto agora é só escolher o que você quer usar nesta caixa flutuante no seu blog.