Colocar Botões de Compartilhamento em Forma de Coração no Blog

Usar botões para compartilhar as postagens com formato de coração no blog pode ajudar (atrair a atenção) dos seus visitantes para os botões de compartilhamento das redes sociais e com isso ajudar a conseguir mais visitas de sites como Facebook, Twitter, Orkut, Pinterest e outros. Mas se você quiser mostrar botões no modelo padrão pode ver nosso post sobre: 7 Opções de Botões para Divulgar Blog nas Redes Sociais.

botões de compartilhamento em forma de coração

Para colocar esse acessório de compartilhamento de postagens em forma de coração no blogger você deve modificar o código HTML então sugerimos fazer backup do seu template antes de começar. Então entre na pagina editar HTML, use o ctrl F, encontre a linha </head> e coloque esse código antes dela:

<!-- Start Heart Bookmarking Gadget Code From http://www.spiceupyourblog.com/ -->
<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({publisher: &quot;ur-98d377f-bdd3-9ad1-fbe5-2a678f0a60ee&quot;, onhover:false}); </script>
<link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>
<!-- End Heart Bookmarking Gadget Code From http://www.spiceupyourblog.com/ -->


Agora procure e insira esse outro código antes de </body>

<!-- Start Heart Share Code From http://www.spiceupyourblog.com/ -->
<div style='position: fixed; bottom: 2%; left: 2%;'>
<div class='shareEgg' id='shareThisShareHeart'/>
</div>
<script type='text/javascript'>stlib.shareEgg.createEgg('shareThisShareHeart', ['facebook','twitter','pinterest','linkedin','stumbleupon','email','sharethis'], {title:' <data:blog.pageTitle/>',url:'<data:blog.url/>',theme:'shareheart'});</script><a href="http://www.spiceupyourblog.com/">Blogger Wordpress Gadgets</a>
<!-- End Heart Share Code From http://www.spiceupyourblog.com/ -->


E já está tudo pronto. Se você quiser mudar o lugar que o coração aparece na sua pagina é só alterar o trecho:
<div style='position: fixed; bottom: 2%; left: 2%;'>

Para colocar na parte de cima da pagina troque bottom por top e se quiser o gadget de coração do lado direito troque left por right. Em ambos os casos o valor 2% é a distancia da margem da pagina então pode modificar isso como quiser. Apenas tenha cuidado com os outros sinais como, por exemplo, os dois pontos, ponto e vírgula porque eles fazem parte do código de posicionamento do botão para compartilhar e se apagar ou trocar algum de lugar o código não funciona corretamente no blog.

Como pode notar esse javascript foi desenvolvido pelo site Spice Up Your Blog e nós estamos apenas divulgando o código por achar que é interessante de usar um gadget em forma de coração para compartilhar postagens nas redes sociais. Mas é claro isso terá utilidade dependendo muito do tipo de conteúdo e visitantes do seu blog.

Veja outras dicas para compartilhar e divulgar seu blog:
Como Colocar Botão Pin it do Pinterest no Blogger ou Wordpress
Colocar botão Curtir e Enviar do Facebook em Todas as Paginas do Blog
5 Dicas para Ajudar na Divulgação de Blogs

Esse tutorial é para responder a uma duvida deixada em um dos comentários deste blog e aproveitamos para dizer que não publicamos tutoriais sobre outras perguntas e sugestões que recebemos porque nem tudo é possível fazer no blog ou são coisas que apresentam muitos erros conforme o template, mas realmente pesquisamos sobre todos os assuntos sugeridos. Abraços a todos!
Related Posts with Thumbnails

Link desta Pagina

Compartilhe essa Página

27 comentários:

  1. pode botar outra coisa ao invez do coração?

    ResponderExcluir
  2. Reinaldo
    vou procurar saber sobre outras imagens

    ResponderExcluir
  3. muito bom, com isso pode ajudar as divulgar o blog.
    valeu.

    ResponderExcluir
  4. Vocês pode fazer uma matéria explicando como colocar anúncios no blog?

    ResponderExcluir
  5. Amei o coraçãozinho, ficou show...

    ResponderExcluir
  6. Este comentário foi removido pelo autor.

    ResponderExcluir
  7. eba,eu consiguii ficou muito lindo, obrigado pela dica fabiano roberto.

    ResponderExcluir
  8. Parabéns pelo post, gostei muito e já apliquei no meu blog www.penseeame.com.

    Quero parabenizar também o outro post que li e que ensina a por o gadget de redes sociais como você colocou aqui do lado direito, fica muito bom e é fácil de posicioná-lo.

    Muita paz e luz no seu caminho!

    ResponderExcluir
  9. não consegui colocar no meu blog o coraçãozinho!:(

    ResponderExcluir
  10. mas não apareceu nada no seu blog?

    veja se colocou o código completo... as vezes faltou alguma letra na hora de copiar

    ResponderExcluir
  11. eu consegui colocar mas não ficou bom :( metade da redes sociais vao para "baixo das postagens", tem como botar em um local mais largo do meu blog?

    ResponderExcluir
  12. no seu caso seria melhor mudar o gadget de lugar em vez de alterar as larguras do blog

    ResponderExcluir
  13. Não consegui colocar o coração buaaaaaaa.Não achei as 2 palavras q vc mandou procurar apertei o Ctrl F mas ele deu resultado 0 de 0

    ResponderExcluir
  14. Cristiane você achou a pagina do html do blog?

    tente pesquisar somente a palavra sem a barra, por exemplo: body

    ResponderExcluir
  15. kra, tem como trocar o cor???
    mi da umas dicas para meu blog
    cleyshow.blogspot.com.br

    ResponderExcluir
  16. Cleyton
    trocar a cor do que?

    a maior parte das cores do blog são códigos css ou imagens de fundo.

    ResponderExcluir
  17. Boa tarde Fabiano !!
    Tentei mas na hora de salvar aparece essa mensagem
    Mais do que um widget foi encontrado com id: HTML4. IDs Widget deve ser único poderia me ajudar ? http://www.artesfaby.blogspot.com.br/

    ResponderExcluir
  18. veja se você não copiou e colou duas vezes esse trecho do html em alguma mudança do html que tenha feito

    ResponderExcluir
  19. já conferi e não tem repetição não !! Até desmarquei a opção Mostrar botões de compartilhamento pra ver se era esse o motivo mas tbm não deu .
    Que pena ....
    Obrigada pela atenção

    ResponderExcluir
  20. Olá, eu gostaria de saber como troca as imagens que ficam passando em um banner, por exemplo no banner 3D?

    ResponderExcluir
  21. Solange existem diversos códigos que fazem os banners ficar passando a maioria é no formato slide, mas precisa pesquisar por um código para criar slides com banners.

    embora alguns efeitos sejam feitos com flash que é um programa de animação mas isso já é bem mais complicado de fazer.

    ResponderExcluir
  22. Gente eu entendi mal ou não funcionou não saiu embaixo de cada postagem, ou e para compartilhar só o blog.por favor me ajudem.http://www.recicladorum.blogspot.com.br/ preciso compartilhar as postagem individuais sera que da obrigado.

    ResponderExcluir
  23. acho que esse código compartilha a pagina atual que a pessoa está navegando, ou seja, só vai compartilhar o post se estiver na pagina dele.

    ResponderExcluir