[Blogger Tutorial] How to add WhatsApp sharer button for blogger site - Gurusprovince
More Quotes

Welcome To Gurusprovince.. We Aid Your Career!...

Education Technology Editing Packs

[Blogger Tutorial] How to add WhatsApp sharer button for blogger site

» » Blogspot Tutorials » [Blogger Tutorial] How to add WhatsApp sharer button for blogger site

Blogspot Tutorials

Today, we’re gonna be giving you guys an ultimate steps on how to add a whatsApp sharer button to your blogger site.

As the case maybe these days, whatsapp as been a source of traffic for bloggers in the world today due to the amazing growth in users for whatsapp.
We’d love to show you guys range at which whatsapp realizes users right from the days twas launched but we would’t go into that, in order to work in range with time(**winks**).
To achieve this, kindly follow the below steps.
Go to Blogger > Template > Edit HTML
Now, find ]]></b:skin> using CLT+ F to search in your template and above it, copy and paste the following code there:

.whatsapp a:hover {
background: linear-gradient(#01A507, #069A00);
.whatsapp i {
color: #038F02;
background: #FFF;
text-shadow: none;
font-weight: 900;
border-radius: 2px;
position: relative;
left: -3px;
margin-right: -4px;
padding: 2px;
-webkit-font-smoothing: antialiased;
.whatsapp a {
font-family: sans-serif;
font-weight: 700;
text-decoration: none;
font-size: 11px;
color: #FFF;
padding: 7px;
background: linear-gradient(#009805, #058400);
padding-top: 4px;
border-radius: 2px;
padding-bottom: 5px;
text-shadow: 1px 1px 2px #797272;

 Now, find <data:post.body/> and below it, paste the following code:

<div class=’whatsapp’>
<i class=’fa fa-whatsapp’></i>
<whatsapp expr:text=’data:post.title’ expr:href=”data:post.url”></whatsapp>
<a href=”kipu” data-action=”share/whatsapp/share”>Share</a>
@media only screen and (max-width:780px) {
div.whatsapp {display:block!important;}
div.whatsapp {display:none}

You can change the bold text to change the text that will appear on the button.
Now, search for </body> and copy-paste the following script above it:

var x = document.getElementsByTagName(“whatsapp”)[0].getAttribute(“href”);
var y = document.getElementsByTagName(“whatsapp”)[0].getAttribute(“text”);
var z = “whatsapp://send?text=” + y + ‘ ‘ + x;
document.body.innerHTML = document.body.innerHTML.replace(‘kipu’, z);

Then Save Your Template

Note: – If after placing the WhatsApp button code, if the button doesn’t show up, just find another <data:post.body/> tag and try putting it after it. You would probably find two <data:post.body/>, so try with each one.

Thats all guys!!

If you encounters any error while making use of this tutorial, kindly make use of the comment box below.

REMEMBER: Always visit for more interesting topics.


Categories: Blogspot Tutorials

0 Commments

How About A Comment?

Your Comment



Tatiana Manaois is a 21 years old female Pop Singer born in California, United States on October 22nd 1996. Her Current US based birthstone is Opal & Tourmaline. Tatiana came to limelight by showing off covers for songs of top musicians.

« | »