31 de mai. de 2018

#MundoDaBlogosfera: Botão de compartilhamento no Blogger


#MundoDaBlogosfera: Botão de compartilhamento no Blogger


Oi gente!! Depois de muito tempo resolvi dar continuidade a séries de posts sobre blogosfera. Dessa vez é sobre algo bem diferente do que já postei aqui, já digo que não tenho nenhuma experiência com html mas me arrisco muito a tentar e amo demais tudo relacionado a esse mundo de códigos. Não sei vocês chegaram a perceber, mas mudamos algumas coisinhas aqui no blog e em breve vamos mudar mais um pouquinho. Uma coisa que estávamos sentindo falta aqui no blog era os botões de compartilhamento. Descobri que esses botões são essenciais e fazem falta demais nos posts. 

Estou sempre testando vários códigos que encontro na internet, alguns dão certo outros não. Mas esse trago para vocês hoje deu super certo. O modelo base é da Renata Massa, mas eu editei do meu jeito e gostei bastante do resultado. Espero que gostem e podem editar de acordo com o gosto de vocês também. 

Vá em TEMA, depois EDITAR HTML. Dentro da caixa de códigos aperte CTRL+F e pesquise por:  <div class='post-footer-line post-footer-line-2'>


#MundoDaBlogosfera: Botão de compartilhamento no Blogger

Irá aparecer dois códigos desse, você vai usar o 2º. Embaixo dele cole esse código: 

<span class='compartilhamento'><img alt='' class='compartilhe-amor' height='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpfnUvt0HACPuhPaPgr_GwHE2YlyQlxpXMTkICBgbj9PqoRZtUAO_f66egrcfIc7fyzvHirr7QlAiEe2lF9cC1rpee_WBal1RRSvmP_EKX7EWcTyY0kBP9alheN0EzUweQMS2tE64t6J4/s1600/tranparente+pequena.png' width='0'/>
<!-- share buttons -->
<a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url' target='_blank'><img class='acende' hspace='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQdYmln_FKhsovDygaQqCrlf5fDzU80vUE-zMvS8n9caGS5H9JTG2gjNUR3bZc3r-Klyx6rt0NlIwfSmMgTLqf8YX40nCKRZRAw3ybhZEFR_-6BdJMa8iHn2J2gwK3EpxnJX2tnuqqvWA/s1600/facebook.png' title='Facebook'/></a>
<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' target='_blank'><img class='acende' hspace='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP-2E4lyX5flFByKG601CKLa9dnwNdAiee46WCE6GyNEt1ROgOldwATIT4opRqYFHkUhmKFXTTqXLfRwjZDYDX6b52KBpQQ4bGs3VGT68pS0Vx-gdyUBQEMv5nri-OX3VNEsMOPpmmw10/s1600/twitter.png' title='Twitter'/></a>
<a expr:href='&quot;https://br.pinterest.com/share?url=&quot; + data:post.url' target='_blank'><img class='acende' hspace='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKGB-hQ7VNy-lJOLhSUqeNqWICNv3YwAI_5JfuLG4RVqXnxPSnrn2IUe8l7UN5ZtMbpGPcVJ-L0BALgu5oHeoSg9rNkIMWuAkqT8XwMhTPCnF4_F8qxEca4REdr7-M17aix4RqpjcNJaM/s1600/pinterest-logo.png' title='Pinterest'/></a>
<a expr:href='&quot;http://www.tumblr.com//share?url=&quot; + data:post.url' target='_blank'><img class='acende' hspace='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_1jgYbDBFT9lVE0SAcFosjrzJm7oHW3NU58hUNBleqX_OoDv7xStLXyP-1EMheE0WnVqSWldgXLEr_aZ3AZarNiogdNqDG77tjyw1tjrbiZJ54DRrBoGBfFhWEhTXPyiwSEEsp2gp49o/s1600/tumblr-letter-logo.png' title='Tumblr'/></a>
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' target='_blank'><img class='acende' hspace='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi02I6od1gUr5kByAsqI3StYpD8TOciwP0GOMBvLk3q88srvACk44ddnx6I7YekbHKTeKpEKYN6n8byzBV9viMWj7G9k15z2Yd_gTWxQ5ahBJ0hSuKcCWQZ6XUVPfkmY0jYjKxDP7HQM_U/s1600/google-plus.png' title='G+'/></a>
<a expr:href='&quot;whatsapp://send?text=&quot;  + data:post.url' target='_blank'><img class='acende' hspace='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiPCaw4b2buQ5WsN3K3cwltNMwLQ1M4Ron0xxajcYEZp8SKpQ1_l8V6ws4x0FbZTlsjmfFLMOmN5t_i3XWUjGHklDUVfC3NUTMZM0WGb-4-JUJsP4saVb-Bh9P1c8JwKtHvJ_wCCgWjmE/s1600/whatsapp-logo.png' title='Whatsapp'/> </a>


<!-- share buttons -->

              </span>

  • O resultado fica assim:


