Add Stylish Whatsapp Smileys/emotions to Your Blogger Posts and Comments

Social media network playing vital role on mobile platform where mobile users are connecting to their friends and sharing information and posting views on social media platform.

Whatsapp one of the favorite social media network for mobile users, every time while connecting to Whatsapp subscribers interests to share latest information to receive good comments along with expression views in the form of smileys/emotions.

If you’re attracted and addicted in using Whatsapp smielys/emotions and to share the same on blogger blog for commenting purpose for your subscribers then here we present you blogger trick for adding the same to your blogger blog.

Flat design trend rules this internet era, then why should you lay down in old design trends? Maximum number of Whatsapp users says smileys/emotions of Whatsapp are very powerful to express views in exactly what they feeling.
In this article we educate you how to add Whatsapp smileys to blogger posts and comments easily.

First Step
Sign into your blogger blog and from Blogger Dashboard
Select Template from drop down list
Click Edit HTML tab
Note: Before you implement this experiment to your blog better to backup template if anything goes wrong you can reload it again.

Now Search for code </body>
After finding code copy the below code and paste above to it

<script src='https://78f4de3676ac34c79dbc2146065980a0e371905b.googledrive.com/host/0B6AQ0cwAMPNQfnZBck56QnZHT0pSbFY1dmtWcFFwUjJWVlNMMFg3ZW1QSmJFT2l3RmVtTXc/js/netoops-whatapp-smileys-blogger-posts-comments.min.js'/><a style='display:none;' href='www.blogtariff.com' >bloggerwidgets</a><script type='text/javascript'>//bloggersmileys.init();</script>

Successful adding script to code to your blogger blog ‘Save Template’
Your blog is almost ready to show after completing next process

Step Second
Now search for code

<div class='post-footer-line post-footer-line-3'> or <div class='post-footer-line post-footer-line-3'/>

After finding code you can see </b:includable> copy the below code and paste above to it
For example after </div> ending code and before </b:includable>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
                                <div class='noopsmile' id='noopsmile' style='background-color:#E0F7FF;background:#eee; border-radius: 7px;width:634px; padding:10px; border:1px solid #ddd'>
<img src='https://78f4de3676ac34c79dbc2146065980a0e371905b.googledrive.com/host/0B6AQ0cwAMPNQfnZBck56QnZHT0pSbFY1dmtWcFFwUjJWVlNMMFg3ZW1QSmJFT2l3RmVtTXc/imgs/comment-section1.png'/><a style='display:none;' href='www.blogtariff.com' >bloggerwidgets</a><div align='right' id='close' style='font: bold 13px arial;margin-top: -14px; cursor: pointer;'> Close [x] </div></div><div id='open' style='background-color:#eee; border-radius: 7px; padding:10px;width: 87px;cursor: pointer;display:none;left: 582px;position: fixed;top: 1%;z-index:999;font-weight:bold;'> Open Smileys </div>
                              </b:if>

Final step
Search code

]]></b:skin>

After find the above code copy the below code and paste before to it

.post-body img.noops-smly {
  padding: 0 !important;
  margin-top: -2px !important;
}

That’s it you’ve done, now view your experiment after saving Template.
If you really enjoyed our article don’t forget to subscribe to us.
code credits netoops