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/AVvXsEjPrXs-cRloFygO7PI8NRwyoagfLpQfPSQV3ZHlh6c6tjuiDuUaearF_lGiB5J1el9-OmpztSwjIIrrEcVnm2j_dH1FZ7mJT2Qi4vuIuTacbwn1EANeSjrSMXV9GjCZGYKZ3XK9c4OZpkY/s1600/smile3.gif'/>:)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ1-bJZuLVeHRCLYcuk4S509AavHcLvhUinlKqVh2zrnMwcsTwWwKJTi_kTgXcMqiNzGQ8WfBRqqjAankwdPbowE8jgCzm9i3NdNgAyHpearBHEL-rmkuKaMw9TUiKOR1hVIbg5vFdNYI/s1600/sad.gif'/>:(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMfAY6vhMC-_m9cWIRQ7cEunjoMEQ-UJWLRb_CxQ8m_-EHbD_5XvqLMhYAj5nBz9CGeO_i2DouYEnLnstaLzpcQzFsR1j4tx7LCYZ7BzVuBYvDFK-xGLkloKVv_D1uZFJbBbQb1khbi_8/s1600/taunt.gif'/>:))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixjT_R6d7eYOyWFex4-RaRWuoA_C-9N5YQeXKW9P1bWMdfH3Siu4TGJsKLbI9IoSF1BMMG5LJEhdq1AegiivKjx8249lap7m3fP9v0Lwmq8L0f1kV2gOexaxVifrHpFHi6aqYD6bFLL7c/s1600/cry2.gif'/>:((
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6fCcvrCiH_LCVO8bAFt09xYYNbhX60BHN6uJeg1PivLR6YF0oD2KnVMZT12-mw-wtgQFh29Mh5kM2nfrYGjcyt2M7lj5c_4-4qjciJPqlUJmL2zZ2SpIFHoyeJAhLuRSeoIwRo46n9OE/s1600/rofl.gif'/>=))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZeCfU48-ohQ8evBAlgr93rRx7NCKh5U_TmFrshdJoBadKHwefZSMCvrG11WdxYtiJuIc6ApMeYlq8gk_cAFCD93HGtpJMsGF72OutH9Pp-lBYcIiBTAaoTMGUPzsBzT3WO0R-Ejp7NUM/s1600/suicide.gif'/>=D&gt;
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU31dp9Z61s_ObXT_p0D1QwCHNtD8qEzu47AoTWZJkC_nN7KUx6sVb6hn2c0loVNUvKXlAfzEpqgZ68bc9cLBK-lFE2Dd7srygjYqpEtCLI00WOzFRyR4Ip1YwJ6LCYu4b39sV2ZJ1SDI/s1600/biggrin.gif'/>:D
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG28KLm_1K5HiySHhk_qZeUq9TsQO_U5WckEexoK4g3uORrxQ0XSdsZlFO2sgBddb6SJI4r2FIDZ8X6aOFl9Zhuw9m-p0o2yaZejWLLhVcXMdxcfTT8P2HczqtnbBrr_O84XsDvBTmgxE/s1600/tongue.gif'/>:P
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikReS8IMrUMXIcoNNP1I8D-iJHS6X_9xJgt-ZAx7_DRcjNQgxrfRTy7siHj8_4f4KRaEgEw-Te-WaTDiVMaUbfIrQA6mCg6cm0A7gYPOz8ChlCP32aamuSIqcsEYEnDFBk2tPJiMfRp_Q/s1600/shock.gif'/>:-O
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtfyd_n6Z6d3HVvaw-_rkT01wtxyjfobxSU0OelOWHwlnkP64ocCTTNjIcOsIHyQOq2EYYRXJIA8y2HzmLlr7zgUApv4PGMr7hweqOfTYp_N5gP0eOu_uev0vbRfRa3FOSuUVEj6Tj6dY/s1600/think.gif'/>:-?
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-QUj4PxZGYaLH5to1Fq3TwPa5reknI2HpPFnxHkOh0yDQNtFCJPcOMX115fh2km6bWDqo1ZkMkPJlDwFYiShLIBuuvo77AbXzVO-QNYONWTlqMCJOHIoFp6lOeM4R-bK5FYZjQTVgztY/s1600/unsure.gif'/>:-SS
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwWg0jq8AOLvGkMS5eIPKMO0sOfZVEGC8pdCYVfgpuU5LOjm871GiGp_ACqrUX4NDpmDXtgnCl5_3BWREZoxsas0j1jwKRMxyY_m4FxCCj2NM3q3p58ic9Lu0lhAUbhoPer5Tti4yu48w/s1600/flowers1.gif'/>:-f
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX2IwISJFZNDqHxI7aXpj-uGOcuHwe7Vu1hqprPU6broYKbv8tKdzSYVGzeX4tdW0NhO_mMytz1xO03QbRQJy-bBFx8RsyeXpsoM5Gz-0An9trc5EJrKZ1ZeET94kjI2XRgP-PRoNJJWA/s1600/doh.gif'/>d(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjguDRCTgulW2yFyrQ2ZbI8OyEgxxIeceSM6E2yi7fYNAYUcuohXmM5pDp8m4Q3vvj62SqyCDMyXU3aMOuFcwmhxY7U5e3wgsw1Gd_PQDJ3WsILtPUNXvha7_HObLhdwO_9gZpsPeR3478/s1600/air_kiss.gif'/>:-*
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjODq4t97o0w74lC0xYZ1THiXxC4aVJzUFT4S4awcJCmTCVXGhX6c57T7Xu-GHnhnNAN9QCa-DWIgdIrqkh39_dxkOywx8X6eAPsTy0Jy0l4Cj5Ejpoyt1OMNGhYraEdBwLGIzPtsmW7Ws/s1600/threaten.gif'/>b-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipHgw_ZGY2rv7w-JM5OG1hsCALXA-16JDV9MX2IZgpDy8Fn_hvvhM_9QTBzq2TVSrLVorpyn236lU38PNL1zF30wzfyuWDXhjYv64J9-4dZzPr4WrxBDPFEu-A_oSTxu_kZj7St1dsY3c/s1600/help.gif'/>h-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_0bHbX2tKsMTQmihvNDNg-xqB8gerzvYueQQ4Wf8vVAvMPnnt3Z20skqo5GZZVAsFqOTz9ReSmaYbKmCI-GXB__2q8-5CasJuSghq7q5UolsFUWezFpus83MtIVgUeLzENAH-1z0JSGE/s1600/good.gif'/>g-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzC0WzbWWh0a6nbXaoDSh6QSTd9KY6BAn40avoa_Y9mkIJ1IJbdj_3XYbEiXOO5_t9G49I3MtNNeCW75GsEHA1nbzqAvjFyL7hf93bej67naDtF7j3lTPYWh8RiX86dkbKpk3VMMi09r8/s1600/beee.gif'/>5-p
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwNM7pbYT7mmT3i-lIDywVR8QrazzUM4HDgfkFvuhbKHWiRrmwEDc_exQm8RWbCsG31kdmmwz31erANRbarNmtYifu-bseEmEHJB4q39BJB1Pg7jzR6M59OmT3ZkIobl3z0R0VwjJl0vQ/s1600/yahoo.gif'/>y-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4s8r6oA-RS78ZIQ0CRB7q6oegBEJPgVE1DtfosfMXjBxqXHS_GMprlKjxqDMy3Sba5-GP5QiYrz1i5kLyDzvy9Uk6oDvrECkUdCLKorxRnIk14zXnuqqrIayD9ps2yBQwqxY8B1YSwQI/s1600/crazy.gif'/>c-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlpog0fDsy5vtZFNHs3u3g9mAWdPcK6pT2VL6URqSyh7aFNDCgDKqYLM5sP876M_4zc5znYT9tAmxdn4jyfR5-xuR1tXawYYLmBG-1Y1Iyto4KthyphenhyphenFGD8vKFZVwfyuZsOuhJVNkK1-EEQ/s1600/spiteful.gif'/>s-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimN5pHXvsltpCA0lH0Ufgb3VbGEuk9Pj-W5milpGimwtybsMKn5knw083AfyXo_TVjTtjj4tlISS4vxPEOnWiKp_Es9TdB2YStoqPcLcJShM6vmR6Ki9ROCRIMCJJttTWEy9A4PNoUJMg/s1600/drinks.gif'/>d-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7lqf5nBgyE1nDybMAWCLcDEC83PKcS_xiec0wfDOUGa5GzeshCXCzlWx0nYsSUfEXihEZYhEasP15_RlbmrVDM9U8EHUHYT5ojjfOlXRFqjRPwKbywL3XdTHgDl_lFKVN_K8lEikPS9E/s1600/cheer.gif'/>w-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw6mueiZ5jvMHfNY4_8MPJVGmvUC8GZK5lGCfUBW0SYh2csRLWH4KCXiT9ay6axmr9aePO-nRRdghYR51lT7mGxvyofGnU4GLHYmVAnmor3BO4RMmrgJNbS2UJj6qwkWqwBs4qdtrZs5E/s1600/hi+2.gif'/>:-h
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZs8TUTGi0UCI45bxhV-uAwojv3b6CLtJn_6Nlc9pY8TrvADasxEDuZMmrNR6DekbzXo7FSF35m8x9pNg2MxPiv823qBRdy4Yt6hCvBN0iD9Ap_Ubyymia34lnHjJWoDTBL6ytEGHdUmw/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/AVvXsEjPrXs-cRloFygO7PI8NRwyoagfLpQfPSQV3ZHlh6c6tjuiDuUaearF_lGiB5J1el9-OmpztSwjIIrrEcVnm2j_dH1FZ7mJT2Qi4vuIuTacbwn1EANeSjrSMXV9GjCZGYKZ3XK9c4OZpkY/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!