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 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



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

    </body>

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

a) For previous commenting system with comments that have no reply function:


    <!--kolobok-smileys-->
   <script src='http://helplogger.googlecode.com/svn/trunk/[helplogger.blogspot.com]smileys.js'    type='text/javascript'/>
   <!--kolobok-smileys-->


b) For threaded commenting system with comments that have the reply function:

    <script src='https://helplogger.googlecode.com/svn/trunk/kolobok 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)

    </b:loop>


Step 8. Paste the following tag just after it:

    </div>


Step 9. Now find this code:

a) For previous commenting system:

    <data:blogTeamBlogMessage/>


    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'>

//<![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</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>';

}

//]]>

</script>

<div class='emoticons'>

<span id='smiley-more' style='display: none;'>

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm9YiF_Lfse1fZkrYVH-JrK-TRWziqbzo2eEa3Z8AP8Gbxap4hhLDdjaOcJa_lj1E4H2Zk1_oehQ4AixpTrNORn_MsiGiaPrKAibaHXdRS4CT_sKMhc5ZyLMY54k8NIsh0KxanKZK6y9s/s1600/smile3.gif'/>:)

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaqj5Ls9KRVLxUlD91ICjPUh9sRZN2OF2belfVqBhbuUPmMtfC20w5OeDP1YMMDUsHn1oCkoOqy9qhb5U0dKf-2vWPwJ1lfXJsRXCEhlG4tgL_eQ0q5eGX9v-8BBUYZRcRnnP5j02wqZs/s1600/sad.gif'/>:(

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjarKEfL7j3PYiqKxpk6h7KeCF4oZNVUY2p_u6AQmKVVQiH9dCN_v0C2iWw0u4X8XzecO_LN3FfwaIrrACdgKOnxiPLVMBIUHO4Sz9aHHfD2hoA_X1wxuPanlNdZBViF4YSOidL_AHfha8/s1600/taunt.gif'/>:))

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD4PFVsanFy4YgOHQtvX5JKKq0b7GJ0NZjxe5PJu7KMjjpbwNK6qM20McgQSbOkF0vhQfhCpEvUFh4mpXP1dbktIGfg21gDdSPn6r84Hr38UgdU4Vi_ef5SMm9C9d9Q2pgJJPi-_Kzatg/s1600/cry2.gif'/>:((

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheEYimZd4zyd34JVcjkUvM5St4JrrNuFcQT6dWnN6gAF8ZZaeIr5zDVL_9ai67tn19a1Q_yFHyR_w4xzQuSwx_P5cIUf68JdPAm5g6P5kIkV1GOaZnnXO2e_qnNBreq0Y3F11HCZW3f60/s1600/rofl.gif'/>=))

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ-HWRYRKNzVu_suIfnYL9WI32SOMReeZSPH9cvIkwfwUu6E0OBDlCZ9ZRC0sIti9b5LxBv03yv10tAjEo5tfQkwbC5Aaq2OQSQ5P1UQbigw04ozkW2olcxO_zsY-Fgfor0LgbQx5ExKA/s1600/suicide.gif'/>=D&gt;

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTUH8LZPsc5rPH0WuB9CXvizNekakjcFYs_nPEsAkhffAAMcBOvqfSAH5qeEyl64D770QdeOAzw6OP0E9igBqyXle_pkl_qDzlUUPg_HdL2GssByMR650Ou2av0MdqH4kiGf-CeKzStrU/s1600/biggrin.gif'/>:D

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIv-wtGB5p2AJ4TXTySebo2ss-PpSddckceOQ4bl-7hPmpS3dJy2iRRMCSx-p3Cbkectd6OIHZvwXf3IQFaX1fJFVxrQ5zghLUncRVMZ0LHHunf9WS32BRAdoTnLAZCWo3JbbUmbgky5Q/s1600/tongue.gif'/>:P

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj55KPuMHgHV-cSz3KsU-RsR2LWoXARPm81qqFk31bAxX_aMhzP9WCCP54OVt-L1bxEEo5UTw8OnKCywyC4rOMB7Z9sAzTgG4AqZOC7im4KDGLWIhlrKVWy1_mBP5LvJVuFMceLw1otC6w/s1600/shock.gif'/>:-O

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4cBpnKdjw1PmsxYLXtnINiF1Co4sW_1JeWSyUu7upBuKmmmQikJCLXRhtdZ-ztI66f-UThFb5PW9A3LO8pxQfUYrOFvhcNWeT_8gUQzZAyhBRVsU58i-mEva1zGQLdpd7uCltLgtVMoQ/s1600/think.gif'/>:-?

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGqG4D4ObP73d-ArDEfdCu6SnK4ISReoF89VNsIOXxHHLQVBzN2drwNZi5Jl1y3-buKJQIy7XQnAn1G-Z_qQMvbXMVVh4KGKA-A0u6SnR4ALbrN-XxD5h1a3W8fDVvUpk_9F5bDtlBEyM/s1600/unsure.gif'/>:-SS

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLr6Kc-MYStflT-Lz3ksOdrFIB2rHEMalcXRslIl5enulHu4ADAdS09utguQsxockG00hZQxyj-CJhSR32H1lYTQEQ-ep2YcNqvq6B0J3tXhtq4EdpjfSuDg9NwyEa4hNqO0zz1ElD1Es/s1600/flowers1.gif'/>:-f

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWPaeh9cxBZ9Jc3Q2IYfyuY-i1fzuW24TENeR435AvfxI27y6f-TEextpV5ymFM-vy1MrBlhBbYDukGUn7TD6Oaf_pRz4IPdNUsZgn7yoEpAMrSGjui1YAmn__myQzS6qxabHmK41NStI/s1600/doh.gif'/>d(

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMdQLez8F2Scsexz0tZEd51hjMdPdf-nlHRhcMoi3NaQUtWOsLQdR1ckdyhtLeWMIoOpuIrFxGYiQ4cF2jaIUFzfW4wFiCx8YQkUf1oSsfZWlWFU4RoWaS7s78D77Y8bYq3kQL-aXoOec/s1600/air_kiss.gif'/>:-*

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZcPrzCW4tiAwR1E4LN6UfHL2qoObLNBjlwI_QftQPndlzrwKP756mqyu48JWv_zVaLrWqHqbEK143hdG20jjCbTgccNK4RMta8lx1iherPVX_QehsVkZ4hd7LZHPrspAtcR5qGJ42FPk/s1600/threaten.gif'/>b-(

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWep31YK0t0pQ-Tk4KoXUDVfJYXTbB3fe_TsIfst5wdLKIkDzedLd355og6pwBsPTNDtaL8a_qkBm6OFnyX1irEPkA_qSwOm6X0oP96KhU3y5SIv0l3mFGhJaZyok2AeARN87sixAorAo/s1600/help.gif'/>h-(

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrZiSqZHThgRw0PuxTjGohFvGKB2Zx-ccdLyEptCNRMMT0SBWNyQOZ3x-OkG-fpZKWfnzywdPsP2sL7SxzmSnVYtCBG-lklB7WwXWqTL3ilhgyij2OlBggb-Yd_NoWdaO_-tIU8e45F5E/s1600/good.gif'/>g-)

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9NEDv_BIq8uRMBpIJoPJ-gSNNgGmnHUC5UzdvmIDIlNEOGwCLkpVdA9R4JA7dLgvWvhun3XSomKlTzP0M217WwXNBw_VT67Kh4hGUIWRKIjDVtfugkQ6qKow9YEF8tLE6DVyn_i0h8is/s1600/beee.gif'/>5-p

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiezsClowPJa5qiSXjqCFg3UsldHHwmlluMhe2j78rZ9oY89bLhYutR4Z9gEqgV0__ffP74Xpl_EBAKeG8b2qyKMBX1nTykp5K45sokqJK_7rL3MHZiORjsPJijIDJUsNFVd_V7wDSD_to/s1600/yahoo.gif'/>y-)

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDjFCGfWIJP7SGPZdQvmEwNsdmQTrZIkU8d46G0NpT8a7OGGIh_-kH6SAMjBUZlabgKe_3UTpJKMYQqGgcraUOEirzmoYfpz_dVruvKa-Hf14tUqnJTVvo7D_lyyP5ukPkmJzt0EFBa9k/s1600/crazy.gif'/>c-)

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigt8boT1pFsIErqb64ioPWc_K2RAw2oirKdqDyGHD4lZBXFgUZZf8yKsAsdGsaDWhmC_p7AYh74jedsYHdybR00N8PpknEzMX4sqRDWi5SGG7zd_uEucX2y_ehTFrS8LH3TCWENV9892U/s1600/spiteful.gif'/>s-)

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3xc4uKr84KtjFYI6LZ6arFkI9hY-lSSs-qRJMHZCz7_BuQWp8dSjVwdCGluqajHZWielRzwAiY9YA5QlHIqFoHTNsFpCU1cmInIr6ujP7qWJbi2vbjZb6tf_uV3zWMLkbSmtaN65cEpQ/s1600/drinks.gif'/>d-)

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdnir0nCjAnfTSXNtAyVPQ1r-S1U8cZTcbIBKiQVZYEjH7_OqMLAn5uLCcwwf_jgD986voTIE9pzomMvQuhTvUq9BAGagYHTlGh-hNWVRQg5qS4xilNHLGqTNMxZfQe6CIsA4kzmh3cKw/s1600/cheer.gif'/>w-)

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw7x5IYDOrnA37vAjoEf7Av4HBVLa-XptC4Ow91wnuOqZsNjw0q56iWaTtVPLhikw4eufHC-TdGIxAvmL8pHP0UULAHAzjwqg4tw-U1M9S_jz-zlhCrB-EpzzQkfYDVvvOO_gbpMQtxHM/s1600/hi+2.gif'/>:-h

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQeNNGOp7yW-LHP_ZDKcItuIn57XVTvSf7Xz76ASs0KOBucFpaucoJdu_zpv-JxNk-CW9sY7mTNl-PNR8Vs1uBGp6cvwvQFJ3U4fs2QOl02UyLob3jU19RNqveuiqDg9mZpDEyMbvv904/s1600/give_heart.gif'/>:X

</span>

<span id='smiley-toggle'><a href='javascript:moreSmilies()'><div style='font-size:small;font-weight:bold;'>Show Emoticons <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm9YiF_Lfse1fZkrYVH-JrK-TRWziqbzo2eEa3Z8AP8Gbxap4hhLDdjaOcJa_lj1E4H2Zk1_oehQ4AixpTrNORn_MsiGiaPrKAibaHXdRS4CT_sKMhc5ZyLMY54k8NIsh0KxanKZK6y9s/s1600/smile3.gif'/></div></a></span>

</div></b:if>


    Note: Ignore steps 11-12 if you are using threaded comments!


Step 11. Finally, find this code

    ]]></b:skin>


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!