Tuesday, 30 May 2017

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

[Blogger Tutorial] How to add Whatsapp sharer button for blogger site
Hi guys! Welcome to another 360GpTech tutorial.

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


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:

<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>

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.

No comments:

Post a Comment


About Us | Contact Us | Disclaimer | Terms And Conditions
All Rights Reserved 360GpTech
© 2017