How To Add Whatsapp Smileys On Blogger Posts And Comments

images
The Whatsapp is another top chat platform that enables friends and family to communicate and also it has been on of the best.
Adding whatsapp smileys on blogger posts is one of the best feature that every entertainment blogger need to add to their blog to enable their visitors have more fun and get attracted to your blog.

Image

Step 1
First you need to Sign In to Blogger DashBoard and select your preferred blog.

Step 2
Now Select Template from the left menu >>> Edit HTML

Step 3
On your keyboard press CTRL+F and then past this and search </body>   then copy the below script just above it.

<script
src=’https://78f4de3676ac34c79dbc2146065980a0e
371905b.googledrive.com/
host/0B6AQ0cwAMPNQfnZBck56QnZHT0pSbFY1
dmtWcFFwUjJWVlNMMFg3ZW1QSmJFT2l3
RmVtTXc/js/netoops-whatapp-smileys-blogger-
posts-comments.min.js’/><a style=’display:none;’
href=’www.zealmat.com’ >bloggerwidgets</
a><script type=’text/javascript’>//
bloggersmileys.init();</script>

Step 4
Again search for this code too

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

Step 5
Then look carefully below you will see a tag like this </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://78f4de3676ac34c79dbc2146065980a0e
371905b.googledrive.com/
host/0B6AQ0cwAMPNQfnZBck56QnZHT0pSbFY1
dmtWcFFwUjJWVlNMMFg3ZW1QSmJFT2l3
RmVtTXc/imgs/comment-section1.png’/><a
style=’display:none;’ href=’www.zealmat.com’
>we speak tech</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>

Place the above code like this

</div>

Place the above code here

</b:includable>

Step 6
Again search for this code too

]]></b:skin>

Step 7
Now copy the below code and place it before the  ]]></b:skin>

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

Step 8
Finally save your template and that’s all you need.

If you have any problem feel free to comment below thanks.

About Mathias Amodu 887 Articles
My Name is Mathias Amodu, a passionate blogger with full interest in making the world a better place for upcoming webmasters in the society at large

Leave a Reply

*