#MundoDaBlogosfera: Botão de compartilhamento no Blogger

Para mudar os ícones é só trocar os links em negrito pelo das imagens que quiser. Basta hospedá-las e depois colar o endereço no lugar dos de negrito. Um site ótimo para baixar ícones é o Flaticon

Se tiver alguma dúvida em relação à minha explicação é só me perguntar que vou fazer o possível para te ajudar! Lembrando que antes de fazer no seu blog oficial, faça em um blog de teste. 

Beijos mil!

POSTADO POR


21 comentários:

  1. Ótima dica e fácil de aplicar pra que não manja muito de HTML(assim como eu, hehe).
    Beijinhos

    https://glamour-02.blogspot.com/

    ResponderExcluir
    Respostas
    1. Poies é Mary, é bem fácil mesmo, até eu que não tenho tanta habilidade em html consegui editar direitinho.

      Beijos pra você também! <3

      Excluir
  2. Com certeza uma ótima dica.
    O meu já tem os botões porque é layout pronto e pago.
    Mas se não tivesse acho que não saberia colocar.
    Beijos!
    http://www.pamlepletier.com/

    ResponderExcluir
    Respostas
    1. Normalmente os layouts pagos vem com esses botões mesmo, o que é ótimo pra quem não sabe mexer com essas coisas.
      Beijos <3

      Excluir
  3. Eu adoro esses tutoriais! Tenho blog desde 2012 e o que tem me salvado são essas dicas para a gente ir personalizando os layouts e ir conseguindo montar nós mesmos nosso blog ☺ Adorei! Os Delírios Literários de Lex

    ResponderExcluir
    Respostas
    1. O mesmo acontece comigo, o que me salva são esse tutorias que a gente vê por ai. Alguns nem dão certo, mas tento sempre, primeiro em um blog de testes.

      Beijos <3

      Excluir
  4. Olá, meninas! Tudo bom?
    Gostei bastante da dica, ainda mais que é algo super fundamental para o nosso cantinho. Eu também gosto sempre de me aventurar nesse mundo dos tutoriais, principalmente de HTML, aprendi bastante coisa assim. Parabéns pela iniciativa do tutorial! Aliás, esse layout está muito lindo e deixo uma sugestão para vocês deixarem ele ainda mais bonito: modificar as cores dos comentários, pois eles estão com o rosa sendo predominante, sendo que o restante do layout a cor que predomina é o azul. Ou acrescentar um pouco mais de rosa nos demais detalhes do layout, fazendo uma mistura das duas cores, acho que ficaria bem legal. Qualquer coisa, se precisarem de ajuda, é só entrar em contato.
    Um grande abraço!
    Com amor,
    Blog Newmore

    ResponderExcluir
    Respostas
    1. Oiii!! Tudo ótimo! Tava pensando em mudar mesmo, por causa das outras cores. Tá um pouco destoado mesmo. Mas mesmo assim muito obrigada pela dica!!

      Beijão

      Excluir
    2. Oii de novo kkk. Mudei!! Ficou melhor mesmo. Obrigada pela dica.

      Beijos <3

      Excluir
  5. Respostas
    1. Bem fácil mesmo Letícia. Até quem não manja muito no HTML consegue fazer essa mudança.

      Beijos <3

      Excluir
  6. Ai, adoro esses tutoriais que ajudam tanta gente a ir disseminando mais conteúdos! Que lindezura explicativa e tão bem detalhada. Maravilhoso!

    semquases.com

    ResponderExcluir
  7. Amei suas dicas, esse botão faz toda a diferença, pois ajuda muito na divulgação do site!

    www.kailagarcia.com

    ResponderExcluir
  8. Ótima dica, até favoritei! Eu mesmo mexo no layout do meu blog, então é sempre bom guardar tutoriais assim. Tenha um ótimo dia, beijos!

    Blog Paisagem de Janela
    www.paisagemdejanela.com

    ResponderExcluir
  9. ah que dica bacana, já vou colocar no meu blog

    www.tofucolorido.com.br
    www.facebook.com/blogtofucolorido

    ResponderExcluir
  10. Eu gosto muito desses posts com tutoriais, espalhando conhecimento 💕 obrigada por compartilhar!

    beijos.

    vitoriamartini.com

    ResponderExcluir
  11. Ai que dica ótima! Parece bem simples de fazer!

    Beijo!
    Cores do Vício

    ResponderExcluir
  12. muito bom o tutorial, mais eu queria centralizar como faz?

    ResponderExcluir
    Respostas
    1. Oi!! Então, eu não sei ao certo porque quando eu fiz o tutorial já ficou centralizado certinho.

      Qual o endereço do seu blog? Talvez entrando no código fonte eu consiga centralizar para você

      Excluir

Seja muito bem vindo(a)!

♥ Nos conte o que você achou da postagem ou do nosso blog.
Pode dar sugestões, ideias, temas.

♥ Deixe o link do seu blog pra visitarmos.

Volte sempre e obrigada pela visita!