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 == "item"'><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/AVvXsEiTdsEn_0sD7zCS0KQRReauPp-HlrAk7qSIGjoRNtepOiwy-6JGsxADK9iTBfWYiS7_y_4Hf1Bc5SSCgPSYZfxgOk6pLPpfzhmPmylknDpiYjN0-3PC58Ds3Zqx5_BBHmI78olqXu7QKHc/s1600/smile3.gif'/>:)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFtPf4-iwlsgavplr_EcgAq8mTz_bKBf0ZCQxmrMP5FUg-A2IAbh6OOqW4u99QNby29OExW3_Y3gMk2Xt2vg_70qiWETNutgTQCXqA4773bglEny8GtJXRNKjcwdKs1QbrHhILt5s4Gw8/s1600/sad.gif'/>:(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8o3zaEezuhDdUU8GlZEByKVx0mp8PJbfkuUNb_aIEUpd491eBPuJi27tYTI4UfZ82virG68RAQD3mEJI0M6O9TMWIpLlAREZze_lmpiEUtLF7LxA-fjBonhd_amM0LtQUUIxas5J2RQc/s1600/taunt.gif'/>:))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia45cSWJYhTiqKS2NRRGzO86ix4_o7upZJ3wNxvH3vKxrNC60PG8zCB59ounVtYt4hncFfGeo8-yyh6aN7ESBGOJGCoCZexAbtDvQmKRRRWJryqtXRLS0RX1nvvn8fFn3nQDY9LK96VHo/s1600/cry2.gif'/>:((
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiflslBgZm3V2DTXjiyiCiqSC7MPnNOqH_1huJfu11RYygyv88NuDPK5ZraKK0C10i8fk9LjUKSrNVp00uteJbnVlL_tDiIoWbeB9PEVNQ4ci99Q5vej5CaBGl66QU-Eb2OWvg9xdXBA8Q/s1600/rofl.gif'/>=))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG66s59Bj4_h5hprxBSsokSHcg6FjiWJn20bddq54XH1miUIpUmcjh34tjj2GzZZVB-OHVaKNLLhPrTXJLJ9SU_tmAwIhaCaiegOQ_zenUXePjTj2oICi65givLUTAMQ-0OlW4twW8UOE/s1600/suicide.gif'/>=D>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOv7k4GWZk58KD_ZpPDz1zSCW1SkFjMUo7Fxic0Z6sR-o4-DLkx2timENXffoAuwijw0mYdK3C2-LaAIQYWqrxdbelB_XCDDHTCuydh6efgQnTWnWJl56m9mqQgeYTCPSSJ3o1kaspqmA/s1600/biggrin.gif'/>:D
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5XjMoQ0GHOl3GCtV-UJT9cNgVje4ivx8ZGgkl4RPHd70k8BiQsFoSEPFIFNpcAw6aQ1N1k-jnXhytJcBA8pfAkPN36jIDZ8tv2lo87NwmbxkWtlmmQ_v913G39vahsI_Lns5VCPumk8g/s1600/tongue.gif'/>:P
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCUbD81EVQCeM-Q2acr8quDkTK7Al9HIUEU_uMmNHcf6Y8Wa31ZUj9YjAVHgap6OTGzNma6acn940eoE2zWqtY8GHC7zNlIXYWM-ZXoYKWNuxDR8xb9ZfEoNxpoLsfKRJRxoibTOZdVhc/s1600/shock.gif'/>:-O
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBAbClhsTCSGGKHhTP1RDI34YjhmkhZv_1-WhyUOiROTyD502X259sh6-Jovs_jh7-e1MHa3Rpmq4mNJEJF2k8vrIJ8ov4X4xRtLVsaKJSEXNFdbvjXzjWUYUutcRCG40trfvenEmmUDE/s1600/think.gif'/>:-?
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmy5rQnK1cnK5lrnZW_c0loD3WwrZaemXGAzQeRcpFnCKvilNFTRmDIDHeTsxiNu9X8VQuWSxMM6SZyxtpaBaIajVsG0sOiRnHhjSj4UhcVSN004JgtqP-w6dn0Cl7Q1jDeuUXetkdvHc/s1600/unsure.gif'/>:-SS
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxc2J84otC9P2ztoQFF7XNsyn7akVeo0X06-f2MiTyPMT7Wsa9nBkRQ9vhCr6SV5fJy4XpDPsp7EPCNYoUjfmco-mZ-PzLw46WfKAI4SbVDgw7aB3RfkKzM2sNiXb3WLggmt7YoOtgyAA/s1600/flowers1.gif'/>:-f
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjgNoH6yEdp4N91bIFuH0AIBzAReJ8BengjxZA3VO4UiwqO78Z057_JFZ9zibe9dYm66OJJp7Mebiv_i-W53IN4RHSkdGZuLFxfkS8i9TBJ0WvQjBMfDhr10IT-y9XaSSR7UbUPDim9s4/s1600/doh.gif'/>d(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm7SKHTewzr5muoZhUHjAs1i8dzg4nPL0zVAUYLncxHEyFIbCO07-h1phZpRAEyV8Z7LNi2RWvIwzuuiPmLj43zzTwZQoO08Y0cTZ6ZMjrLAfIz3IaQy7VO8jzBjr5vsd0YETq8CzeItw/s1600/air_kiss.gif'/>:-*
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi73ccBmjLxK2qkuDupIEF92-FESohnSz1CtCUbOjq0SuyOIH-h15QMzl1NZgh3mhb_DB-fY7cIg_RWPkIyAoii372rvsdCCNGbcb5286yozwr5ZisO61Z79WP1NTXs6h2sltBxFFFRpc8/s1600/threaten.gif'/>b-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvp9qpF1mrI0BsJT9gLJPXKgTj4Cx3Oo10cVkIkMijsBZ4HS-c6LvRJTtVxrfdb5LteaFhYcbMz-rTZTz3w9x7R90Gpot5O6GXfZKauaM9lBD0BZdIavGQigkD1bOSZH0kLMLSJ0FFDdU/s1600/help.gif'/>h-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg55vKcG0lAlUv1cmZCbNOwBr1m2qjRhw-5-GTqAEMln1EIgAy06sm0pCPwQLvsGIl_qCXf_j9Pu3qcmoZLw10E-l_twrBKKz4gIprnMVM2KfAo04TFJ4ZcbY7on-oWJSNaLnB3gT3QaOQ/s1600/good.gif'/>g-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSKvRd8G-6tLGTE2AOnJIYovqafLIr5XnBU6xQm8_dk1g-21hc85o9dNdO5fIMBjMMkQpORJaCJWNkzAdPJQpcya0I8aVUce6hrzPl4b5RN3oe1UKL1X7qTM4deNFw62yVmA1_LqawHaI/s1600/beee.gif'/>5-p
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7x7iKHGAYDz5XcfA4d90dCjYuvhJUHHfeafdBYhZSOJwQKkXEEOE-Hla_vIebhPIB_SxL7zne_pqO6YKQqf9VvA_GTlWS9AUiR0jx3bciRdoug1aNDEybv3Y963jHoSLJ5iUAoWsBe1k/s1600/yahoo.gif'/>y-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV0Czal-kQptqj9MLT40XlwjUurSQBuTp58j0eSGn-C9VxFWRO8HLqcxcfD1Y5JBT63YnzF8brMSYhwIN1ehbsWNIhC384UnyMDsLqE2A1mgXS_xMJndnkHL6jdLiTreDFVuL3bXd8Rpo/s1600/crazy.gif'/>c-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOz3U5-t1jDnq1w9ngGL68AIZ6x_-H8Bfvcr-tplxU0hz9DikM2522BSZxLI1u2_g-QM6fLrS1UiRL0YSTH5G68zbnhdkkm-xwehUmAfhTsAOokbXngsMWMVekP7gFiQuPqHaDVTnT4Lo/s1600/spiteful.gif'/>s-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA2zEBiw36QkSEkJ9jU7ghxs6wCemtxYorPRJkKg_GO_hRKOWvgIU75IAP3V2JG8ydtlu86wvXfzXXw902FmQF5rEOByi9cfFUBDgb89vBtPfhlBDbkubVNmBo6LwGGDCFi_WWTxzzphQ/s1600/drinks.gif'/>d-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAhK2LZAnfJ8QTIWtP0ekg4iC0MBGuO3SBdctglVhG3lOp835b-s__5OYVL3s3G9To5fRhyphenhyphenUH_wTIHtvmyvQK7X3cq-DrhCqL9b_DO3dHhHbvUR39KQEt-SW_Pb79FY7MLCiiQywlhIOo/s1600/cheer.gif'/>w-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY2Da8ZQEI83EYSyfERyI_veowrViaDDC2tcU5QdiMk-CCjLFXeYfuJKNAQob7nXWug4btKjA8EGV6pbhvlbEbbYdGyfUIUA7uqHv2uCbvmpFFDxIfZSztvt2vhMmSzeF-yp96JkfpMzU/s1600/hi+2.gif'/>:-h
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh83F9ft7R5Ei2d0Uw_G_NaJ9gO_Q7BBz1Z99jsaEyTP0wEpBh8XhvvPdv0E6CWGxlg1kZfNinYLry-leS8PfjL7imr33rCfPK53HiZgqpJ5infFgtQNxgBqhdEZNUvupaQdhbkY4Jbvu0/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/AVvXsEiTdsEn_0sD7zCS0KQRReauPp-HlrAk7qSIGjoRNtepOiwy-6JGsxADK9iTBfWYiS7_y_4Hf1Bc5SSCgPSYZfxgOk6pLPpfzhmPmylknDpiYjN0-3PC58Ds3Zqx5_BBHmI78olqXu7QKHc/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!