How to add Whatsapp sharing button in blogger

Hello friends! Today in this article we are going to talk about How to add WhatsApp sharing button in blogger. We will know all that How to add WhatsApp sharing button in blogger. So stay with this article to know in more detail.


You know that WhatsApp has become an important part of our daily lives today. It is an easy way to communicate with our relatives, our friends. Nowadays, everyone is running WhatsApp. Would you like to add this WhatsApp button to your Blogger blog? So if someone wants to share your content with their friends, they can easily share it.


Putting the WhatsApp share button on your blog is also important because you know that nowadays everyone is running WhatsApp and there are many groups on WhatsApp where people share their stuff. If someone shares your post in WhatsApp groups, you will benefit a lot from it. It will also drive a lot of traffic to your site.

$ads={2}

Now it comes to how to put WhatsApp share button in your blog. Below you are explained in detail how you can put WhatsApp share button in your blog. Here are some steps to follow. Then you can easily put this button in your blog.


How to add WhatsApp sharing button in blogger (Step by Step)

Before you know the steps to add WhatsApp share button, we would recommend you to make a backup of your Blog template, because if anything goes wrong then you have save your blog design safely.
  • Login to your Blogger.com dashboard
  • Click on Theme Section and then click on the Customize arrow
  • Now click on Edit HTML
  • Now click on the code section and press Ctrl+F, you will see a search bar on the display screen.
  • Copy the below code
  • Search for ]]></b:skin>, Paste the code above to this ]]></b:skin> code
$ads={2}
.share-box {
position: relative;
padding: 10px;
}
.share-title {
border-bottom: 2px solid #777;
color: #010101;
display: inline-block;
padding-bottom: 7px;
font-size: 15px;
font-weight: 500;
position: relative;
top: 2px;
float:left;
}
.share-art {
float: left;
padding: 0;
padding-top: 0;
font-size: 13px;
font-weight: 400;
text-transform: capitalize;
}
.share-art a {
color: #fff;
padding: 3px 8px;
margin-left: 4px;
border-radius: 2px;
display: inline-block;
margin-right: 0;
background: #010101;
}
.share-art a:hover{color:#fff}
.share-art .wat-art{background:#25d266;display:none;}
.share-art .wat-art.whatsapp-desktop{background:#25d266;display:inline-block;}
.share-art .wat-art:hover{background:rgba(37, 210, 102, 0.73)}
@media only screen and (max-width: 768px) {
.share-art .wat-art{display:inline-block;}
.share-art .wat-art.whatsapp-desktop{display:none;}
}

  • Now again press Ctrl+F and search for <data:post.body/> and copy the below code.
  • Paste this code just below to the <data:post.body/> code.
$ads={2}
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='share-box'>
 
          <h8 class='share-title'>Share This:</h8>
               <div class='share-art'> 

<whatsapp expr:href='data:post.url' expr:src='data:post.firstImageUrl' expr:text='data:post.title'/>
<a class='wat-art whatsapp-desktop' expr:href='&quot;https://web.whatsapp.com/send?text=&quot; + data:post.title + &quot; | &quot; + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-whatsapp'/><span class='resp_del5'> Whatsapp</span></a>
<a class='wat-art' expr:href='&quot;https://api.whatsapp.com/send?text=&quot; + data:post.title + &quot; | &quot; + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-whatsapp'/><span class='resp_del5'> Whatsapp</span></a>

</div>
         </div>
                 
      <div style='clear:both'/> 
</b:if>

  • If <data:post.body/> code is not found in your Blog template
  • Again press Ctrl+F and searchh for <div class='post-footer'> and paste the code just below of this code.

Note: If the code <data:post.body/> is present two or more than two time in your blog, then paste this HTML code in second one. If you want to show this widget in every page like homepage, post page, index page, then remove these Highlighted lines.

  • Now again press Ctrl+F, and search for </head> 
  • Copy the below code
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

  • Paste this code above the </head> tag.
  • Now click on Save theme icon.
  • I hope you guys enjoyed the WhatsApp sharing button in your blog. Now enjoy this WhatsApp sharing button in your Blogger Blog.
$ads={2}

Conclusion:

The purpose of today post is to provide you with the How to add WhatsApp sharing button in blogger. Did you like these How to add WhatsApp sharing button in blogger? You must definitely give us your feedback in the comment box below. If you also want to give us any kind of Suggestion, then share your opinion with us in the Comment Box.

Thank You!

Post a Comment

Please do not enter any spam link in the comment box.

Previous Post Next Post
close