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/AVvXsEiR130UGiiBbNCqtuVUP5syANXJktx7LeXVF8oYxhFeV7p0_z_eTf4eh9RegcaRu9lFYahNf8VIWbLe2s9NVtfgjwnu83ETf9F_gMUBo6w1nvFkGVkDCPnGFCnfeYCpoKH0Bp5zNwb6kMQ/s1600/smile3.gif'/>:)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtkiK60BhsmpYcIp7UWJe8R84S8xZVPeNZPT3Ehe1MoUWAlZhxPAQrNHmr4i0jXd86XhPNp6FdjhN9anrQ4ypLnE6KKBzJYpRg4rKjM7bReah1o27d_vePyJaGPLEu5_2-dXYRCOwOoak/s1600/sad.gif'/>:(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ104LjqjZlsygCn5YefMq94j6wD5CE6fkohaBW_13bmgf-jr0Eh_9BX8u1JXpF7k0PkkVZYN5gTvCuEsPoubZf46lWUaIj6H_cWw1O-5J-ge8BYGRE3yifLtqv0TUjiO_S6MNMKikDW8/s1600/taunt.gif'/>:))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA1mNL54qwJvM1pjRzREkfwUO-h4ExuyXes781iQePdXt95V4JZTYaeIzswcdPFTGo27QXwm8VhH5FXFpj_lffQ72xAB16lfo6qQVTL7IEprZFzlPsAgtU9_I3rixMpwr6t8cd1NQ5yKw/s1600/cry2.gif'/>:((
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTDAlvtoJ2rnk5khSJcQ0RM0D75pDsJZb1e-6vLg-g_60dQRNsGzpbbX_DCZIkieJXknqRw7WTTlYOdxmiNjOmZLYPl8yVXPLFGfzmm2cuXMKRGBxwFHb881GXa2wQR4vVOEEBCQFdhLw/s1600/rofl.gif'/>=))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3ozFJFJ8LFq_fiI4ZpWVKx_qcze8gLBelrf__sMBemve9sBQNkGBAwaIlzGCQP6VRlwA6CQF0kCF-hT33wI8h3YurBj7daC0DJgE3s8YPn5Ud5wD1rhlbglZzhvA2xSqxHBrSLvOLhbw/s1600/suicide.gif'/>=D&gt;
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvvZoU9zOCgbpoub2qBtgxinMcCpl-FkKIRByS5XICzvV4cdiFpy8DRUubOAupxwYl7THb_4xjFX3BhlQ8ukrnmRqIcdgO-IuS8j9zmdLMmuS_kBBEk8q3oxsKK4UWoLlzCkP5ViArdi8/s1600/biggrin.gif'/>:D
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUOCpObV1-5UG8U0TKhw4wWLzRXAAotzBEXe2D6XYdUJ0bGEnTW2HdVMYo3e1C2CK4CuSfkeVYn57_59Er4V50cjczY0vr3wqAS_u0IFy9_emuh-3a8cS3BRDFoeef0JtzIDO0Wo9RVYI/s1600/tongue.gif'/>:P
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlunsboWwnmJp5smRHOuwi_4prvpLBX7NpXOQKIRTzvAVdTzrM1Yo61a-YmBLdHB0kyTfy3hxekKnrGzSy__kxbETYp7qlQEmJhji_Lrro1SbeDF7J5XNczcqhOjf8uzNIGK0KLCfdi_c/s1600/shock.gif'/>:-O
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVR_N_XcQfJIHYNtWF_fQnKEkkKmx6UjUG4_flZjBaVEMedyIEO5ixflWfUtz4C7wM0lp_X1YOpLaitNGXTlv5hLOTL2E1ugKyneJnB7FDgAPUfY1bVU1hRFHDsdMmPKsAXaxiIekE7Mg/s1600/think.gif'/>:-?
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisPOeQEfEawkb4jr55fceuEmTsk0IsCgm6YBET2wGE06FKK80FJWX_0O7UyIf3W6pjXq10DQb9bT6LVoLofOn5LtMmciVS-S_vRaAGE6xNqtIp1k3KD9QtYhzdNS1_SoNlZlvwkCmFX9o/s1600/unsure.gif'/>:-SS
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKKKxLUhAjd0NLnsXJhULn-17wOApmBrEl8kslHo1Vsh99fw7P3GuZ-jLVEhU7WuDRq1die9FkH-uF-jT7GnutdAr08R4AogVcO2VWcegxyWcN2DoILDKwcnXmiwUUp2ZKIJ8eCxGbyy0/s1600/flowers1.gif'/>:-f
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3oxupNN95-gi2D79OJMKsfv6MriaQiUzK-zgHbtD5GIm0z2QcfzgW9xtj1qtETfvXBQZZnYfyTnraSlpNu5paWMpS4B7Qi_obM7yFcxXoJ6Sc0H05wSGAI0WAymo6ZN6AOBGVfAutjRo/s1600/doh.gif'/>d(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDdKiiYyiD6yyPcdnZKP5jfKe909g2qVZOWH7-YD76W-S2zjF8uTn8zXQzEfCmkJaJIK8lKqzvaAIhVlRijQp1wUiVPs0kjmwtKTNijbpvOGcLmkNJDpALQiL9WyB0FHnD7Xxr-uT8UqU/s1600/air_kiss.gif'/>:-*
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmI9Y-R_gJwMtg_BF8AyLpYAc9Gn-EwCGxL2K94j8w0kT-JLSuZnyee8iU13yZ_lgBN7xQWyVPDvaXa02R2t9Y4fPBXkgLaT1GTXXVNwW9Wz6oauKYw-eVpL8M90JyN5ouTtXj9icUNSU/s1600/threaten.gif'/>b-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0d-h8xI-X9S-mJ86xS2ilg2S9-3o6FOYW0g_0GxutLvjiON06JDtKzHxwe6mCnrKGSY6ZCv4lRTnFstV5cxgvcakHTDHEHfbDXvHFDuFRJPQONG-NkqWEt0UKp1LYgHfAs7KRm_RcJT4/s1600/help.gif'/>h-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMb8MNdkYh361Z0Iv00ePum81YTfEyQ0AeR9SqQgRxUEd-6fGZkofZ10Z-l5jPmzR9ZQLO0RGUOr9nas_Vu9lgYaBVUhsXyddt46AqcRWuFFTByNSaB-ZuiWWuW8wMgEcaFmFjjobogx4/s1600/good.gif'/>g-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNS-1py4ivISG3L-Mr9cvlaEDN3i_1TtRJf3e0abqc0fIW6flycwSBBv-00J09ytfk8WWa04yXgVILQSVuOuUSErjByOnAroppjL5DWiEwbkOFMbIq-OXKlyKbgvfC-2pdXvGNVYF8W1Q/s1600/beee.gif'/>5-p
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdvEyG6rvnOGR3506knK18S3rHHJEc16ivpjfbagTcU9ZmHS8uHImymrz8_pUQyln6NT7SASQh5MWIe-BMa3rh-H1-Nl-kQpF4G8uhcyCQswUejpXfgMCoiQji3ihUdGN_ZIbnSTZ2ChI/s1600/yahoo.gif'/>y-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizl40fNxncsKzBhSKDxmOYCRU6n6k8WM0EsHS8MbyElFnCub_mqGzrKuefJOaXx1qyZ8OJwokHgFplPPaDfEqDBmdyzg_mPUUjPSwtW8YehrJ-ddUw6J-WzXe33tTTgH0iaBHeR5K21BQ/s1600/crazy.gif'/>c-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXuQkLJs67zoQKT73khGEoV0-jPjxtpDlzmYN3ZmvQbbqclUwjLZPv1bakTB3LUMZn-oJkvPlnPDCfMyzXosvN5SDN8UCX3SvFqKZ6LIPO0vGZfsLbegVC8F6fs3l56xIBSKysHsCAB-c/s1600/spiteful.gif'/>s-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHxKqvxQN_3itU2QE5m3byaoUWn8kzU9eTkNx302oG6lt9VbJpvfUQ_DeQpQOEMzrdpHTuDl7eXlOrmLGbapNZuc3QXvf26h_VnWjrbKT75_dkGhGDuVZoScSb-G0-ISRvyj2wwyoLpq0/s1600/drinks.gif'/>d-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcLobmowlswOrcblIe1q0uUH0MTDZZgplpdHLqQ4CXM1cm-tSSim2KnSDxx6B06RtCsTKS3QgGLAcQx4IJS1iNUad2S-mbONS1N9eWxkOBAAyAubTZhXuzZTJiqf5VVVBCdoYosHJWBJQ/s1600/cheer.gif'/>w-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg49q1MWAE0TkrUMY6FnAO93YmTwLd_1JBdbbzPLTf_2nERkEPasdeVFgTh9Q94f0Mh-CuwAF6a5ZeqOKln4JpkVhsU876xyG1mmP20azW13t1CLIej_bEOKtc-5dY0Qq9XY5btjtyl0ZY/s1600/hi+2.gif'/>:-h
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKZ9aRkDylTBfU2gP0PyVM3UpuXX_n2XaSQUszl6zZISTTw9moPpP3ZYchyphenhyphenhJdD3VdcvbymRNL4j13oxecE-Q8M51LHUIFhPPWWAHCvtBexAWkstraasugHuQRLj5T82kZ-r18vi7ofB0/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/AVvXsEiR130UGiiBbNCqtuVUP5syANXJktx7LeXVF8oYxhFeV7p0_z_eTf4eh9RegcaRu9lFYahNf8VIWbLe2s9NVtfgjwnu83ETf9F_gMUBo6w1nvFkGVkDCPnGFCnfeYCpoKH0Bp5zNwb6kMQ/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!

Tweet