Add Animated Emoticons and Smileys to blogger comments

Implementing tricks and following tips of SEO can fetch visitors/readers to blog but those who subscribed already to blog managing them are very high charge. Every time posting a new article educating them attracts more subscribers to blogs makes sense. BlogTariff is going to present one of trick how to attract subscribers and make them enjoy by adding “Emoticons smileys” to blogger comments. Let’s begin the tutorial here.

LIVE DEMO

How to Add “Emoticons smileys” to blogger comments

Sign into your blogger account
Click “Design (Layout in the new blogger Interface) Page elements”
Click on “EDIT HTML” link tab (Before you do experiment this tutorials backup your template if any thing goes wrong you can reuse it again)
Tick on “Expand widget Template” box
Search for code

</body>

After finding the code copy the below code and paste above to it

<!--omlitech-smileys-->
<script src=' http://www.blogtariff.x10.mx/jsfiles/%5bblogtariff.com%5dsmileys.js' type='text/javascript'/><noscript><a href='http://www.blogtariff.com/2012/06/add-animated-emoticons-and-smileys-to.html' target='_blank'><span style='font-size: x-small;'>Add emoticons</span></a></noscript>
<!--omlitech-smileys-->

Now search for code

<b:loop values='data:post.comments' var='comment'>

After finding the code copy the below code and paste above to it, as shown in the image

<div id='smileys'>

Search for code

</b:loop>

After finding the code copy the below bit code and paste after to it, as show in the below image

</div>

Now search for code

<data:blogTeamBlogMessage/>

After finding the code copy the below bit code and paste after to it

<script type='text/javascript'>
//<![CDATA[
function moreSmilies() {
    document.getElementById('smiley-more').style.display = 'inline';
    document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:lessSmilies()"><div style="font-size:small; font-weight:bold;color:#000000;">Hide Emoticons /<a href="http://www.blogtariff.com/2012/06/add-animated-emoticons-and-smileys-to.html">Add Emoticons</div></a></span>';
}
function lessSmilies() {
    document.getElementById('smiley-more').style.display = 'none';
    document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:moreSmilies()"><div style="font-size:small; font-weight:bold;">Show Emoticons</div></a>';
}
//]]>
</script>
<div class='emoticons'>
<span id='smiley-more' style='display: none;'>
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/smile3.gif'/>:)
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/sad3.gif'/>:(
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/laugh.gif'/>:))
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/cray-1.gif'/>:((
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/rofl-1.gif'/>=))
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/suicide-1.gif'/>=D&gt;
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/biggrin2.gif'/>:D
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/blum.gif'/>:P
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/shok.gif'/>:-O
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/eusa_think.gif'/>:-?
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/unsure.gif'/>:-SS
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/flowers1-1.gif'/>:-f
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/doh-1.gif'/>d(
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/air_kiss3.gif'/>:-*
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/threaten-1.gif'/>b-(
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/help2.gif'/>h-(
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/good-1.gif'/>g-)
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/beee-1.gif'/>5-p
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/yahoo2-1.gif'/>y-)
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/crazy3-1.gif'/>c-)
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/spiteful.gif'/>s-)
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/drinks-1.gif'/>d-)
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/cheer-1.gif'/>w-)
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/hi-1.gif'/>:-h
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/give_heart-1.gif'/>:X
</span>
<span id='smiley-toggle'><a href='javascript:moreSmilies()'><div style='font-size:small;font-weight:bold;'>Show Emoticons <img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/smile3.gif'/></div></a></span>
</div>

At last, now search for code

]]></b:skin>

After finding the code copy the below code and paste above to it

.emoticons {-moz-background-clip: -moz-initial;-moz-background-origin: -moz-initial;-moz-background-inline-policy: -moz-initial;text-align: left;width:400px;}
.emoticons a, .emoticons a:hover {margin-left: 20px;text-decoration:none;}

Customizations:-

If you need to change the container size according to your blogger blog main content size then edit as highlighted in Blue.
After successful modification now “Save the template” and preview your blog, how its looks

Acknowledgment:-

If you've facing any difficulty in execution of the above to your blog bring to us we try for you. 
If you enjoyed this post let know your views and Suggestions, we always appreciate your comments.