Botões responsivos para compartilhar posts nas redes sociais - Elaine Gaspareto- Dicas para blogs e inspirações para a vida

Botões responsivos para compartilhar posts nas redes sociais

Publicado em 06/02/2020

Já ensinei aqui no blog algumas opções em botões personalizados para compartilhar as postagens do blog nas redes sociais. Recorde:

Hoje quero ensinar esses, que são totalmente personalizáveis, responsivos e muito bonitinhos.
Vamos trabalhar?

Botões responsivos para compartilhar posts- para Blogger


Quando terminarmos o resultado será este:

Demonstração do tutorial

Para começar acesse o painel do blog onde deseja inserir os botões e clique na aba Tema.
A seguir clique em Editar HTML e dentro da caixa de código que abrir tecle Ctrl+F.
Na barra de busca que apareceu digite </head> e tecle Enter para localizar.
Acima dessa tag de fechamento cole o CÓDIGO JAVASCRIPT e salve.

Agora localize a tag de fechamento ]]></b:skin> e acima dela cole o CÓDIGO CSS.
Salve.

Estamos finalizando.
Localize, na barra de busca, a linha <div class='post-footer-line post-footer-line-1'>
Aparecerão (provavelmente) 2 ocorrências dessa linha, estamos em busca da 2ª ocorrência, ok?
Achou? Cole o CÓDIGO HTML abaixo da linha localizada e salve.
E está feito!
Simples demais, né?
Ah, claro, os códigos para copiar e usar:

Copiar o código


Dicas extras de personalização dos botões para compartilhar posts

Tem só 3 dicas extras:

  1. No CÓDIGO CSS você altera cores e fontes caso deseje. Sem mexer em nada o resultado será exatamente como o meu.
  2. Onde grafei em vermelho no código são as palavras que você pode alterar se desejar. E onde está minha @ do Twitter (@elainegaspareto) troque pela sua e salve.
  3. Esses botões são responsivos, portanto são destinados a temas responsivos. Mas pode usar em tema não-responsivo, dá certinho.

Pra finalizar: este tutorial não se aplica aos modelos Soho, Contempo, Notável e Empório do Blogger, e nem aos modelos de visualizações dinâmicas.
De resto pode usar em qualquer tema, dos nativos aos modificados.

Importante: os códigos originais eu os encontrei em vários blogs gringos, mas pela data, até onde consegui identificar, o primeiro a publica-los foi o blog Blogger's Origin. Fiz algumas alterações no código original.

Se tiver alguma dificuldade que não tenha sido contemplada no tutorial diga sua dúvida nos comentários e eu ajudo assim que possível!
Enjoy!






Nenhum comentário:

Postar um comentário

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Deixe sua pergunta ou solicitação sempre nos comentários, eu infelizmente não tenho como responder pedidos de ajuda por email.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…