How to Add Emoticons/Smileys in Blogger Comments

Click Below Ad for Leaning Blogging Tricks.

Next Blogger Tricks 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/AVvXsEhaSBuVN8907KuC7kLPOQXCQVM5G12DGwYUMU3LC2O8hfjqglODegS0P6hO5lL5TZcFKpp4uN2nxCll_3_rHiRgOzyXssCZOU8iBiUCVBYTAYIvsMn7Oa-axgbkMMjf0vDNiO2JC2qTHQs/s1600/smile3.gif'/>:)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEWjKDol2h09DzjbUHDkR01yb02LxRJKnkBMYk4snNsxagQHiCrbA5-oh9cALwansAGLi0XSINUWwePdzSWmDKoJnXOAglNSjN8cbowli9uvGJXGVlnlvLpUeXOo5xYGZ69TIpbfNkf9A/s1600/sad.gif'/>:(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk0cbJP8OqjlaUnAVsM9Exr7Ystf_s4GLf_KjcPDJFQ5nMpKVlTB1lD87brrzOR8Ditx5rdVrv3gBpMC6XeRXSpwnjjkEs4QAii-uPLFUNzCXq0-GV1FjkbjAv7TRieIEiU6TjsY8plxw/s1600/taunt.gif'/>:))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn7o015jMC7Fg2tUHc83BXrN7TvAyRu165E8D1OpK9B2da0STXyha7wMlnLiZA_xcvtWkTwuzJyeoGfnyssNedn3sYkxxJipygAAgQdhUqC_CSrWfF1SPy8jL3zfrXHI2Soi6ye-M_ITM/s1600/cry2.gif'/>:((
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilVr4Hd_vNf5cafvZ9xTLjOH-y-3zUl-2w539cLhip5DYXnliX-8k0oJokueJyt_Ga8zc8DUZQh_19i5LXxFxAMVSlpUP4t6k9fgP9k1ia5bj-BLt1CBDGxLcp49ZmSS8CQPCc3rTSsvg/s1600/rofl.gif'/>=))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT9nHlAmusgUjAtwPMKedLetEsjUiDGfWvX5i0eQkYF5vIf4rbmQLG8eLOZPzHaueVLaXQhBcgWyqKKXPD1mlPpYV-RP0GYt9Z7OiPlPD1mGwnRUNP2v6QOmD0vXhfghqtL-D0E8V42Ds/s1600/suicide.gif'/>=D&gt;
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD5tw9ZWzN0cpqSX7iPtIEveoex0fH_RrcksQFo9EkLmoFHgiuSUmgA8LXUbEUh-i6HWpF5JHmpd-IppNqBudmE_8_El_mldcXi_OySkrFIsGFC1cOX0RqoNQKxiOVCvGBMuN2oWtc1WU/s1600/biggrin.gif'/>:D
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuwirsf7DTAoUl3gFaNIcG73HijsIAqNM9yDxLLFSXBIB4gC3zWppxasGP0Q3_8s6K-Qj4HUUr2Ms1BRG-nCyvw1l-5Y9lvhOdg8OQQbwD0PjcjErR-y_XL6B7ij5oF3XyXpHfRHh3DpI/s1600/tongue.gif'/>:P
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZjcF6TXQMmzHtAwjtaQ98833MPfrO8rFcUwrecObTDdlXDa8CDiStJfFBmg70gHQ3vj69Fe5WIYyXOokJAsOfsqJP4TC5CXBPdvJTGqJoMMi0ocbdVFFq5NPTp7V9Zl6QURjW4Zr-JV8/s1600/shock.gif'/>:-O
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNJrGaESZQzPuyokeL6N6qFZh5fSW5iDyUqqoKB4p61Zm7mr2E2NV6_NWGfZ62YsW-KJBW_Wy1sml1vOhh1GQJ93sxNxYksnw3RS-RcfU_81XETKq8mixQR5QZv15Zu0N3DnmWxRVrLrw/s1600/think.gif'/>:-?
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUTBOaaXqnWwbmQai-_tfnTEB8ck4MQRgKFijxAaaqstJ3D539SLNRh-G3uFza-CGg27ggQV0b_dlZ5VMIeL53JO3qx5BSUn88A64laIVIIUKJcfl6jNdNgjJdHoKTZ7j37UzyblJrVOE/s1600/unsure.gif'/>:-SS
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJSKBAq5HYtIvB_UPkNRIYIpBc5tsjIm2XcDr2_whrZ4qt9gUu8pp_yHwhIyYQkZTjJePD71abxBdcfFs77-zReQH8N0WA_ceyFpCK8DoSbBEzBho44pSfKYlutaSuJMcVeED-JL1ZLPQ/s1600/flowers1.gif'/>:-f
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2kYm2fpcj45ZbOHEbMqtVE1_buVh57Pcc9ykdWfal7IQGlZlni4RqXB-p1j93HtKTrezZeRxHO2Wfvr_E-m6qkis1XWL1kG9oSxIpcGNMfJOFdAfff0_tasheXXH0LhY6H6MVm0nBsvM/s1600/doh.gif'/>d(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIFn9CA3DN9SbRFyqi2Cx-hJ1yFk89gNpl1sC91_pVqncD6gqkQV2xlFYOVj5PKDbuxnb-9W3lBqMmAHKxM4JuwkMlfDELlJuo30hHv8SJs1oZLH47xoy4xf_IALJj-CEB1D3LiryCyEI/s1600/air_kiss.gif'/>:-*
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM1sXtP0CqLsflIJXpCx-4Vj3QA7Vvjo6FmDLcsoL5Lu2feb3cKNVc-Cl0oI0By20JX49mHiNtRRC-Easxf2wO5qtAqubxgik4w6r3QdIP9Lm9BTVRhsZqU_34fMFSNHKv50_LGNs9Xtg/s1600/threaten.gif'/>b-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcVXSdgSum4LhYk-XD-R09lfpqUQP9RRAlAF1YPlfCB8I66TyBKPM3abBoJlFUjrj9jrRmxOe6T0VKmUKaHdkAJQCTHxP6MmIMvasM0o63jmZ8pjU3xec_FIigFhX0O6_0MVil63kf-MY/s1600/help.gif'/>h-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBlULd0gjgRim-efdGS1yBFB1uXgSXzh6nBem3UEWp8BvLBViKZSmiz3gJtrEfrfoTG2wZdpIKCYbFWgZB_0Sln_DEtrizKKG9TZQdk-iBHze7NaKUpfdpKJJ-vxdlPAyWgocqMnzF6zU/s1600/good.gif'/>g-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQrvjy_cEW54i68KkZTsDGpTQheckdEwjLTIYUChgkShrD3g-GHTz7P1KG35fUhcCQIu8qCU7yU3LUZFsilSRh3pBf2itVqLt_Vd_ClaZMBiqcjAkFQP9-Z0D1-kCiFFKz0lm1O21XUP0/s1600/beee.gif'/>5-p
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm67eckRSwFxkyYCJk08X2cisPz-Sf-BBD5zPPsoOUC3IUjClt0tHEc2SRI0cNIo7cohVNcQZ6UTreivbK_Z-nBvbrJRs4vqNHdiFMrFp1KHGG0tcOs-LRzGRK5UkzwmZauREJMrEmdXc/s1600/yahoo.gif'/>y-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtZDH1d6u9x5CWjLHwXTnU8chRB_sVjMba5vZesOWdIQqYAbSp6foeartM2o9UVgljex21bi0RFLiMov-gxsppcHWD0_O2XS-GaCtoERuDgObRif6vz2bgEJ4tKsVSUpDSp_u5gxtn_KM/s1600/crazy.gif'/>c-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjHHTKyJlPcsFysE8x7o2VGgPobhRYf7LX4TUQHyLEor6psGJAWlFpgLaOED1Ie9VIfDlZBky7NWOaTgOim5sJASLXVr2iNWxdvvD8YHjfAa145jOluYMBYXbliS-pvP57o3tzdP4-p1o/s1600/spiteful.gif'/>s-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqOaK-XisrPJpwetpwqzMsRp6AdQ-h7f70BwqaXW8mAzVEUBiSgsUGawYddfdMMChYltPi_0CXoKS5f9S87Z54AToM1PIigHG1xsp5StOr3R4S_Y0jxunerOoF3MNzCxp9hXEgNcfdXu4/s1600/drinks.gif'/>d-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAiArwTcXzBctaWMkTBIPp_Eg-SBzR0K1XVJ3p-CwHJEDgWXkol7PYW8nV0us6eLd5-ybiJjFDeIaQEZ4-l08ModL17w7EVjaTaEK0AYIHuhleykcKY-tVm8Dq7jELErYpIvFo5pXtp60/s1600/cheer.gif'/>w-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN4frLFFpFVtAMtKDTBkTrxP9d7VA6fYSqmhOKSESPjLYdAGKKpaNNShXncfJnzNgs8vadZ26386CWh9J2IO1YQGurQ7BU8eKJM82DGYTslq9FBYHAfqduPpjGz7AMlBqnZCVyr8fi9Lk/s1600/hi+2.gif'/>:-h
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiol2UVXkTU2rNKGQErh9uthl14l-KtJpOPUeZ056-EhSaalUFkTNWgpGZlkWByJAEllcMqML57hmcIm1kpifMq9ocSkAJcHDCnMgnU0RhxfOnPh3PdFrNw3-ojN0DfdC-OxkjiNPCmtss/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/AVvXsEhaSBuVN8907KuC7kLPOQXCQVM5G12DGwYUMU3LC2O8hfjqglODegS0P6hO5lL5TZcFKpp4uN2nxCll_3_rHiRgOzyXssCZOU8iBiUCVBYTAYIvsMn7Oa-axgbkMMjf0vDNiO2JC2qTHQs/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!