Sep 11, 2016

How To Add Whatsapp Share Button in Blogger [Custom Design]

data:blog.title
Do you want an Add Whatsapp share button in your blogger blog? Today in this post I'm here to share a Whatsapp share button with all of you and it is a custom design. If you want to add some more social buttons with Whatsapp share button, then you can use our stylish design horizontal social share bar with animated counter effect.

WhatsApp Share Button, WhatsApp Custom Button

Why Should You Use WhatsApp Share Button?

Due to highly increasing of smartphones, Nowadays Whatsapp is declared as the most used social network. Back in the year 2009, Nobody guesses that it would be leaving Facebook behind in the user graph when Whatsapp launched. If you want to increase social traffic to your blog, then Whatsapp is the best choice. So I highly recommend you to add it to your blogger blog and increase free traffic.

If you want to see a live demo, then click on below button to see it live.

Live Demo

Did you like it? If yes, then let's get started and add it your blog with following few below steps.

Must Read - Warning! Blogging is Not For You If You Don't Have These Qualities.

How To Add WhatsApp Share Button in Blogger?

 Note:  Before doing any customization inside your blogger template code area I highly recommend you to download a backup copy of your blogger template code area.

STEP 1] Go to blogger.com >> Click on Template and after that click on Edit HTML button.

STEP 2] Now paste below code just after of ]]></b:skin> tag inside your blogger template code area.


 <b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<style type='text/css'>
/**************************************************************************
WhatsApp Share Button By MyBloggerGuides.com (custom design)
**************************************************************************/
.Whatsapp-share{margin:5px 0px 5px 0px ; width:100px;}
.Whatsapp-share .button_custom { background: #43d854; }
.Whatsapp-share .button_custom:hover { background: #23d854; }
.Whatsapp-share li { position: relative; text-align: center; list-style: none; list-style-type: none; padding: 0px; border-left: 0 solid rgba( 0,0,0,.4); height: 40px; margin-bottom:-6px;  overflow: hidden; display: inline-block; box-sizing: border-box; background: none; box-sizing: content-box; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.Whatsapp-share li a {
display: inline-block; box-sizing: border-box; padding: 0px px 0px 0px; cursor: pointer; text-decoration: none;  }
.Whatsapp-share li &gt;a:hover::before {
Content:&#39;Share it&#39;; color: #fff !important;  font-family: Oswald; font-size: 18px; font-style: normal; font-weight: normal; line-height: 0.8em; -webkit-transition: all 0.9s ease-in-out; -moz-transition: all 0.9s ease-in-out; -ms-transition: all 0.9s ease-in-out; -o-transition: all 0.9s ease-in-out; transition: all 0.9s ease-in-out; bottom:-10px;  position:relative;}
.Whatsapp-share li:hover i{
opacity: 0.8;   margin-top:50px; }
.Whatsapp-share li i { width:83.5px;
color: #fff !important; font-family: FontAwesome; font-size: 30px; font-style: normal; font-weight: normal; line-height: 0.8em; float:left; padding:8px; height:40px;  background-color: rgba(0,0,0,0.1); border-down-right-radius:90px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
</style>
</b:if>

STEP 3] Using CTRL+F search for <data:post.body/> tag inside your blogger template code area and paste below code just above/below of it.

 Note:  <data:post.body/> code is located twice or thrice, so you have to paste below code just before/after of the second appearance.

 Note:  If you want to add it just below of the title then paste below HTML code just before of <data:post.body/> code and if you want to place it in the footer of the posts then paste below code just after of <data:post.body/>.

<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<div class='Whatsapp-share'>
<div class='button_custom'>
<li>
<a expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot; &gt;&gt; &quot; + data:post.url' rel='nofollow' target='_blank' title='Share on whatsapp!'><strong><i class='fa fa-whatsapp'/></strong>
  </a>
  </li>
</div>
</div>
</b:if>
 Note:  Whatsapp button is only shown in smartphones, And if you want to show it on the desktop too, then remove red highlighted conditional tags from the above codes (From Both CSS & HTML Part).

STEP 4] Using CTRL+F search for <head> tag and paste below FontAwesome Stylesheet code just below of it.

 Note:  If you have already FonAwesome StyleSheet in your Blogger Template then skip this step and head over to next.

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css' rel='stylesheet'/>

STEP 5] Now click on Save Template button.

That's it. Too easy, Right? :)

Don't Ignore - How To Index Your New Blog Posts to Google Super Fast? [Just In one Minute]

Conclusion:

So above guide is about How To Add Whatsapp Share Button in Blogger? I hope you will like it. If you like it, then don't forget to share this article with your blogger friends. I tried my best to make tutorial easy, but in any case, you are facing problem then let me know by dropping a comment below. I'll help you out of sure. Don't forget to subscribe us.
Thank You! Stay Blessed, Stay Happy! :)

No comments:

Post a Comment

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.