Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Tutoriais Blogger Widget Vanessa S.

Botões flutuantes AddThis vertical para compartilhamento

Botões flutuantes AddThis vertical para compartilhamento de post.Uma boa forma de divulgar seu conteúdo na web é oferecer a seus leitores a opção de compartilhamento em diversas redes sociais.
Em outro post eu ensinei a instalar alguns botões do AddThis, para compartilhar os artigos em redes sociais, que aparece no rodapé dos posts e mostrei, inclusive como incluir ícones personalizados.

Hoje veremos um outro modelo disponibilizado pelo AddThis, com botões flutuantes na vertical que aparecem na lateral do blog.

Botões flutuantes AddThis vertical

O AddThis oferece um serviço de compartilhamento em redes sociais, com diversas opções de escolha e personalização. Sua instalação é bem simples e pode ser usado em qualquer plataforma. Na minha opinião, o AddThis oferece o serviço de compartilhamento de forma mais completa que já vi, pois este recurso permite o compartilhamento dos seus artigos em várias redes sociais.

Incluir Botões flutuantes AddThis vertical para compartilhamento no blog

Você verá como é fácil incluir estes botões, basta seguir os seguintes passos.

Acesse o painel do blogger e vá ao menu “layout“, clique em “adicionar um gadget”, escolha o modo HTML/javascript e cole o seguinte código:


<!-- AddThis Botões flutuantes INICIO -->
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-522b154a53d8cdad"></script>
<script type="text/javascript">
addthis.layers({
'theme' : 'transparent',
'share' : {
'position' : 'left',
'services' : 'facebook,twitter,google_plusone_share,pinterest_share,linkedin,more',
'mobile' : true
}  
});
</script>
<!-- AddThis FIM -->

 

Você pode escolher a posição deste gadget de esquerda(left) ou direita(right). A posição padrão é à esquerda(left). Se você quiser mudar a posição deste gadget para direita, basta alterar a palavra ‘left’ na linha de código para ‘right’. ((Cuidado: não retire as ‘aspas’))

Este gadget é adaptável para dispositivo móvel ou tablet automaticamente. Funciona de forma integrada com qualquer outra ferramenta de compartilhamento do próprio AddThis.

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

