How to add Whatsapp Share button in Blogger?

I have received few mails to write a blog regarding How to add Whatsapp Share Button?? So today I am going tell you how to add WhatsApp Share Button in your Blogger website. You can easily add WhatsApp Share Button by adding the below CSS codes in your Blogger HTML in just 3 steps. The entire process of adding WhatsApp Share Button has been described step wise. Follow these steps to get Whatsapp Share button on your blog.

STEP 1

.Login to your Blogger account.

Click on the Theme option(available on left side of the dashboard)

Then Click on Edit HTML option in sub menu.

After that, click once in the HTML area and then press ctrl + f from the keyboard. Pressing ctrl + f from the keyboard will open a search box.

Then search ]]></b:skin>(withthe help of that search box)

After that paste the given below CSS code over]]></b:skin>

.tist{background:#35BA47;

color:#fff;

padding:2px 6px;

border-radius:3px;}

a.tist:hover{color:#fff !important;}

STEP 2

After pasting the above CSS code, now you search </head> in the search box.
Then paste the given below JAVA SCRIPT code on the top of the </head>

$(document).ready(function() {

$(document).on("click", '.tist', function() {

if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {

var text = $(this).attr("data-text");

var url = $(this).attr("data-href");

var message = encodeURIComponent(text) + " - " + encodeURIComponent(url);

var whatsapp_url = "whatsapp://send?text=" + message;

window.location.href = whatsapp_url;}

else {alert("If you want to share on WhatsApp, Then please use Mobile Device");}});

});

</script>

STEP 3

Just one more step and you will see Whatsapp Share button on your blog.

<a class='tist' expr:data-href='data:post.url' expr:data-text='data:post.title' href='#'>WhatsApp</a>

Now copy the HTML code given below and paste the HTML code below with the other share buttons
(You can find the hlml codes for share by typing twitter,facebook etc).

But in case there are no share buttons installed in your website, then you can search for <data: post.body /> in the
search box. Then paste the given HTML code under the <data: post.body /> tag.

Remember -You may find this code more than once by searching for <data: post.body /> code inside

HTML, but you have to paste this HTML code just below the last code.) At last do a Recheck and click on Save Theme to save your theme. Now you can find the WhatsApp Share Button installed in your blogger website. Hope you will find
it helpfull.

If You have any problem with this post do let me know in the comment section below