How to Add Emoticons/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!

DEMO

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/AVvXsEint7t9gN_nCFiBIK4fplB-6f8wEXt9fMwlYblWKIdKL_WugijnQpPJlMCWvDihMCC0J1P1410qLlocTx9T0SQ_gaQK8D9_ZXRhvVNuxVaf4rgmtH7nHmu8dsA4CmTJK5gzlk8mMLSB1os/s1600/smile3.gif'/>:)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9dp__qY21uG5L6WgckLjNAwQtJKimRDJdkdHn4OKQqAHS2aHqX92oDtOmKXDj3fPrpA0F1uLOHBr5tUJEDWsArMQcIRkfWwaZXNM-acaZ_goa2ahsZXLLjqeOgraT24_nh0cNSxYlfZI/s1600/sad.gif'/>:(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvLz4h7-0-ajtOt29oATWS84asBpXExehPrmQP6g1TUsClK_XD9azCZV3bn6kwVZr20bg3HYS_ezSzvbVinDiZ7gVbyZR_k2r_STTYmCjwVWcaMBprlodkmBwGZ9Kap33Y12UGKIUjTJk/s1600/taunt.gif'/>:))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3hBgycmDYAFQ94gHHp7yuk6NCGqwTvv3-WzQaL_QlmryA9ue0To8D0OHx9BQrA6kSLLvbV709eogbyj9KOlk7c36bemToSxERDLIx6-hQWkvtRCW05quJULKHm6iwFAkKx1WD1YMWGT4/s1600/cry2.gif'/>:((
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXaVwLhO0bnjN2L7lzc4I_UF5sjyPu7bQL9LTqV1rJttxD1nv_NovZ2Bdlv5Of9yHX0cXI8sJ_D_qlUrabG9u6Uvx7UKDO7Dz1ZiOrjS9CVQPsN-FuaG5KDkUGmFGnDRf2qTKuD4a1UAs/s1600/rofl.gif'/>=))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhBdHpQjqLedNfmgf9zALBDcnY12reu16RCaDKxIJ6ZLk7x-p-QQd-zjB4Lx8TwZwj8jboofPT48FeSS1gKCpZjWZSwhdLO9wZfpEVblVyF-0KO7uFjjFxA57_fGmUh-UN6onnXTIGKAg/s1600/suicide.gif'/>=D&gt;
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_RfnyyfHeih1KL1zjeZW_BieOMKWHAB0LyZn7ddO5DcF3y6WvWN1EJvwHKT_0hCCqOJDFqLZ25bToc0ZynrrmxufUkdbecFkz-zON16hFen5eNmf3YgA8FsUd90PxKssx8G-d1p6rHt8/s1600/biggrin.gif'/>:D
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoe7kBHpQK-RFYNcXXIy3qtNnioujJgcLxjZcxisu_qR4kzyGW9HHJYntTj7HnwKqm60itCrB7X8gmgiJ66LLHw4FMLGYfnQS8hcqdqXN1146vRUWg5CS7IMPpQYIui7cTIY54bqltCSA/s1600/tongue.gif'/>:P
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjG8iHRpFBaGigiBD8jjjnaOHZ0ZzRG2fu9Wt-iJMFwU5I7oKBTeMxQeQBK4GnbSJ0brpJ84vzXiXU2zcj4-Uo9AXhb7fCNlZvID5-kjON4WUaOIAiKP6AMAIGgOAdHZM0hMG8k_vGXzY/s1600/shock.gif'/>:-O
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5-RorNIL7TeWH1ybM1dG-tiSdYhZI1OwlRzx5CibwLwQ2b-no7gSOHT7vJxryitePsEHe5LY0vF-Ds8wbzW9PBYIqqA611vdta0fqRaK8YsdLV5WHoG43Qj7roBYYVG78Dg9b4zOceb8/s1600/think.gif'/>:-?
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyTR9eoQv6It_sx6qnh_YVewFYZwO8JPdRlgUxOaLu8Nn-MdnaVd0BdcrtUBY869epN7wZUJUri66D7ZX1sfuHvNCySTQHGdMhp8X4fAUQrXJuKGdrKE8IpQBtfd0SPUjQqIaSv2denvc/s1600/unsure.gif'/>:-SS
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_JuoDQCaXQwiV3V4txbrla21Y6KmE_UZ77vht-LWHFFZVAl0NPIHdepaRIKDzMsfvnX30qU6hYHNso5n-q5478lTFJp-kDXf_AKJb_x2B3bFdcK3zZzZ3sijsFMhj1YLzkxQrGUa_9eU/s1600/flowers1.gif'/>:-f
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSDqJdQRUX1S-UcKZ8MS4sp8YJfstuDKdkDzCs7B_bRNGSZAkHvtrqwdHDOA2j8ITs7Q3abewWH4Mng2p6UEcwbGG4bb87DIF20CuGDR0N3Orr934buPHj7Xx4y-BYdQ7b0bJB7Ubha9c/s1600/doh.gif'/>d(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVY_X-WDl6xs_YdVSfeFXQKER5ImXOYaMy6kus40tHt-4l11F4j7_hz2yiv6FwywEAqXzwbhVHmcpzVGdJDyCzO2I8COMWomT73fbhLXhLvViMyHf4odTTxiG5bLNiAD-4NF7F5STnhLo/s1600/air_kiss.gif'/>:-*
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgFXhvcHUzOJH6enPHWJne528Mr_h6iPF-mOfuLGbJX8Or8r2yYJvgnEZ9_6JZbB1iTF50Elz8yvb20ga51KJL_av8Hl9IsdkiRHfgNteSyOiBtlwKxXw-NhRd7WAmd3wjxikLUutesP0/s1600/threaten.gif'/>b-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4hjNAbvVtqRO9qrhzOyi6P5_OjICYk3WAk-wHqFfGz4esSejG5sIYMYoIxU74RDqDsFUyFLFWkbrk4XcvdQWWAzbNDDiKfE_6qHfkC540k2gBo6XNBq4IIWB8DJPpvrG6HExm_0oTJLI/s1600/help.gif'/>h-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlSJGreDoAjwm8cpZ16stpE4tDDiwgSyAI6RFy0J3fY1ef2chZRSzIaKVy7n-qCHziWTtIfoSVJXU7_nwHgJczGcvKVZtHxAgJobCMkFFz37CQ3ecpMXgbMKps5ydWTUI52RuY7a37Eiw/s1600/good.gif'/>g-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU72B3_5khyxXM3Hvc08jGohrYs2lenqMMJ94c8OfdQheIpwlnJM9JE5eE9lFefs857kiknjJTgG5f-c821p_Dcgr3Ma3gwfw74uapgYVeM_qtIS0e1pyHqUh9wD4KSMxWceYx1R3mPhQ/s1600/beee.gif'/>5-p
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzVt-IBoGEFNwKHM-LuhJPGgjPRGVu3s1EdrqexmuGm14uzRARu9qBfHKyU7IBJgfaWEG09d6JAsw3OVrFySwXTFHDsb4_EJeFDFmqEV16bVhFvEyRmzPGxlKUw01IhJ9qYatBdeXooFM/s1600/yahoo.gif'/>y-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJV0BcyLX6RGy0am_kBWbpm8nSLYksUMMWQRAodRrxag4d437LuDT-tCupOtmO8NatZJZ0vnmQLtxRggApdVvityS1m5i-1-R-dhcPGnOrCNgrrjBoDCo30kuEsFwSssl2HaMHaEwbF0I/s1600/crazy.gif'/>c-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0Hbczxyjz37DfeOxsmr_9pWEq6Og8Xb0R9ihuYjwzJyS3zU_0SNqpLfugBv1M99oQZH_56gxL8AGLUys40jH6o4cgLOhhHZvC1JsyjUtKY-ZRIsFhlIrfGPKjbbyM0Jmw8xMUptuiZWI/s1600/spiteful.gif'/>s-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaPPnXu-jyvgbOrXLwcTiPqrPCOn4zD50dMk4Ft7pjwFz54ZOO4rd0uO-lMkIeuy9ta60MaHAhANhA3jmvc380Q-OTQdX2m6QzVGmasWFiqv1tNtczLHhRfjil3ryBDeoO6Ag02n6RpzY/s1600/drinks.gif'/>d-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA1lhR5rY5E1MCgVAzW44GhZRILW8zZ7u1tnQbYfvUdaSe16W7qbyfocBhybE-_nSmcEK6cuZOpqhJYGKj9ppqbg_xqWZfe52i5x-Jjm5FynHODtH5A4XGs0S9axHfc-i_g5is3PtNZQI/s1600/cheer.gif'/>w-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq-1KLxHnARmk196afb3dlfwhwiLqa8ZtmeLF8L7sAU5Yor9R78Sp7EVDlLe7jpPGLUuL40_boZuVqtpTm1YVPGD4BqoKoExoYBCj_stToJ7cQV5vufnn2pXXIjCAMVOX-jKrhE6zMMio/s1600/hi+2.gif'/>:-h
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhohsTK80cupRxlo6Thq2oOcn4xg1uxYuqBz3FZcP2P-2ZnN0CvI7VMDoggh8r6ZUqowmFaswLSQcce0m9UrZNtLn41CR2uHtsyIvAXKjJWUFUixjm4-GtNKPg-x_TMF-joFQF1NCMj0tA/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/AVvXsEint7t9gN_nCFiBIK4fplB-6f8wEXt9fMwlYblWKIdKL_WugijnQpPJlMCWvDihMCC0J1P1410qLlocTx9T0SQ_gaQK8D9_ZXRhvVNuxVaf4rgmtH7nHmu8dsA4CmTJK5gzlk8mMLSB1os/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!

Tweet