42 Comentários

  1. Amauri disse:

    Voçê é show, deus te abençoes sempre e sucesso mas ainda com seu blog, pq está top.

  2. Paulo disse:

    Facil, e rápido, obrigado Vanessa, que Deus te abençoe!

  3. Angola disse:

    Obrigado, no meu funcionou muitíssimo bem. Valeu…..

    Logo que coloquei veio o resultado positivo.

    obrigado http://www.munoblogger.com.br eu adoro as tuas dicas e visito todos os dias da semana.

  4. Vania disse:

    Vanessa, parabéns pelo seu blog, muito bom. Sucesso sempre pra vc.

    Vânia Regina
    BH-MG

  5. anthoni disse:

    Tem como eu colocar outros tipos de logo nesses botões? Tipo uns com material design?

  6. Muito bom mesmo, vale muito a pena ler os seus tutorias e dicas para blogger.

    Obrigado.

  7. Vanessa Diniz disse:

    Muito obrigada Vanessa! Resolvi criar um blog mas sou um zero à esquerda em informática! Seu blog está me ajudando MUUUUIIIIITO! Obrigada mesmo!

  8. Super dica, obrigada!

  9. renata disse:

    Eu não encontro onde colocar de modo que não sera URL…alguém ajuda?

  10. Marcos Caldas disse:

    Ola Vanessa, Bom dia, gostava de saber se pode enviar o código deste que você usa a esquerda do seu site? pois vai mesmo de encontro a aquilo que busco obrigado!

  11. Tatiana disse:

    Olá Vanessa,
    Não sei se disponibilizou, mas procurei e não encontrei … esses botões que vc tem aqui no teu blog, onde aparecem os videos do tube, twittes e posts do face, você teria como ensinar a fazer ?
    Grata !

  12. Show di bola Vanessa muito Bom… Funcionou certinho! Forte Abraço..

  13. Fabio disse:

    Muito bom! Gostei muito!!

  14. jose carlos disse:

    Orra!!! Eu estava pesquisando essa configuração faz tempo, pensei que nunca iria conseguir, passei por vários posts até pelo you tube e não consegui. Que explicação legal, muitíssimo obrigado!!!!!!!

  15. Patricia disse:

    Adorei!!! Já estava desistindo de procurar uma orientação que valesse a pena quando encontrei o seu post. Muito obrigada!

  16. ADEILTON disse:

    Procurei por algum post que realmente não complica-se a forma de fazer a colagem do código. Foi quando encontrei o seu.

    Só colei no último conto do código da pagina e deu certo, rsrsr

    Valeu mesmo!

  17. olga disse:

    Muito Obrigada Vanessa… ficou legal

  18. Muito bom! Valeu pela dica:)

  19. Douglas Alves disse:

    Muito bom, gostei e só agregou conhecimento.
    Obrigado

  20. Oi Vanessas. Como vai?
    Quero agradecer por este tutorial pois fiquei “nas nuvens” depois queconsegui colocar os ícones no meu blog. É que tentei algumas dezenas de vezes – seguindo o passo a passo de outros sites, mas eram complicadíssimos, tinham códigos enormes onde teria de encontrar duas ou três palavras…enfim! Foi quase uma odisseia! E hoje, seguindo o passo a passo, consegui, lendo apenas uma vez.
    Eu penso que já sou seguidora do seu blog. São tantos que já não merecordo. E, como tem um índice impecável e a Vanessa explica tudo ao pormenor, quando tenho dúvidas lá vou pesquisar. Mas, desta vez, não encontrei no índice. Provavelmente não vi bem.
    Desejo que continue a brindar-nos com os seus bons artigos e nos váensinando coisas novas.
    Obrigada e boa semana.

  21. Osky disse:

    Olá! .. queria saber uma coisa… Será que é boa ideia acrescentar async ao script ou ele já carrega asíncrono, não é necessário? Ok, Obrigado pelo teu trabalho, muito bom.

  22. Adler disse:

    Fácil fácil. Não precisa nem adaptar o código. Muito obrigado por compartilhar o conhecimento 🙂

  23. Nada mais justo que vir agradecer pelo seu trabalho querida Vanessa, pois me foi de grande valia.

    Beijos e Abraços Fraternos!

  24. Thais disse:

    Guria, não sabe como procurei por isso, ja tava desistindo, por só encontrar sites com explicações complexas ou que não ofertavam os botões certos!
    Muiiito obrigada mesmo pela ajuda!

  25. Beth Garcia disse:

    Muito obrigada por todo esse trabalho que tem por nós, leigos no assunto!! Vc é show cara!! hahaha Valeu! Estou construindo meu site e estava muito difícil, porque eu queria colocar tudo de legal que eu ví em alguns blogs, mas é muito complicado! Então eu estava aprendendo a linguagem html, aí te achei ó!! Adeus aulas! kkkkkkk
    Fala sério!! Se eu tivesse com tempo, até que continuava, porque é muito legal isso! Obrigada!

  26. FOI INCRIVEL DEU SUPER CERTO VC É A ( O ) MELHOR!!!!!!!!!!

  27. Eduardo disse:

    Oi, Vanessa
    Não encontrei uma forma para fazer contato, por isso usei este formulário. Faz algum tempo que acompanho seu blog, mas hoje fiquei embatucado:
    Não havia percebido que os botões flutuantes de redes sociais em meu blog, só aparecem na página inicial. Está certo isso? Porque não aparecem em todas as páginas? Não sei dizer se foi sempre assim, ou se háalguma coisa errada no blog. Agradeço qualquer informação.
    Abraços.
    Eduardo Marques

  28. Vanessa, muito obrigada.Estou amando o seu blog ele é show.
    Você ta sendo minha salvação literalmente.

    Queria sabe se posso fazer um poste falando sobre ele, manda um email ta bom, obrigada de novo ^^

  29. Fabio Morgado disse:

    Muito bacana a sua dica Vanessa. Valeu!!!

    • Nossa muito bom e realmente simples de se fazer alem de ser muito ultiu para nossos blogs eu partilarmente gostei muito , usava o Sobobo é bom tambem só o dsing não agrada muito alem de só ter a opção de ficar fixa no layout.

  30. Maria disse:

    Teria como modificar as cores dos botões?

  31. eder disse:

    Eu to começando nesse negócio de blog, meu desafio e achar um layout interessante, ache, mas eu não consigo fazer funcionar os códigos html, não aparece nada, mesmo seguindo seu tutorial facílimo, simplesmente não aparece nada

  32. Fabiana disse:

    Aiii eu fi e deu certinho…ficou lindo!!! Obrigada

  33. Como de costume,mais um excelente artigo! Através deste blog,com todas as suas dicas precisas e 100% profissionais,eu construi o meu próprio blog,desde otimizações de SEO até os mínimos detalhes.Muito interessante estes botões flutuantes,vou experimentar em meu blog,pois deixa tudo mais moderno e bonito,agrada quem vê! Forte abraço e sucessos a todos!!!

  34. Gercy disse:

    Muito obrigada, e meus parabéns pelo seu blog vc foi a unica que pode me ajudar já coloquei.
    Bjos

  35. Sugestão válida e extremamente simples de adicionar. Obrigado!

  36. Show de bola, obrigado amiga Vanessa, já coloquei em meu Blog, grande abraço.

    Camilo Almeida de Almeida – Registro-SP

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.