Botões personalizados para compartilhar posts do blog - * Blog Elaine Gaspareto *

Botões personalizados para compartilhar posts do blog

em 13/12/2016

Botões personalizados para compartilhar posts do blog

Olá, querido leitor!
No tutorial de hoje eu vou mostrar pra você como inserir em seu blog botões de compartilhar as postagens modernos, lindos e com um diferencial: o botão de compartilhar no Whatsapp!
Sim, isso mesmo!
Depois de realizar esse tutorial em seu blog o resultado será semelhante à este:


Demonstração do tutorial


Vamos lá?
Para começar abra a página com os códigos necessários à realização do tutorial e mantenha aberta:


Copiar os códigos


A seguir vá até o painel administrativo de seu blog e clique na aba Modelo.
Agora clique em Editar HTML e dentro da caixa do código-fonte tecle Ctrl+F.
Na barra de busca que expandir digite <head> e tecle Enter para localizar.
Está bem no começo dos códigos. Cole então o Código da fonte especial.
Salve.

Volte à barra de busca e digite nela ]]></b:skin> e tecle Enter para localizar.
Acima dela cole o CÓDIGO CSS.
Salve.

Agora, na barra de busca, digite <div class='post-footer'> e tecle Enter.
Provavelmente você vai encontrar 2 ocorrências desse trecho.
Estamos em busca da segunda ocorência, ok?
Abaixo disso cole o CÓDIGO HTML.
Salve.

Pronto, você inseriu os botões em seu blog!
Agora vamos às dicas extras importantes!



Dicas extras importantes - leia até o fim


O botão de compartilhar no Whatsapp só vai funcionar no celular, e se você tiver o Whatsapp instalado, claro. Nesse caso o seu template precisa estar marcado para não mostrar a versão para celular, senão os botões não aparecem...
⇒ Deixei configurado para exibir os botões de compartilhar no Facebook, Twitter, Pinterest, Linkedin, Tumblr, Google+ e Whatsapp. São os códigos que conheço e sempre uso.
 Caso você queira excluir alguma rede social basta localizar no CÓDIGO HTML o trecho referente à rede que deseja excluir e apaga-lo. Deixei uma linha de separação entre cada rede social para facilitar a localização.
Cores e fontes podem ser alteradas no CÓDIGO CSS. Leia o código, ele te dirá o que alterar.
Sempre digo isso mas nunca é demais: faça sempre em um blog de testes antes.
Pode haver algum conflito, então sempre teste antes. Sempre.
Não testei em templates baixados da internet, somente em templates nativos do Blogger.
Mas em tese funciona em qualquer template do Blogger.


Gostou?
Experimente em um blog de testes e assim que dominar o tutorial faça em seu blog real.
Aproveite e curta esse post, compartilhe... isso é o que ajuda o crescimento do blog!
Muito, muito obrigada!!!!
💕





*A imagem que ilustra o tutorial é uma cortesia Shutterstock.
34 comentários via Blogger
comentários via Facebook

