How To Add WhatsApp Share Button In Blogger Website

How To Add WhatsApp Share Button In Blogger Website 

If you want to put WhatsApp Share Button in your blogger site then you can easily install WhatsApp Share Button by putting the below code in your blogger HTML. The entire process of applying WhatsApp Share Button in blogger is described below.

Step 1)

1. First you login to Blogger.

2. Then   click on the Theme option.

3. Then click on the  Edit HTML  option.

4. Then 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.

5. After that, search inside the search box by   typing ]]> </b: skin> .

6. After that you copy the below given CSS code and paste it 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 search for </head> by  typing in the search box  . Then copy the below given JAVA SCRIPPT code and paste   the top of the </head> tag.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<script>

$(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)

After pasting the JAVA SCRIPPT code   above the </head> tag, you now copy the HTML code below and paste the HTML code below with your other share buttons in place. If the share button is not already installed in your website, then search by  typing <data: post.body /> in the search box  . Then   paste this HTML code under the <data: post.body /> tag. (Keep in mind -  you can find this code more than once by searching for <data: post.body /> code inside HTML,  so you have to paste this HTML code just below the last code.)

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

After putting all the codes   properly, click on Save Template. Now WhatsApp Share Button is installed in your  blogger website.