Add Emoticons Smileys in Blogger Comments

Add Smileys in Blogger Comments
Emoticons/Smileys are a great way of making discussions more interesting and fun, so it's a pity that Blogger don't support them. In this tutorial, I will show you some simple steps on how to add some very cool emoticons called Kolobok to your Blogger/Blogspot comments, so that you and your blog visitors will be able to have an enjoyable time together.

UPDATE: Now available for threaded commenting system too!

How To Add Kolobok Smileys Emotions to Blogger Comments
Step 1.  Log in to your Blogger account and go to Template - Edit HTML

Step 2.  Click anywhere inside the code area and press the CTRL + F keys to open the search box

open the search box in blogger HTML

Step 3.  Search (CTRL + F) for this tag:

Step 4.  Copy and paste just above it, this code:

a) For previous commenting system with comments that have no reply function:
<script src='[]smileys.js' type='text/javascript'/>
b) For threaded commenting system with comments that have the reply function:
<script src=' threaded.js' type='text/javascript'/>
Note: ignore steps 5-8 if you are using threaded comments!

Step 5.  Now find this code snippet:
<b:loop values='data:post.comments' var='comment'>
Step 6.  Paste the following code just above it:
<div id='smileys'>
Step 7.  Find the following code (look carefully, it should be somewhere below the code from step 5)
Step 8.  Paste the following tag just after it:
Step 9.  Now find this code:
a) For previous commenting system:
Note: if you'll find it like 4 times, stop to the 2nd one!

b) For threaded commenting system:
<div class='post-footer-line post-footer-line-3'>

Step 10.  And add this code just after it:
<b:if cond='data:blog.pageType == &quot;item&quot;'><script type='text/javascript'>
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</div></a>';
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>';
<div class='emoticons'>
<a href="" ><img alt="Emoticons Smileys for Blogger Comments" title="Add these Smileys in your site" border="0" src="" height="20" width="100" /></a>
<span id='smiley-more' style='display: none;'>
<img src=''/>:)
<img src=''/>:(
<img src=''/>:))
<img src=''/>:((
<img src=''/>=))
<img src=''/>=D&gt;
<img src=''/>:D
<img src=''/>:P
<img src=''/>:-O
<img src=''/>:-?
<img src=''/>:-SS
<img src=''/>:-f
<img src=''/>d(
<img src=''/>:-*
<img src=''/>b-(
<img src=''/>h-(
<img src=''/>g-)
<img src=''/>5-p
<img src=''/>y-)
<img src=''/>c-)
<img src=''/>s-)
<img src=''/>d-)
<img src=''/>w-)
<img src=''/>:-h
<img src=''/>:X
<span id='smiley-toggle'><a href='javascript:moreSmilies()'><div style='font-size:small;font-weight:bold;'>Show Emoticons <img src=''/></div></a></span>
Note: Ignore steps 11-12 if you are using threaded comments!

Step 11.  Finally, find this code
Step 12.  Add this one below, just above ]]></b:skin>
.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;}
Note: if you want to change the size of the emoticon container, edit the red code.

Step 13.  Save the Template and you're done. Enjoy!

0 Response to "Add Emoticons Smileys in Blogger Comments"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel