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.
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, veja o código das cores.
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, leia mais detalhes sobre o códigos CSS para fazer bordas.
Veja algumas outras opções de botões para divulgar seu blog nas redes sociais:
Colocar Botões de Compartilhamento em Forma de Coração no Blog
Estatísticas Botões de Compartilhamento - Curtir, Retweet, +1 e Outros
7 Opções de Botões para Divulgar Blog e Conseguir visitas das Redes Sociais
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.
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">Não importa o lugar no seu layout que esse gadget ficará posicionado ele sempre aparecerá na posição que você configurar.
<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>
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, veja o código das cores.
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, leia mais detalhes sobre o códigos CSS para fazer bordas.
Veja algumas outras opções de botões para divulgar seu blog nas redes sociais:
Colocar Botões de Compartilhamento em Forma de Coração no Blog
Estatísticas Botões de Compartilhamento - Curtir, Retweet, +1 e Outros
7 Opções de Botões para Divulgar Blog e Conseguir visitas das Redes Sociais
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.
Marcadores: Acessórios, Códigos, Mais visitas, Redes Sociais