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

.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;
}

<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>
</div>
<style>
@media only screen and (max-width:780px) {
div.whatsapp {display:block!important;}
}
div.whatsapp {display:none}
</style>

<script>
//<![CDATA[
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);
//]]>
</script>

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.