Botões personalizados para compartilhar posts do blog

em 13 de dezembro de 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.

Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

22 comentários , comente também!

  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

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…

Para receber os posts diariamente:

Digite seu email e receba nossas
atualizações gratuitamente



Para receber a newsletter semanal fofa e especial:

Assine minha newsletter linda!

* indicates required