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/AVvXsEhGQLGV2VMvEDv7mOoT6HX9a_GwNlnQd5GVMjFYd5j8qwqCfbg0wHRfeeSdbx51YWCXgA-5-1djWCwA1XCAlj1Nx_jd1bgvw7siIpbnZyCTG1wiub9BEjRwTwfratAxd_CiMHlQtCq3gg/s1600/smile3.gif'/>:)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAxnJgbjsg9fLrmVnG1A7NTgyK7PbrvFv6zheMqzgH-xuwKQwcnRFCY1wwHSQecZe5aKY0akCB-azC4ZVtVrO7AJ2hDWfN4NdEX0vcCa3vy-JRwz0PvCS6PFCt_a5ehWjzpHAZp94uTQ/s1600/sad.gif'/>:(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYVy7yakBoV4b3bvNx2hVfiiyOcdIC7UL86HHVrMWv1cCay6wSlxfVJQjpSJu5IQMtUSxvxADRMJLjzkRskqf9ZhcqhcOePqlp2AMACJlR3Y2qSRTKR3BSwgx4WV-CKJa62Dhgh0nOAg/s1600/taunt.gif'/>:))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOQaoZ_Plzi4ic-6M6v6EmlfIIw9KMc1midXyOuVeWWuVGcuyVkIq5tzsGWJKvHc_pFFAhFsrMxqax8pl7VfIlyjXXwXet0fXMViRhnEOgTxHKWBGUf7ubUN3Wii9tiKwsv63TwmizQQ/s1600/cry2.gif'/>:((
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdw64q6bMJm_0Xrh-xgz7UZuRj4CVUnpifmRUrn9PzoCEz9gASuxhIJfTL3JNfqYa-CXex9BvMhwDj9iEvVt4dCUZZRlSt-iusnNX0yJ3Gs6WsWoUl4B5IiZjEb7T2SfXYX2pGET_nrw/s1600/rofl.gif'/>=))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIj0FO2bHpW92v1p7CuTNQ5RDigx6wRzHoB97foPHQc5_SxBPmceLLiU5iaCoAk2gz4Ozl1dDHtKC5lNEZy1S5dJ_nv5rgXKfIn130YSQL-sLSSLyY78Adz15XoLhAi-wMTLYs9C8dEA/s1600/suicide.gif'/>=D&gt;
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTBfINouHty09mCMJmWDf3-vpl34drFOI7khPh-gXszXdNi6gAXeMv4zC1CiQzNL_5mCvQL8IxHqbENVQDoyt9xur3qoCK5aN-kdHv4SmvgD5_suZ5UTX_OytYLpaNqhQUWrapmz2IFA/s1600/biggrin.gif'/>:D
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAIeJSRentsfQLNMRcWFsMSi0oN_vBMC5c9tVKUGbq5jIw3aM8AeGfsYy030El3d2En7hf6XfJb0Dr3_JtM9PAPcsqc7wJ8kU-syVbN8VLfmCHQ0HB4q8rA1oKGrQyDRFushQKIRzjLg/s1600/tongue.gif'/>:P
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2NbEl41vMqtsFF7kWq7opDSPZY2iUgI5GthrNrFrM7qjLbq80hDb-LHXUFj9i3EWmNx8gdBCf7sHJjQuGcHJwH6b0cLfZaCmRMBBLtzcye3L8RQVmeqvZIH1wpsllLNHwW3P-TD7kdg/s1600/shock.gif'/>:-O
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8_73R9lH6SnGb9iQfI8SXYATgY8ifqHwhywp5pDcpPUiKrWwJVBLYtD6_y_zMdEThq-UeouAlyWhLqm27Yj5_Ocxp_IOPNQdyJftCnrl3O7VKKpmPf7gmT-bYVtTOeCOGWUhE8pr81A/s1600/think.gif'/>:-?
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUwAAvQAh8afjoKtNFA2QOmRLgCMZm4gFPzdIN0-YnkkIVUGs-IoTokmxFmp2k9q0s5Iukr1SCy1WpbCKfThS5VT5GquA9Xnljo4lSh1Q9ftleB6yqn8Cy0oDB4I_n9M6YalUClzbqiw/s1600/unsure.gif'/>:-SS
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRAyhvdLZuzVpf2GYWMDuT-7BWGT2zHAsmW7jhY_AawMlmuy2omPrOvJYWA7OurTME2uE9Xzhxtp10nnZ-T5-vHylshgKSSaqt8Hlpak87l1XQ_jaVx_MSeoJR0roo1CbLfce85o4cWw/s1600/flowers1.gif'/>:-f
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrJItHkfg8kMhCGar4pldXWipwkacUdqosVtJU-HPCdJ2Dg7u6zVLEUhsPIR1woVTh8I8SYX5UERg3xpZEHUkLOEcGf7TPQTCV1aDah0029YMiCtmXGc_0svmDQ2N6ijIl1FP2WqO1ng/s1600/doh.gif'/>d(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic-4hkNr-SC-On2vFry9oY3jLu2JEY7fUTtTxxbXK8q963x8PqRfrgL43oTQCAqduuQAecwG12TLpYjox3Jki1sbm04CYoYRL8hw8w8DPNyQmiiz3tOls4gcK9Clx8dfbI_nA8gakyJw/s1600/air_kiss.gif'/>:-*
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitAPnmM2fO-n7C3T6tf5XbG-OT50EZm5VyDoYBGCKOu2cbHVN9YObcat4E2pHPPx869EDwoexcznBm_Vbz-dKjKGv-XlmD-vmyBdSBWzS8BaGPZh6WeU82hHSiLgoruGubz7dnSIhL2w/s1600/threaten.gif'/>b-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggEqtz8e3qvmAUfUkeOPQtPHbohp_JKLQZvAGXMNG2iKsEZ-q98LVPAYjskiz-WB7feUtJRtWizY_3wSXt-vZkyTPFv_Kdbol9x4aMb89IUirRlcA28n3SMra0J99VfnMpNTAjbPGRaw/s1600/help.gif'/>h-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSM1pGW7N6oRzvpDbWKTQlDexRoN3K946Cpb3nyinjwTxuQj51JxriyCXzFdZ3dNeFG_5xBOGQW6DSr5fuSe2cAeMSXIVdkIjhr0WFneeFAWKbAKRARDGj6Nlj3k9mk7wDKwlz22v7jg/s1600/good.gif'/>g-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHyK2FtUeFSNtMuYh9wdPRZ61ixuNNPfFnV3NaFO5KYelOamDURrepKF0nbSLGYqfBvJsowboHNGM1QcdwRKTp8q72URTMLf1y4bOxsSsSZsOjc0WsxTdhiDEXzs0qsZFEhfLp4fDbaw/s1600/beee.gif'/>5-p
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzBDubve5jEsMinIv4YpA7zEkN_0bSpJ5y-dPXXYTLTlMrQ6tx6SElZhZwh1j07UU7b2iRl8J_4XXahmJBgKw1GVMoYHLHIqKF-sdVPS0a7xY_FmzgTytECXmUUg65Jyko2ejPH3p1wA/s1600/yahoo.gif'/>y-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6MMUTbNE4XfZeawtugtWCGB9_63FJ-W9zeGhZQxVxHsWmlfnzpH7yCtsypJ0SGZB2P8g4qm35NU_4fVQEdAxhZvaJcXgTVojYN3HTGnQvjG2tGu4Y0kA2W1bFkTNvxJzsjNyVoHiMRg/s1600/crazy.gif'/>c-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKEELUG70a-QvkWXiN2DMJy0HXtG8Ifym0dns0HEzwf0sLKoENUJldlSvrZNmbu5ZtD6aiL828JSeC-uNH2de-JCl_3CYizpLrltrF1Tgv0vmm4mFajB0HuvaN1tPQ8nBZPgdBYhKKTA/s1600/spiteful.gif'/>s-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQElomCol0AqY56NMc3TXcywTg_cT5tDhaR_fh2GN9-033zSk-mU6Mj1eDxgd3Cx61i6PZbgTY3WnTX0pKQ87mnwYYP7H4Xj-f3-ayc5Tyb-fANXz8UOna8PrkK-Kbl-5R1d1y5cu69Q/s1600/drinks.gif'/>d-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjcBzFMLpMb8t6vfbKUsck4LuQgKTuVOhqRThxLmCwhf_yLpnN0aMu_vHYwnR1P7OOpV5flNQsdDP9mQjeMR-gkncSAVmfeNFcoAZ748ofFC5vt455CoSRW4_40eJyFMzuv7yy3Sfvcg/s1600/cheer.gif'/>w-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_8L03s8h36El3oZT5jVQtfjCTuMVzbmDSu9LINv55Zeqa3ri_owTeoutfV09KKIoOOR1l2AXTebO77RBUgW8xX4w5HEm82FaUxAYBxUO1wGjcKWKUybALiUxRSDbbJiR4NIu247fkSg/s1600/hi+2.gif'/>:-h
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFDFBVMN-2pcO8K3wPoTqaAHBCRjEBSw8oCjctjGxOU5_ANXI_bnyeQhgTPBp0t442nYSZiDFMkxqr4c3JF8Ctd37DNEIDfy72mb98M4g0ElFCGX3HfYDLLa-yp8WubpsLFCln90YE3Q/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/AVvXsEhGQLGV2VMvEDv7mOoT6HX9a_GwNlnQd5GVMjFYd5j8qwqCfbg0wHRfeeSdbx51YWCXgA-5-1djWCwA1XCAlj1Nx_jd1bgvw7siIpbnZyCTG1wiub9BEjRwTwfratAxd_CiMHlQtCq3gg/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!