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-->b) For threaded commenting system with comments that have the reply function:
<script src='http://helplogger.googlecode.com/svn/trunk/[helplogger.blogspot.com]smileys.js' type='text/javascript'/>
<!--kolobok-smileys-->
<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 == "item"'><script type='text/javascript'>Note: Ignore steps 11-12 if you are using threaded comments!
//<![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/AVvXsEixukkZcgYaXZpkNsgJw2OmC9YLQvfu6HOISBnm6CPHXAxBME1DFgjRy-Ahro8bMWv9_xLIkzAxQbFeQwov94_TB0wDuqNsqKeYXzjjqUvkm57Cs8BprS7PZSKIGiudGrIVvMMiTKMy2pw/s1600/smile3.gif'/>:)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivmvsmTHVWjdzJFUumDqYudZy1cJObGaOeZe2d6mJAQ3aLj-oWYIWnWJwZqIAl3J4Nc7Delk1bvfMcVQ9BPzxPpo47KVIybez20ZhsypStfwEWtYD9nD-9NJ-TgeySRQR0sMCr462DOCE/s1600/sad.gif'/>:(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc7NQXxY2go2QKgnNa6CzS2_aozyFzTRqa2J9ODq6iA4FZvFdtaYhC6C2s0oGv5Oy8AtzSqawjZhdA_UduP3pmGQMjyMZfRY3RBIkzrAESnP9YLO9EamF1z_kHfWfgn_5tOrUPmBJBe2M/s1600/taunt.gif'/>:))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIrCNiePA37PU9RiP-5hqX9EuogNRpWQmQUG0kOBiW_kLaXvDT1adY_PI-eMY65vfbUpi4MOx6WeRUkkfB7opG71ypYxjbFQ9eyxaYYVKoMb6SqVOnVZUQjhEk1z0-9U8raG7hKrg4-pQ/s1600/cry2.gif'/>:((
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV7FLejKgU0LY_t_GLBNtUGAtYaquXkZePkcI3IByzccp3IpMPr63ApUbp7jM0400bsB0TmxzOEsbvYATp6khcXKswVDJU2MTZvffTbXney4TT6kDENxwBaOcFW_mxktU61gwCdaxdYow/s1600/rofl.gif'/>=))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLFaV6PO69xY4nCKN-ODQksA7kKIzKjkh1vkh4SHGMEsGMeBDeJs6XpPm6LrvPPTPaB6i09OWA5gL4NG96zc-bJO5DSjNb3NEA5vmrTTnXGi2Kpcz0ccRRd7vXTu-waGHFEQiJiQsVhVY/s1600/suicide.gif'/>=D>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJScLl122-rUWTt5ZVQh0WjNBPZTWssRGwAs5clUhtySz3rxEw0x6RB70Fj0FDRgukSGCRuTcWnBPUp9lx6_JF4ajZhAlafplHd9Vv_shhgA0BcAHl8CswPSiI4suspR_e8Ik98Q9XSEc/s1600/biggrin.gif'/>:D
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfcKTFrmUqzKypHHSha31_a0Bgvnn7b0e0HgyXu56Q-rf6hNS9_H4Yh_uLEJlqqKfETm_Bk4Xq2EX1CvXjJpvcrtx4hP8P9yIC0R_Qpem3pIgRLUVZjpNTzJesgADg8lQwBEx-VxDl6Y8/s1600/tongue.gif'/>:P
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9ExEEJ8VmqnSnJ8fo1WmFue8m7ZwLn4TWulVOCgvxmUtDcgOJNe_V6O1peDo9VrqdWuP5GbtDTLhNWX8RV2GGhO0f25hP-xlZmwSqg1KEzuf07KlNYoZ76L7L5YwrHIVUTuibUJ2Auik/s1600/shock.gif'/>:-O
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEH522ptxsGVEkEvBVCvm2hsR9rjcdSISCj6bZbDDeVJ3-4TAPiBCxiq96-AX0fRYUPIyer0WlAjPLnPjtmGgpJk0nkXZaTsMKul8chqTbno43jhjpd5vufXhQcFyGnfCLi2cCjmwOa98/s1600/think.gif'/>:-?
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHAOYyiKTYWEiQNsWUd6LY9f9JHynYnPggoQXYsuKKlks3SJ63IXp-csNjbJ0Mp6Jp0CYJs4Q_KIYja-hc-z-JIujF1kcHgoIHgLfztwS5v7-USq1cWAwD4-sN6442wNC1VpNfEVKdxV0/s1600/unsure.gif'/>:-SS
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQP0tMkXglz2So8-TzjTQmrvnxQaW7mr-oEA0E5TvQvuAEcu2DY-kvJU0R02veuO8sAejBR99lZagOCi0nZFevUkn013SYMskYJCWzuPNMGEAJbhoSp8ZrP5EjecVMcGg-MrVYRCmM3RQ/s1600/flowers1.gif'/>:-f
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5a4LN31O8jEuWjSQ0yjTrpFZc4a65h4fuZNs_q4OHRYrTkrzaTnKQv6TCNPS6dwgQzx2x8nF82M5bLwOE9BiVljUMgWZVLtUgFj_MF66G7Bz4Qc-uN2R2V5PFZFrqQzxTlEv9KAwpWfs/s1600/doh.gif'/>d(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGKbwHNhqpBuFFhlGq1Gzu2vgXw47RSU0MMffv2C9umgGUnx3WWIgaxC5F0GxVKJWkhPMCBwS1JgavoEBIfmFPq3v-YeVG15z5CgxtTDzrBsJbW_Y5GLhLGrOQDDnoX3-Y6yn-AWLNcf4/s1600/air_kiss.gif'/>:-*
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZyTIlH8lKWmvIGaY3_u2szYITpo_rCR99URmP_5E1bN2oSHaHEi5tKM6E0AYUuXfgg2DMymVWU25fH-2SneUQZGGOlOiuflqzGCqJl1lwhyphenhyphenB8DsOqvIC9DpAjmzNvJ3L1ReaeIioFgjM/s1600/threaten.gif'/>b-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjme1cKqGd4fVHXD7yA-_RSYgiLtnkGk5SnbDZzqVLXMOdvp19TcK76ob3RW3WZYpZ_X4pFbz3tHYhI6wA9z4Ws4WplPMaXo5XnHOGzODTk98a1DQnZHKHBFFNgY2kzhUckZVJPIC6jKuU/s1600/help.gif'/>h-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkZqYqQ-1a5L6d-40pOkmkYV_00grCDyT_fdPvQfHELHUGMqt8J81zovtQ3BJ3WPO92Jm0sTldiWz0x6wqLeh3cvgFlRGkt0lnWUQrqAACbB2kivJ6I__kagsGHJMYw5qx1yvwII1L5HY/s1600/good.gif'/>g-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbo6s1cqBQUX7Ib-vmzXt7QvGzUehUv4WBI4WnSCHTnO82wTOPSMwHCr0A6Pxl3VDjjSYdFvKH28ic17Pxf4Lykqrb7INtRHzMMyRairgdOZ8d_HAcXdQIo0pAh1c3SKhRle7KLsEJGWw/s1600/beee.gif'/>5-p
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyeOLP0qZ-Yc0wxVvflH0yADSeI2iX9ZorkNOPrkjWk0VQKnc-4e1zXaNXaQ8M8O87HSlm44NwKk-iymQ_K_9qUziBJRv7eapt-aY2Eg_D2CN4TCB5LXptsYSCI_6K90p3XFG_DrGBvO4/s1600/yahoo.gif'/>y-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_LCxtTQwz5Ifvk85h2oGca9ch1U0TsJgzzKLi-VD8EKYnKhbGXxYYkkX4psRpIeDcBfnJkWA-IVgLPX8ihw82Ijvoh4-jePodKpEeeoAKvPdPhJRvpqFGXhsB939ELa0rVESRICpwqeo/s1600/crazy.gif'/>c-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqCwt6XNqxEbtjqoQwbmFuo8lBDQIh0wVkvxSJnQRRU73DselRmqYAsMuqTgK50oQPaK9Mkure-Ch2IOO8xQictQsP41fillCPnSYCEHtKHkLHtwmEm5cSfMEhuBARYB6PCJUWrTGJhtY/s1600/spiteful.gif'/>s-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjamzgEZad2AKeunC_QPTY5nmCeOD9G4nWnSKwz64Lx8glKDA6nJTNqEHoZgN75D5Pl2k8JC7X-at9BjKdcRLhRo_22hu22L4yR-m0P2xtRwSBO4Nuy_jcLGzRYlHXWQrQqoUd8yVnYBxg/s1600/drinks.gif'/>d-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ5C9rlTvrRUjvNzfC3e5IJ9owt1OfQd3TCKz4D-MqEcA17FbsdhzkEsXFOAPOe6MTQC_VpN4-xDzESKKQFS4Boyi12lVXURN0GNsmChDurlnScDjQn-CRWy5JAET2gW83dm6lQrijHAI/s1600/cheer.gif'/>w-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimaNx2DkPtIhyhBy_s1fai8eUpzZ4_YhKBr_QTPDf0TZ_-cvbwIT0d6Y9ClBtsGh6AYEGBT5t4zCGch7v1gdJKABQcEuhLzWpAB_A6QrhqJtW7_TOWcLrsBi57na-_K4xwPr51f_u7Iqo/s1600/hi+2.gif'/>:-h
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzXl9KTXij2c9rAHdfhLRVN6zVI_XXy9OwOXJJP6c0UomV5dGiO4_ljATPhHHvLd8M6urjN2t7LPbVWOKnjPb7ikuvskqBtIEDp6Sk52S8L19_fIecZWwXq4rUQJweWAJAR9lJIrhUBWY/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/AVvXsEixukkZcgYaXZpkNsgJw2OmC9YLQvfu6HOISBnm6CPHXAxBME1DFgjRy-Ahro8bMWv9_xLIkzAxQbFeQwov94_TB0wDuqNsqKeYXzjjqUvkm57Cs8BprS7PZSKIGiudGrIVvMMiTKMy2pw/s1600/smile3.gif'/></div></a></span>
</div></b:if>
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;}Note: if you want to change the size of the emoticon container, edit the red code.
.emoticons a, .emoticons a:hover {margin-left: 20px;text-decoration:none;}
Step 13. Save the Template and you're done. Enjoy!
EmoticonEmoticon