Adicionar um botão do WhatsApp ao seu blog no Blogger é uma ótima maneira de facilitar a comunicação com seus visitantes.
Aqui está um tutorial passo a passo para ajudá-lo a usar o código fornecido , a imagem que iremos utilizar aqui é uma criação nossa e concedemos a você o uso sem restrições.
Como sempre primeiro vamos apresentar o código.
Para usar é bastante simples, somente vamos ressaltar aqui que o código é mais uma de nossas adaptações para o Blogger , se você usa WordPress ou sistemas PHP esse código pode ser melhorado com adições de API ou outros sistemas bastante interessantes.
Ok , vamos entender o código e explicar como usar no blogger
A linha:
.<a href="https://wa.me/551199999999" target="_blank">.
É o link que chama é redireciona para whatsapp,
Você deve substituir o número de telefone que você deseja usar ( nescessário adicionar código do país + código de área antes do número usamos 55 por que é o código do Brasil )
Mantenha ( target=_blank ) isso chama a abrir o whatsapp em uma nova página mudar isso pode causar instabilidade. ( A menos que você esteja integrando api )
Agora na linha:
<img src="" alt="WhatsApp"
Aqui é onde vamos inserir a imagem para nosso botão entre ( <Img src="link_ imagem_que_vamos_usar")
O atributo ( alt , da a descrição da imagem, no nosso caso WhatsApp)
Na linha:
style="width:200px;height:50px
É onde vamos dar os comandos para diminuir ou aumentar a imagem do botão.
Agora vamos a imagem que vamos usar no botão.
Certo agora para usarmos a imagem dentro do link podemos copiar o link de onde a imagem está.
Isso pode ser de uma página ou postagem que você pode usar para hospedar Imagens, e posteriormente usar apenas o link de onde a imagem está hospedada , podemos fazer inúmeras coisas nesse sentido.
Para usar a imagem no código , podemos simplesmente clicar sobre ela e copiar o endereço do link , ou abrir a postagem ou página onde a imagem está hospedada e copiar o seguinte código ( no editor HTML ).
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj05KS_80GT_TDXKG5mWR_PAr2r6H6hUHgJips1WFjVc5aHReUEGS_jsaNt8JyfJMizhjwgw3ivtUogUucpGgfoO9Xf47q5zma5FX3GzZHLLcJCn34vAEHzuny6uNpec7B-tDpvFeC-lhX8G5G1Zjn8PP9HongcjFOH6d11JDEXYyKv9cT58cV4lCeXMKBf/s300/Entre%20em%20contato%20pelo%20whatsapp%20e%20fale%20com%20um%20consultor_20241111_184144_0000.png
Lembre-se que o código deve sempre começar com https e terminar em PNG , essa é a área onde devemos fazer a cópia.
Agora utilizando o código inicial vamos inserir o link do botão.
<a href="https://wa.me/5511999999999" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj05KS_80GT_TDXKG5mWR_PAr2r6H6hUHgJips1WFjVc5aHReUEGS_jsaNt8JyfJMizhjwgw3ivtUogUucpGgfoO9Xf47q5zma5FX3GzZHLLcJCn34vAEHzuny6uNpec7B-tDpvFeC-lhX8G5G1Zjn8PP9HongcjFOH6d11JDEXYyKv9cT58cV4lCeXMKBf/s300/Entre%20em%20contato%20pelo%20whatsapp%20e%20fale%20com%20um%20consultor_20241111_184144_0000.png " alt="WhatsApp" style="width:200px;height:50px;" />
</a>
Deverá ficar dessa forma , lembre de colocar o link da imagem dentro de ( src=" meu link de imagem.PNG" ) as aspas " " são extremamente importantes em um documento HTML, sempre verifique o fechamento para evitar erros.
Certo agora vamos visualizar nosso botão e ver se tudo sai como esperado.
Agora temos o botão + o código de redirecinamento já implementados clicando no botão você será direcionado para o whatsapp!!
Para aumentar ou diminuir o botão
De comandos
Na linha:
style="width:200px;height:50px
Use ( width para largura ) e (a height para dimensionar a altura ) isso deve ser feito no código.
Após isso basta implementar de maneira como desejar, podemos usar em roda pés, páginas , postagens ou onde você achar nescessário.
Com isso espero ter ajudado, dúvidas informe nos comentários!!
Abaixo deixei algumas opções de imagem para botões que podem ser usadas, contendo ícones gratuitos.
Abaixo de cada imagem deixei um botão de download clicando você será direcionado para uma nova aba para facilitar o download.
