How To Install Emoticons/Smileys In Blogger Comments

Emoticons are the combination of the word "emotion " and " icon " which means the icon that is used to express the emotions and " icon " which means the icon that is used to express the emotions of a written statement, and it helps to change and improve the interpretation of the text.

Also Read: How To Install Emoticons/Smileys In Blogger Comments

As you can see Emoticons/Smileys I have installed inside comment box, may be you are curious to know how to add Emoticons/Smileys in blogger comment box like it.

Well this time I'm going to share how to install emoticons in blogger blogspot inside comment box. so lets see tutorial.

Also Read: How To Add Professional Author Box In Blogger Below Post

How To Add Emoticons/Smileys In Blogger Comments :

 

In the process of editing your template, a mistake might be made, so remember before installing / editing the template should be backed up.

1. Go to Blogger Dashboard > Template >  Edit HTML
2. Search for </head> 
3. Copy the code below and place right before/above the </ head > tag

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script src="https://ivyth.googlecode.com/svn/js/emoticon.min.js" type="text/javascript"></script>

Note :  If there is already a jQuery library in your template, the code on line-1 should not be copied .

4. Copy the code below and place right before/above the </ body>   

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function () {emoticonx({
emoRange:"#comments p, div.emoWrap",
putEmoAbove:"iframe#comment-editor",
topText:"Click to see the code!",
emoMessage:"To insert emoticon you must added at least one space before the code."
})
});
//]]>
</script>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function () {emoticonx({
emoRange:"#comments p, div.emoWrap",
putEmoAbove:"iframe#comment-editor",
topText:"Click to see the code!",
emoMessage:"To insert emoticon you must added at least one space before the code."
})
});
//]]>
</script>
</b:if>

If you are finished , click Save Template and see the results.

If you want to change it. You can see complete default Script below:

Property	Description
topText	Sentence below the emoticon sample
emoMessage	Sentence below the emoticon sample and alert box
emoRange	The place where emoticon/smileys will appear
putEmoAbove	The place where the sample emoticons will be placed

 

Final Words!

If you have any questions or facing problems while installing emoticons/smileys let me know it in comment box. and don't forget to join our newsletter to get fresh updates directly in your inbox !