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.

Gadget com botões flutuantes no 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">
<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, 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.

35 comentários :

  1. Confira a divulgação do Dicas Para Blogs na minha página.
    http://www.arcecidadania.org/

    ResponderExcluir
  2. Fabiano,

    Amem por você ter publicado algo que eu espera muitO que aparece-se na blogosfera, isso vai ajudar e muito em designer com Blogueiros. Parabéns por esse código.

    Mas avisando que você colocou também em seu Blog, o problema é que não dar para ver por inteiro aqui em meu navegador, ver se você consegue pensar em todos os seus leitores poi cada um tem seu navegador diferente, FICA A DICA. :D

    Abraços

    ResponderExcluir
  3. Phablo Projetos
    o grande problema desses códigos de botões flutuantes é esse que falou eles desaparecem na lateral da pagina.

    mas só estou usando por uns dias para demonstrar já que publiquei o tutorial ontem (24/05/2012)

    ResponderExcluir
  4. Olá estou fazendo um blog: http://ateliearteemtecido.blogspot.com.br/ e gostaria de saber como faço para descer as postagens para ficar abaixo do cabeçalho

    ResponderExcluir
  5. Morgania Sales
    não entendi sua duvida.

    mas as postagens do blog sempre são embaixo do cabeçalho.

    ResponderExcluir
  6. Boa noite amigo!

    Eu curto muito o seu blog e as suas dicas me ajuda muito, essa agora do Gadget com Botões Flutuantes de Redes Sociais no Blogger eu estou usando também, só que notei que não tem o botão do Google +, como faço para acrescentar esse botão?


    http://www.trigv.com.br/

    ResponderExcluir
  7. se você já tiver o botão google+ em seu blog é só colocar esse código <g:plusone size="tall"></g:plusone> junto com o que já mostramos no tutorial

    ....ight:0px;padding:2px"><g:plusone size="tall"></g:plusone>


    se ainda não tiver o botão +1 no seu blog veja aqui o tutorial completo: Colocar Botão +1 do Google no Blog

    ResponderExcluir
  8. Fabiano,hoje que estou levando os ícones das redes sociais.
    Obrigada lindo fim de semana para vc,bjs

    ResponderExcluir
  9. Não tenho nenhuma pergunta sobre isso só gostaria de saber. Como que retira aquele espaço em branco que fica ao fundo dos HTMLs e links do blog?
    aki esta meu blog veja como esta feinho!!! com isso branco
    http://oquenaofoirevelado.blogspot.com.br

    ResponderExcluir
  10. tipo o fundo do "aranha Céu" , "posts mais populares" , "AdSense" , "seguidores" , e outros só gostaria de trocar a cor branca do fundo e colocar preta ou transparente. Como faço?

    ResponderExcluir
  11. entra no blog e da uma olhada ok?

    ResponderExcluir
  12. Historia de vampiros
    veja aqui como Personalizar gadgets do Blog

    lá você pode ver como tirar a cor de fundo dos gadgets que desejar

    ResponderExcluir
  13. ai cara eu tentei juro que tentei, mas isso esta muito complicado e eu ainda tenho que descobrir como que deixa as bordas das postagem e AdSense , aredondadas e como que coloca imagem no fundo doas postagem, valeu a ajuda .... até .... um dia eu aprendo a editar essas coisas quem sabe se vc tiver algum tutorial encínando fico agradecido... valew

    ResponderExcluir
  14. Historia de vampiros as bordas do adsense arredondadas são feitas na hora de gerar o código.

    é melhor fazer o código na pagina do adsense do que diretamente no blogger

    ResponderExcluir
  15. acho que intendi!!! :) vlw. Que bom que existe este site!

    ResponderExcluir
  16. iae fabiano então eu queria saber se vc tem alguma dica de designe para que eu mude ou acrescente no blog, me de sua opinião sincera por favor

    http://naofoirevelado.blogspot.com.br/

    valeu!!! :)

    ResponderExcluir
  17. cho que o mais importante é tentar descobrir o que seus visitantes gostam mais

    ResponderExcluir
  18. Meu amigo nao sei o que aconteceu mas quando adicionei esse codigo apareceram "duas box flutuantes" quando vi que aparceram duas eu tentei remover o widget , excluindo ele e apenas 1 deles sumiu o outro nao sumiu e nao sei como remover ele, vocÊs sabem o que pode ter acontecido?

    ResponderExcluir
  19. eu denovo,desculpem parce que o blogger bugou e adicionou duas vezes o codigo obrigado pela atenção

    ResponderExcluir
  20. no meu deu isso
    Seu HTML não pode ser aceito: A tag de fechamento não possui a tag de abertura correspondente: DIV Ignorar aviso

    ResponderExcluir
  21. Marlon Santo provavelmente é falta de algum sinal no código por exemplo faltando " > / =

    note que " é diferente de ' por isso se na hora de colocar o endereço do link ou imagem começar com um tem que terminar com o mesmo

    ResponderExcluir
  22. Mas eu queria pôr em formato caixa na barra lateral como alguns blogs tem

    ResponderExcluir
  23. Anonimo essa caixa com os botões tem a mesma aplicação apenas tem cores diferentes

    ResponderExcluir
  24. Parabéns aos editores deste Blog, pelas dicas! Coloquei em Meu site de Estudos Biblicos e Posicionei conforme Layout do Site e ficou Maravilhoso! Melhor Impossivel! Quem quizer dar uma Olhadinha: www.apalavravirtual.com.br

    ResponderExcluir
  25. bem simples, obrigado

    ResponderExcluir
  26. Fabiano '
    me ajuda cara . eu coloquei esse botões no meu Blog, mais acabou dando um erro .
    como faço para tirar esses Botoes ?? já tentei de tudo

    ResponderExcluir
  27. Marcio o unico jeito é achar e apagar os códigos que colocou.. ou no caso deste tutorial excluir o gadget onde colocou o código

    ResponderExcluir
  28. Já exclui e mesmo assim não sai ... Sera que tenho que começar outro?

    ResponderExcluir
  29. quando tentou colocar o código no blog aconteceu algum erro? tentou varias vezes? será que não colocou em dois lugares?

    essa é a única explicação que consigo imaginar. Veja no código de fonte do seu blog se encontra o código.

    Veja aqui: Como Encontrar Erros nos Códigos do Blog: HTML, CSS, Javascript

    ResponderExcluir