Botões de compartilhamento responsivos para Blogger - * Blog Elaine Gaspareto *

Botões de compartilhamento responsivos para Blogger

Publicado em 17/09/2018

Tempo de leitura:

Já ensinei aqui no blog alguns modelos de botões para compartilhar posts do blog em redes sociais. E sim, esse é um dos recursos mais importantes para um blog, precisa ser eficaz e de preferência, bonitinho porque a gente gosta de boniteza, né?
Hoje quero te mostrar um modelo novo, que tem os principais botões e é responsivo, ou seja: caso seu template seja responsivo ele vai se adaptar a largura da tela, automaticamente.
Veja a demonstração:


Demonstração do tutorial


Para ter em seu blog é simples, basta um pouco de atenção e tudo dará certo.
Antes, porém, vou deixar algumas dicas:

  1. O blog precisa ser público; em blogs privados ou semi-privados os botões não funcionarão.
  2. Caso seu blog já tenha botões de compartilhar personalizados será preciso excluir antes de adicionar esses.
  3. Caso use os botões nativos do Blogger basta ir em Layout, clicar em Editar abaixo do item Postagens no blog e desmarcar a caixinha  Mostrar botões de compartilhamento.
  4. Obviamente o botão para compartilhar no Whatsapp só funciona se você estiver acessando o blog pelo celular, ok?
  5. Mesmo que você não use alguma das redes sociais que configurei não delete nenhuma. Lembre-se que os botões se destinam aos seus leitores, e eles podem usar a rede social que você não usa, e compartilhar lá seus posts. Eu, por exemplo, não uso Whatsapp mas mantive o botão.
Falou?
Agora vamos ao trabalho?
Comece acessando a página com os códigos necessários ao tutorial:


Copiar o código


Cada código é autoexplicativo, mas segue aí o passo a passo:
Acesse a aba Tema de seu blog e a seguir clique em Editar HTML.
Dentro da caixa de código que aparecer tecle Ctrl+F e na barra de busca que expandir digite </head>
Tecle Enter para localizar.
Acima de </head> cole o CÓDIGO CSS
Salve.

Agora, na barra de busca, digite <b:includable id='shareButtons' var='post'> e tecle Enter para localizar.
Abaixo disso cole o CÓDIGO HTML e salve.

Localize agora <div class='post-footer-line post-footer-line-1'>.
Note que podem aparecer 2 ocorrências dessa linha, estamos em busca da 2ª ocorrência, ok?
Abaixo dela cole o CÓDIGO DE ATIVAÇÃO e salve.
Está feito.

Dicas extras

✔️ Teste sempre em um blog de testes.
✔️ Leia o código, em geral ele te diz o que fazer.
✔️ Fez tudo e não apareceu? Releia o tutorial, e tente outra vez.
✔️ Funciona em qualquer template do Blogger, menos nos novos tipo Soho, Notável, etc...
✔️ Quer mesmo retirar algum dos botões? Será preciso localizar o trecho correspondente a ele no CÓDIGO HTML. Por sua conta e risco, ok?

Mas faça testes, se divirta!
Blogar tem que ser divertido e a gente só aprende tentando, errando pra acertar!





0 comentários via Blogger
comentários via Facebook

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.
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…