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:
Vamos lá?
Para começar abra a página com os códigos necessários à realização do tutorial e mantenha aberta:
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, menos nos novos templates responsivos como SoHo, Comtempo, etc..
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!!!!
💕
Dias online
Postagens
comentários
Sempre Ajudando os outros Elaine. Que Deus lhe pague.
ResponderExcluirUm abraço
Oi Eliane,
ResponderExcluirQueria muito que tivesse funcionado no meu blog. Acho esses botões muito fofos! bjs
Vanessa, você testou em seu blog? Qual foi o problema?
ExcluirEliane, não apertei nada. Kkkk continua com os botões padrão do Bloggers. Fiz tudo, inclusive a dica de desativar o modo celular.
ExcluirTb tive probla com o arquivo em forma de calendário. Deve haver algum conflito. O calendário fica incompleto e não funciona. Bjsss
Vanessa, sabe o que pode ser?
ExcluirA 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.
Oi Elaine!
ExcluirRefiz 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
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...
ExcluirOi Elaine... tudo bem?
ExcluirEu não consigo colocar esses botões lindos para aparecer no meu blog. Só existe 1 ocorrência do post-footer. Tanbém não tem post-footer-3 e eu coloquei o código html no post-footer-2. Se a versão para celular estiver habilitada os botões aparecem no celular. Mas o meu template foi baixado e é adaptado para celular, se eu habilitar o modo celular muitos recursos desaparecem. Será que tem uma forma de colocar esses botões? Se puder ajudar, ficarei muito muito agradecida... bjs!! (regianesouzaatelie.com.br)
Regiane, em templates baixados ou modificados eu não sei dizer o caminho pois cada um deles possui códigos e características próprias.
ExcluirInfelizmente fico devendo...
Oi, boa noite! Não encontrei os códigos 2 e 3 nos meus blogs. E agora?
ResponderExcluirAchei 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 :(
ResponderExcluirAlice, não sei dizer pois não sei exatamente o caminho que você seguiu.
ExcluirNos blogs que testo sempre dá certo, conforme mostro nas demonstrações.
Em geral testo nos modelos Viagem e Simples.
Humm. o meu modelo é o Simples, mas eu mudo o cabeçalho e o background. Acha que isso interfere?
ExcluirAdorei as dicas. Segui o roteiro e ficou perfeito. Obrigada!
ResponderExcluirOi Elaine, adorei o post!
ResponderExcluirDescobri 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
Olá Elaine..
ResponderExcluirNo meu deu super certo e estou adorando o visual.Muito obrigado!
Que bacana Eu não conhecia a opção de compartilhar por wats, mas achei bem diferente.
ResponderExcluirVidas em Preto e Branco
Oi Elaine, para inserir o codigo da Fonte Especial devemos achar head. É o primeiro passo, certo?
ResponderExcluirAchando 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
Sara, é abaixo.
ExcluirO 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
Certinho! muito muito obrigada!
Excluirbeijossss
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
ResponderExcluirVocê colocou a fonte especial que faz os ícones aparecerem?
ExcluirFalta isso, eu creio...
faz um post ensinando a fazer assinatura de post
ResponderExcluirOBRIGADA!!!! Mesmo! :)
ResponderExcluirJá 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.
ResponderExcluirSybylla, 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?
ExcluirOlha um exemplo: https://twitter.com/elainegaspareto/status/861734934670700544
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
ResponderExcluirGrazie, seu blog está privado? Pode ser isso...
ExcluirRefiz 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.
ExcluirEita, que coisa...
ExcluirVocê 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...
Muito bom. Vou usar com algumas alterações. Obrigadão.
ResponderExcluirE 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...
ResponderExcluirLucien, não tem protetor de links. Tem certeza que viu aqui?
ExcluirAtneciosamente
Olá Eliane, obrigado pela ajuda, fiz em meu blog e ficou muito bacana, apena o pinterest não está funcionando.
ResponderExcluirO que deve estar errado? Grato.
Eliane, está resolvido, era o navegador que estava bloqueando o acesso.
ResponderExcluirMuito bom parabéns.
Amoo esse Blog de Paixão, estou amando todas as dicas, tem me ajudado demais.
ResponderExcluirElaine eu tenho uma duvida aqui, eu fiz tudo como está no tutorial mas os botões ficaram na página iniciar também, eu queria que ficasse só no post :(
Oi Eliane!
ResponderExcluirFiz e deu certo, mas os botões estão aparecendo na página inicial também. É o mesmo problema da pessoa que comentou acima. Se puder nos ajudar, agradeço muito!!!
Obrigada!
Priscila, tem que aplicar ao código HTML a condicional que oculta os botões na home.
ExcluirProcure aqui no blog As condicionais do Blogger, lá tem tudo explicado :)
o botao de Pin,it esta dando perigo ao site ficou muito estranho
ResponderExcluirSthyenne, pode ser algo em seu blog. Como vc viu no blog de testes está tudo normal, incçusive são os mesmos botões que eu uso atualmente...
ExcluirOlá, eu não consegui achar o último código na hora de editar o html e aí agora eu não sei mas acho que acabei alterando algo sem querer também...
ResponderExcluirOlá, eu não consegui achar o último código na hora de editar o html e aí agora eu não sei mas acho que acabei alterando algo sem querer também...
ResponderExcluirMariane, seu template é um dos novos responsivos do Blogger, né?
ExcluirSe for os tutoriais, em geral, não vão funcionar nele pois esses templates não aceitam personalizações.
Por isso recomendei que fizesse em blog de testes antes...
Não estou acreditando que consegui! Pra mim, mexer com HTML ainda é um bicho de sete cabeças hahaha. Muito obrigada, amei!
ResponderExcluirhttps://meujeanscorderosa.blogspot.com.br/
Muito bom quando dá certo e a gente consegue, né?
ExcluirAcredite, com persistência dá pra conseguir tudo!
beijossss
Há um jeito de aparecer esses botões para versão mobile?
ResponderExcluirNão, eles só aparecerão se o template for responsivo. A versão móbile só vai mostrar os tradicionais do Blogger, adaptados.
ExcluirVeja no menu, na aba Série de tutoriais, a Série Como tornar responsivo um template nativo do Blogger, ela vai ensinar como deixar seu template, caso ele seja nativo, responsivo...
Seu blog usa a base Simples, né? Basta então seguir o tutorial para esse modelo, torna-lo responsivo e aí os botões vão aparecer sem problema.
Conseguir colocar, mas não ficou botões grande como o daqui.
ResponderExcluirDeu certo!
ResponderExcluirObrigada, Elaine!
Parabéns, Elaine. Você ainda é um dos poucos blogueiros que dá dicas para o blogger. O meu blog tinha o botão de compartilhamento mas depois que alterou para https os botões sumiram.
ResponderExcluirFiz e refiz conforme as instruções porém os botões estão muito pequenos, sem a caixa, à esquerda da postagem, por favor me dê a dica como alterar o tamanho dos botões. Obrigada
Adelaide, eu não sei dizer o motivo, mas sugiro que faça de novo em um blog de testes limpo, sem nenhum outro script externo.
ExcluirVi por exemplo que vc colocou o script dos posts relacionados bem no começo do código fonte e ali não é o lugar ideal pra eles.
Pode ser isso que esteja conflitando.
Teste em um blog sem scripts externos, e veja se funciona pra ti...
bjsss
Olá, Elaine.
ResponderExcluirAmei o tutorial, mas quero personalizar ainda mais.
Na verdade quero adicionar os ícones que fiz para deixar com a cara de meu blog.
Estou procurando na sua lista de tutoriais algum código onde eu possa inserir a url das minhas imagens. Estou usando os botões nativos do blogger e quero manter o "Enviar por email", que ainda não vi em nenhum código disponível na web, além do "Twitter", do "Face", do "Google +" e do "Pinterest".
O do WhatsApp eu já coloquei aparecendo só no celular. Minhas imagens são simples, mas combinam com o restante. Se já tiver um tutorial onde eu possa só adicionar minhas imagens eu gostaria do link, porque não consigo acessar as postagens anteriores a julho de 2016.
Grata pela atenção, Gisele.
Olá, de novo. Já consegui, felizmente. O único que faltava eu customizei no Pinterest mesmo, mas é uma pena que é o único que não abre em outra aba ou janela.
ExcluirMuito obrigada por me fazer aprender muito sobre personalização. Se não fosse isso, eu não teria segurança para buscar soluções.
Beijos.
Olá Elaine,
ResponderExcluirTudo bem?
Obrigada por várias dicas que você divulga e inclusive por algumas que colocamos no blog PERFUME AO VENTO.
Porém, neste "script" dos botões de redes sociais o botão do "pinterest" não funciona, somente ele.
Tem alguma dica para isso?
Abraço perfumado.
Experimente reinstalar o código HTML, eu fiz uma pequena correção.
Excluirbjsss
Olá Elaine.
ExcluirMuito obrigada, de coração!
Funcionou!
Abraço perfumado!
Adorei perfeito como tudo que vc ensina,
ExcluirEu consegui mudar a cor de qqdo vc passa o mouse em cima, do resto estava perfeito não quis mexer, unica coisa que o codigo css eu coloquei onde vc informou e ai apareceu ele escrityo antes do banner do meu blog, mas ai voltei la e retirei , entrei em modelo, personalizar, avançados, add css, colei o codigo ali e funcionou perfeitamente.
obrigada mais uma vez pro salvar meu blog rsrsrs
adorei , facil de instalar , so nao me estava a aparecer aquele trexo ]]> mas depois vi que tinha espaço antes das comas e resolveu . sou novo blogger e estou ainda a aprender e adorei ficou mesmo como queria pois usava os disponibilizados pelo blogger nas postagens agora e so remover esses . ve aqui como ficou https://meuslb1904.blogspot.com/ agora vou tentar mudar as cores . um grande abraço
ResponderExcluirOi Elaine, tudo bem? No template Noele, o botão Pinterest não está funcionando. Tem alguns tutoriais seus que vi mas que em nada se assemelham com os botões que estão no template. Abrindo um parêntese, estes seus botões que está usando no seu blog são lindos! Devo tentar instalar estes ou outros e apagar? Agradeço se puder me dar um auxílio.Grata.
ResponderExcluirRegina, no blog de testes está funcionando normalmente.
ExcluirSugiro que tente instalar esses, são os mesmos, só com alguns ajustes. Ou apague só o trecho correspondente ao Pinterest e coloque o código deste no lugar...
bjssss
Olá Elaine, antes de qualquer coisa, obrigada por compartilhar todas essas dicas para personalização de Blog. São ótimas e ajuda muito! :) Gostaria de uma ajuda em relação aos botões de compartilhamento. Tentei editar o código para adicionar o botão do Instagram, porém, não tive sucesso. Poderia ajudar a adicionar o botão do Instagram? Obrigada!
ResponderExcluirOi!
ExcluirNão existe botão de compartilhar para Instagram. A rede não permite links clicáveis, então não há como gerar API que faria o botão existir e funcionar.
Elaine, tudo bem?! Apagando o trecho anterior do Pinterest e copiando não deu certo, infelizmente. Instalando estes, eles são editáveis não no blog como o outro, mas nas alterações que eu mesma fizer neste código. De qualquer modo obrigada. Vou tentar instalar estes aí.
ResponderExcluirOi Eliane, tive dúvida no terceiro passo, pois não vi nenhuma outra ocorrência além da que mencionou e aí o resultado ficou incompleto, não apareceram algumas redes. Tenho quase certeza que é localização. Ui, tá punk! Grata se puder dar um help. (https://deliciadeideias.blogspot.com).
ResponderExcluirElaine, pode bloquear a questão anterior. Corrigi, o Pinterest funciona agora, mas o Linkedin (que sempre quis) não aparece. Os botões são lindos!! (https://deliciadeideias.blogspot.com). Agradeço pela ajuda.
ResponderExcluirElaine, o botão do whatsapp não funciona, todos os outros estão funcionando, menos o do whatsapp.
ResponderExcluirGabriela, só funciona no celular, vc testou no celular ou no desktop?
ExcluirConsegui!!!!!!!!Fiquei mega feliz,infelizmente eu não havia buscado a 2° ocorrência e não deu certo.Depois fiz com a segunda e deu certo Obrigada!!Deus te abençoe Elaine,excelente trabalho
ResponderExcluirOs botões não funcionam! Ao clicar em quaisquer deles, uma nova página é aberta "em branco com o ERRO 404".
ResponderExcluirLeandro, tem certeza?
ExcluirTestei agora e todos funcionam.
Vc testou no blog de testes ou tentou em algum outro?
Elaine, muito obg por sua ajuda.
ResponderExcluirTudo aqui me é de grande valia e sua paciência e simplicidade, é sem igual!
Meus ícones do compartilhamento ficaram pequenos e na cor laranja.
Mexi nos ajudes no codigo que você postou, mas nada de ficarem grandoes e bonitos.
Tem alguma ideia do q pode ter ocorrido?
Meu blog: https://www.vanezacomz.com.br/
Abração e muito obg!
Vaneza, infelizmente não sei o que pode ter havido.
ExcluirExperimente em um blog de testes sem mais nada, se aparecerem normalmente pode haver algo em seu blog causando conflito...
ola ,porque quando compartilha o titulo nao aparece na caixa e aprece o link longo ?
ResponderExcluirhttp://charliebrownjuniormultimidia.blogspot.com
Em qual rede social isso ocorre?
ExcluirVc ativou no blog a Descrição da pesquisa?
em todas nao aparece o titulo da postagem ... só nao coloco a descrição quando eu crio uma postagem.todas minhas postagens estao sem descrição ,como vou fazer para editar uma por uma ?
ExcluirEu dei uma olhada no seu blog e sim, tem que ter descrição senão os botões vão puxar o começo do post ou o primeiro texto legível que for encontrado..
ExcluirElaine, boa tarde!
ResponderExcluiros meus botões ficaram lindos, obrigada, mas os antigos continuaram também, ficaram os dois, como faço para tirar?
Elaine,boa tarde!
ResponderExcluirEstou seguindo a série como personalizar o blog deu tudo certo, menos os botões de compartilhamento aparece abaixo dos botões 6 triângulos.
Eu retirei os códigos deles.
Parabéns muito bom seus tutoriais,bjs