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/AVvXsEiUoVbkxeHD926cMSiRZ52w-8G-vy3YsCwi0h9MOXXJlF0a_ZV16shvowTCISYCh5jUzdOtysP-LMUHCPW3PKPERqEcakNiGNJHkRmyIhefI0Yg1c2nRrXs35bOROPGoJfbA9aSegnwOpk/s1600/smile3.gif'/>:)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimyX-k1Lt9lstf6KVuh8CoDRqVx-ALC8tyEP2U2H6HQN1xwSyDa7L7ra90iFjbyVnzu8bKABHwLaiQ5LidzfXkrGb4Bj_7pBKjfQ0KjGNhvnCrwny8qAbHhGvxKOaqbQzPZ0eLUXDEqy0/s1600/sad.gif'/>:(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7ELqcyMWCDmLXoOXYgP-vqZ1lZCowrQmlHKiV5AXMgyon4friZtFNifWJe8-q2bv3vXO_YokLQ14VTF_Yq-dYS5IUuKrPmr-Wc_8JF0chtj0dn9EyMtKHSp2fM_9GbR9oEfPtgmNy0ps/s1600/taunt.gif'/>:))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirQt5a9KuqcSTwYTM570Iy67dTQI3mhSeMOdLuI5LCWjowNsZ5rJKe4Z_1E3LMCYdOvscXqEkSxs3Zq9goi10aU5PFtAc4rA7UPnkDnDs5UlAEZvOsl1uflJZGFdpjyQuABI9Y7GnYcBo/s1600/cry2.gif'/>:((
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirO3eUf_BHBVuuJRKmzvmJIBI6hj6AW1I0VAsf8TGuPuzvQvzfoZylQi7By__9Cn-_2aiKhjIwZQFV1k_OrqoLUc4atU5sbYYNJHFAILbIvQHKmX-_YnBGE4s9lw58XfgHQGzYJkyauwg/s1600/rofl.gif'/>=))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQjW-grakaN3yoipXk0naaYPqg2LtZC5Jf7ElwqsaeIN2xMNSTIqfQp9NnhwkVg6SAlbGwfffxS-KTsNG_djmsHTGt6S56nLCm8vTHH8SLNd3pYNoXwGUvSoOngO6q6l3SbrPnM32xC-8/s1600/suicide.gif'/>=D&gt;
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7aAbK2pTlNGHN_S85DcH2moP2KDpDn-vXqQGpK1QM5Go9JcQ7XTlg3p-7rREsmSFbXxNVikRRF9ZO-wPrLr9D_0iBwlv08yZZw3FDfKKhSdD5YH0unCmmf6UowCbrDCbTQM7Hy3Lufig/s1600/biggrin.gif'/>:D
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCM89_hpkJE34AbdkgEP_1bu_rPjA8CuosGk5fHbhY4etmNq3U5oemZEVmpKg4clRSlIj_EZn2nvcCcAuLTGPxe1JApUUphdwAZxZylc6SJK9Ty0ep5K9T0kmOgs2FsRSADzFlpWXglsY/s1600/tongue.gif'/>:P
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp-Bl5LWxoFauAi3kglRXbbe5TfuP-1BuQsghFPjFSCt9tbH3R9CVLuTF_DxLIDuhl9_vZ60INRujWdTqOFqQO8c-_o_hxU5Dm3n2920PTERhm5W7ky-ERHzG4cm0T2LR0TGbsxFTAUAM/s1600/shock.gif'/>:-O
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmKjvSUofMCsgETDp_C_erUPE0-Jr6BatHSogNvNTpWsA130_ccLln6pIIAG7mqLdF3b6kyR6Vqe342hq59VQBogQXsJYJ4empIvRjb7di5KnWBfAfNj10Q38ufXxVI6JYrkUiVhR_q40/s1600/think.gif'/>:-?
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG2rKRbQtU-7FLagjVg9uA2KUCoFxtC2DUVQyzvnrCbe_tRioZMpHGVQJsTdkXDZpa5JDU2tgTFse07UbQBRfl6YNel3ddA4CtKE4GDkB5jrWzlu-RX5tEngVQhVVEVl728kwuTtf3c2I/s1600/unsure.gif'/>:-SS
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqjHhm3CbnEHsXUa60LD3fh3KRx-1YVlcSL_Ia36F3x_qvdzEL7Cbc_35tAkIyAivLxXgk895HIoxd7gaybjNLGErl_Se0oW-x0yWSojcaudCBEotqdQcWkyQ9Zzj15ALLKFNvjKQl7fM/s1600/flowers1.gif'/>:-f
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijzBJGbDep1HI1VSwjaPsAblxRML0yfQIhc55EnlQm2uTUV152wLUIgaJq8o9kgUyBO91llE_q1JeaNdgy2LHTUVPvh7IiJsNOFSbjraztkLBmgeaJ0tpBBtLz7XTKWdTbdrpPmrth8gw/s1600/doh.gif'/>d(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq8-PGftG_emfUZP2m83wEZVANduWMSLOPzuQ6UeXVaN3ao2bHFogL8ltRUXKG84oa0wZKa7cI0jcz5KHU-PLoJpHbmc44LJ1E-NNOVGOy6naGKb5yJJrxbK42rRlGpAvDGUJh1pZ3Omc/s1600/air_kiss.gif'/>:-*
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRa9hY7ibnMy2SQfkN-mLq8kMbApMCPbMYbw6vArxYh5ULlzhj9eYmdC_jWSG2ty6lGZgIV8RuBpbmhYNjKPNtDazRT_znkUo4VZOLXVZeAz4lAPm-SAwgB89IAF6zkGjoGxFFazXehic/s1600/threaten.gif'/>b-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIcNk8XQ7Z9L-sJZISQ2Si7Y8EYPXU0zXeI-C_sMOY7cM6XKOXvTgvgoloZMd4kJUwSoyrjjSqyXSfKJRckvs8f-hs7Sy3-TcLRcMjIGLEr-2bZGrty7a8AJvvIOSuzoZChHeZVZUCDEQ/s1600/help.gif'/>h-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXc4HGDUwHd0o3jpGJq5Iae4-NvbGUBxhtDbO-AFLL6JpvjK6W106PLMSY55PcdBMnE1yPzH4OUL9V0ak9NCa2erDT_Vwvue8-5BzPmdkw88WqWfBHyLKr0n9XKznOW1PFDauyO9Ns_Js/s1600/good.gif'/>g-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6mSFRzaRnwDHsgI_KoHLT49T_aRcj-E_EKVnc4VwqN6dJ5uKD_hrLbOputG7GwG1cfZyhiJU2jcpiPVQrZRkp6RkIJsfWN_weZUUAbLu9cNmzhisSagbgMuW4Ss__lJrsxuDcDh19vBo/s1600/beee.gif'/>5-p
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBl-2i4hT00V9mNQZRg-fCSpN1wLGsAi7sPL9iFrO654eFpJEU-To8k6rHp0iNK-S4KCTEAfZUAJEsg-pd5MoesMcygOzw1S3TkZSff0qSB8SkX9D8Bc9N7lX3D53aH_b_3-Z2iUbx4g8/s1600/yahoo.gif'/>y-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGYPSGOfmr04ZO9CT-sczup0vRQxB7gWhAkfPZzmFmSihETDoIeC617T20tvY74-Bz6oWqshHBtGYlzyfQkiQ8lcMwRl0a8YPC7Dz0x9fwPFDKuu-lHV2aMljff3grujQGOUSbSl_upB4/s1600/crazy.gif'/>c-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNibuiAE9mM0kamuyTsW27R2mjzF2kob78H5Qpv9XoC5yYQz9R_lPZSxKsYYl16EgtjKSzLYHPoGM1JMyIXRg_26giBWCxR_667PQGGhPMhnf2lgkmYyCQ-j7PatAYNw6NLPbsrxymkYQ/s1600/spiteful.gif'/>s-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaajucxShEqsjhOjb-qJn3kVPUTb_STDM1b6HWrLdZfyUGFVeFGINfUYlSXwvv3UfSrFJRNE4nPrs_QDxxvP2MFJ-eaCjbrzFrNXAbZ2_aOui_qlsx4oSUd3hzUSZH2T_mvFooEWQ8yMU/s1600/drinks.gif'/>d-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqcd3IzQqN3VBl8UdQl4eTAvH1jOtpE5BOqZitc8TZiSIUlkj6p7k-7ch0vNXLBF_sqZ8GH3Mwiktezp-fHbzGITdxVqbt3U3gxBDP4ueMwoYwAy4jPO3XKWR_1_0WHRE1KN__XQSxyhY/s1600/cheer.gif'/>w-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrE6WnZr_KJaZZMXspqeq-hk57D4ed2vKGkrsh97h5TiQb16xF5LJ50odVUryJpwjzpg646e3Llcbzw1x_iKIqBJfIaMAx7BWcl47twv42okVjdNpZuEfHBU7sfoXnAMNc4SXy0JXOyf0/s1600/hi+2.gif'/>:-h
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikYRXzoHNjkDEyAJbrPupO82L6SYE7HzADwlj4SUZp3sr-5p5wDiO__tkX8B7XINCiVExibg1JlCWOuePpHYB_sLveK589BV8amlv55N2tfHN1o7yN6W_T-Kspmb4-S635B_gyTArT51U/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/AVvXsEiUoVbkxeHD926cMSiRZ52w-8G-vy3YsCwi0h9MOXXJlF0a_ZV16shvowTCISYCh5jUzdOtysP-LMUHCPW3PKPERqEcakNiGNJHkRmyIhefI0Yg1c2nRrXs35bOROPGoJfbA9aSegnwOpk/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!