• Fotografia
    Como tirar fotos legais com o celular
    16 set 2015
  • Decoração
    Os 5 melhores diys de decoração (vídeos)
    24 fev 2015
  • Feminice
    Meus produtos favoritos da Dresslily
    28 jan 2016
  • 12 janeiro 2015

    Tutorial: Botões de compartilhamento

    Eu tenho reparado que alguns blogueiros ainda não tem a opção curtir ou não tem os botões de compartilhamento. É algo importante até pra você saber quantas pessoas estão curtindo os seus posts. 

    Muitas vezes as pessoas não colocam pra não querer ter dor de cabeça com HTML ou pelo simples motivo de achar isso uma coisa sem importância, mas muito pelo contrário, viu? Vou ajudar vocês hoje à colocar esses botõezinhos importantes no blog de vocês. 

    Se você quiser o botão curtir do Facebook, use o tutorial abaixo:

    Vá no seu HTML e clique em Editar HTML, dê Ctrl + F e procure isto: <div class='post-footer-line post-footer-line-1'> (em alguns blogs tem o mesmo código duas vezes, se for seu caso, coloque abaixo do segundo código) quando achar coloque em frente este código:  

    <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/> </b:if>

    Agora vamos ao código com botões de compartilhamento com o addthis, ok? 

    Entre neste site e se cadastre.

    Agora, no seu HTML, dê Ctrl + F e na caixa que aparecer cole: <div class='post-footer-line post-footer-line-1'>, quando achar cole o código abaixo ACIMA da div procurada.

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='addthis_toolbox addthis_default_style '>
    <a class='addthis_button_facebook_like' fb:like:layout='button_count'/>
    <a class='addthis_button_tweet'/>
    <a class='addthis_button_pinterest_pinit'/>
    <a class='addthis_counter addthis_pill_style'/>
    </div>
    </b:if>
    <script src='http://s7.addthis.com/js/300/addthis_widget.js#username=SEU-EMAIL' type='text/javascript'/>

    Onde está escrito SEU-EMAIL substitua pelo e-mail que você se cadastrou!

    Se ela não ficar certinha como você quer, procure por: ]]></b:skin> e acima dela cole isto: 

    .addthis_toolbox {
    margin-left: 300px;
    margin-bottom: 1px;
    }

    Com este código você pode mudar os seus botões de lugar, colocando na direita, esquerda ou centro. Vá alterando e vendo como fica melhor no seu layout. 

    Entendendo:

    Margin-left significa a margem à esquerda. Você pode ver que os meus botões estão à direita, pois eu coloquei essa margem toda à esquerda. Deu pra entender? hahah 

    Margin-bottom é a margem inferior, a margem de baixo.

    SORTEIO DO BLOG: O resultado já saiu e a ganhadora foi a Sara Rodrigues. Veja o post lá na fanpage.

    Espero que ajude vocês, viu? 
    Um beijo!

    Não se esqueçam de seguir o blog nas redes sociais, viu? Acompanhe o blog: Facebook | Twitter Instagram Youtube

    9 comentários:

    1. Muito Obrigado,vou usar talvez no meu próximo Layout.
      Eu não ganhei o Sorteio,mas parabéns pra Ganhadora :D

      ResponderExcluir
      Respostas
      1. De nada! Tente nos próximos sorteios.

        Beijos e obrigada por comentar!

        Excluir
    2. Digamos que este seja um dos principais passos se você quer que o seu conteúdo se espalhe mais facilmente pela internet. O compartilhamento é uma ferramenta muito útil, mas que a maioria deixa passar batido.

      Sara | O Mundo de Sara Lupeti

      ResponderExcluir
    3. Algo tão simples mas que quase todos deixa passar batido. No mundo de hoje temos que facilitar ao máximo a experiencia do usuário na internet, e algo que é tão "bobo" deixamos de lado.

      Sara | O Mundo de Sara Lupeti

      ResponderExcluir
    4. Adorei Lay sua linda! Continua postando seus tutoriais porque eles ajudam demais viu! ;)
      http://www.escritosdeumagarota.com/

      ResponderExcluir
    5. Nossa!! Esse post facilitou tanto minha vida!! kkkk
      Achei você super estilosa e linda assim como o blog!
      Bjks
      http://paulistada.blogspot.com.br/

      ResponderExcluir
    6. Ótima dica, concordo com você que é importante ter essas opções no blog.
      bjs
      |A Beautiful Lie|

      ResponderExcluir
    7. Muito obrigada, estava mesmo procurando por isso!
      O tutorial ficou ótimo, super explicadinho. Vou correndo colocar no meu blog.

      Bjus ♥ http://alanacrist.blogspot.com.br/#

      ResponderExcluir
    8. Já tinha visto esse tutorial milhares de vezes, mas sempre que eu tentava colocar nunca aparecia. E agora tentei novamente, e consegui. Muito obrigada! Fiquei tão feliz *u*
      PS: Seu blog é incrivelmente lindo! E o conteúdo é maravilhoso. Estou me encantando! Já estou seguindo, poderia retribuir se não for incomodo? Grata! Espero seu comentário lá no blog. Beijos! <3

      e-xagerada.blogspot.com

      ResponderExcluir