34 comentários:

  1. Sempre Ajudando os outros Elaine. Que Deus lhe pague.
    Um abraço

    ResponderExcluir
  2. Oi Eliane,

    Queria muito que tivesse funcionado no meu blog. Acho esses botões muito fofos! bjs

    ResponderExcluir
    Respostas
    1. Vanessa, você testou em seu blog? Qual foi o problema?

      Excluir
    2. Eliane, não apertei nada. Kkkk continua com os botões padrão do Bloggers. Fiz tudo, inclusive a dica de desativar o modo celular.
      Tb tive probla com o arquivo em forma de calendário. Deve haver algum conflito. O calendário fica incompleto e não funciona. Bjsss

      Excluir
    3. Vanessa, sabe o que pode ser?
      A localização.
      < div class = 'post-footer ' >
      Provavelmente você vai encontrar 2 ocorrências desse trecho.
      Estamos em busca da segunda ocorrência, ok?
      Abaixo disso cole o CÓDIGO HTML.
      Experimente, pode ser isso.

      Excluir
    4. Oi Elaine!

      Refiz como você disse e os botões apareceram. Não ficaram igual como na Demonstração. Os botôes ficaram no canto esquerdo (não ficaram centralizados) e bemmm miudinhos.
      Mesmo assim fiquei muito contente porque funcionou!
      Olha como ficou no meu blog.
      https://beladomus.blogspot.com.br/

      Bjsss

      Excluir
    5. Isso aconteceu em um blog de testes meu. é que ele tem muita coisa, muito scripts e bastante personalizações. Daí dá conflito. Creio que pode ser isso que aconteceu com o seu...

      Excluir
  3. Amo suas dicas, meu blog está cada vez mais lindo
    Beijos 😘
    🎄 Lembrando que Tem post novo no ar! 🎄
    Blog A primeira Casa

    ResponderExcluir
  4. Oi, boa noite! Não encontrei os códigos 2 e 3 nos meus blogs. E agora?

    ResponderExcluir
  5. Achei os códigos, mas os recursos(todos eles na verdade, não só desse dos post) não funcionam nos meus blogs. O que pode ser? Eles não têm nenhum recurso, criei uns novos e eles ainda não têm nenhum recurso que pudesse estar interferindo :(

    ResponderExcluir
    Respostas
    1. Alice, não sei dizer pois não sei exatamente o caminho que você seguiu.
      Nos blogs que testo sempre dá certo, conforme mostro nas demonstrações.
      Em geral testo nos modelos Viagem e Simples.

      Excluir
    2. Humm. o meu modelo é o Simples, mas eu mudo o cabeçalho e o background. Acha que isso interfere?

      Excluir
  6. Adorei as dicas. Segui o roteiro e ficou perfeito. Obrigada!

    ResponderExcluir
  7. Oi Elaine, adorei o post!
    Descobri seu blog recentemente e estou adorando suas dicas. Estou melhorando o visual do meu blog, inclusive usei um dos templates que você disponibilizou num de seus posts! Estou adorando ler suas dicas <3
    http://blog321acao.blogspot.com.br/
    Esse é o meu blog caso queira dar uma olhadinha! rsrs
    beijos

    ResponderExcluir
  8. Olá Elaine..
    No meu deu super certo e estou adorando o visual.Muito obrigado!

    ResponderExcluir
  9. Que bacana Eu não conhecia a opção de compartilhar por wats, mas achei bem diferente.

    Vidas em Preto e Branco

    ResponderExcluir
  10. Oi Elaine, para inserir o codigo da Fonte Especial devemos achar head. É o primeiro passo, certo?
    Achando head fiquei em dúvida: cola o código da Fonte Especial acima de head, abaixo, em seguida?
    E outra coisa: não consigo que dê certo nos blogs testes que estou fazendo... Só direto no meu blog... Como faço para tornar o blog teste público e assim dar certo os testes?
    Muitooo Obrigada!
    Beijinhos

    ResponderExcluir
    Respostas
    1. Sara, é abaixo.
      O blog de testes tem que ser público (Configurações/básico/permissões), precisa ter posts e precisa ter o feed ativado.
      Aqui no vlog tem posts que ensinam...
      Certinho?
      bjssss

      Excluir
    2. Certinho! muito muito obrigada!
      beijossss

      Excluir
  11. Não está aparecendo a imagem dos botões, o que será que aconteceu? http://gabrielavenuto.blogspot.com.br/2017/02/inspiracoes-para-o-feed-pink-no.html

    ResponderExcluir
    Respostas
    1. Você colocou a fonte especial que faz os ícones aparecerem?
      Falta isso, eu creio...

      Excluir
  12. faz um post ensinando a fazer assinatura de post

    ResponderExcluir
  13. Já vi esses botões rodando em templates por aí, mas uma coisa me incomoda nele: qdo você compartilha no Twitter, o título do post não vai junto do link. E pra quem tem um tráfego muito alto vindo dessa rede social, colocar um tuíte sem título algum não chama atenção de ninguém. E no Themexpose todos os códigos são assim do botão do Twitter. Tentei resolver e não consegui.

    ResponderExcluir
    Respostas
    1. Sybylla, no caso dos que eu uso o título vai com o link mas aparece no corpo do link e não no corpo do tuíte, entende?
      Olha um exemplo: https://twitter.com/elainegaspareto/status/861734934670700544

      Excluir
  14. Elaine, será que tu poderia me dar 1 luz. Segui as orientações e funcionou! Mas eu resolvi troca o texto "compartilhe o post" salvei e ao atualizar a página os botões sumiram. Fechei o navegador, limpei o histórico do Google Chome, reinseri todos códigos (sem alterar nada dessa vez), salvei, atualizei a página e meu blog não mostra mais os botões, está como sempre foi pelado de botões...kkkk

    ResponderExcluir
    Respostas
    1. Grazie, seu blog está privado? Pode ser isso...

      Excluir
    2. Refiz todos os passos com o blog público mas nada aconteceu (só funcionou 1 vez e puff sumiu). Fiquei triste, eu amei seu tutorial, de todos os blogs que vi o seu foi o que tem os botões mais simples e bonitos, a maioria dos tutoriais são botões coloridos, tem que fazer cadastros em sites, é uma tranquerada.

      Excluir
    3. Eita, que coisa...
      Você colou os códigos nos lugares certos? Especialmente o que exibe os botões, tem 2 ocorrências dele, tem que ser a segunda, se colar na primeira ocorrência nada aparece...

      Excluir
  15. Muito bom. Vou usar com algumas alterações. Obrigadão.

    ResponderExcluir
  16. E esse protetor de link? Quando clica compartilhar envia pra aqueles sites chatos de proteção de links pedindo pra colocar ddd e telefone... pra liberar download... nada a ver...

    ResponderExcluir
    Respostas
    1. Lucien, não tem protetor de links. Tem certeza que viu aqui?
      Atneciosamente

      Excluir
  17. Olá Eliane, obrigado pela ajuda, fiz em meu blog e ficou muito bacana, apena o pinterest não está funcionando.
    O que deve estar errado? Grato.

    ResponderExcluir
  18. Eliane, está resolvido, era o navegador que estava bloqueando o acesso.
    Muito bom parabéns.

    ResponderExcluir

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…



Visualizações

Contando...

Dias online
Postagens
comentários