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/AVvXsEgg7lzhW8DoE2aRpLkQqkV9R3cpRIHQ5JvnsaxVTlE_A7fZWtms1S_TKoQ-OQrcjSwL6DXanNcbYV8SpJR6Aq_nheuCWXzDv1ojS_1S4XAaMaJZFfV2gii_OB-a7nX0_1IxjK0jSHDrMf4/s1600/smile3.gif'/>:)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj02JqMa6DUYt4-AHGgrXvP_8z0VVYjjw6pMXzU-0K3-Xawt2rr4zfOCiSn01U00xJXn8Ji2imTkZlQkmvQFwNjt2IUwmibc4VChGJoLzl-rj9avuBlNEcUiarW1JWNvoaCXF9aenA1Evw/s1600/sad.gif'/>:(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmcgPQmHoAGFAiEga-2bYuU7G9mtrjncsLLMATKNU9Q-v99aZogjk7TXJT0NnL3M_TdVmloj1HuKJVzykkXvKSy4QJBuKPHuffbMrpwcCo3raCuZdjF3eXF-Rasd8V0j68b20zo8Njow8/s1600/taunt.gif'/>:))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4CUPgmeT-QhnzLYMWIiZIB-t_OGLC52a5AixuD9LAqdnj2fyztlEWN-3O5ZsZrH4plvhOhnym2ebxPVl5axMcA1LNY5ueHDI1waX6o4dZdKE5A6gw6cZCSOGd566M__mX7oWE1Ue4oq0/s1600/cry2.gif'/>:((
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcGLuJRJH-hIe24VfuK8jQE8vBMIrCVB66gnY-6LK5snu3vhSYUtbecyFZgDqYoujXC_1ybNTy9NH3NnQN55kliEatY_4PBctI4Q3QzhCwgRWAhOiP-C6EVXtlPu0ZpS-0I1oXI2RE8jA/s1600/rofl.gif'/>=))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhod0XeJ4vF61Gl3aQ5vZoLw0wtz7c06epkoATl-1BAwAevcOVN0NvBSIR_91FSdSle7ufqMmtP81z99g3M79KLl9ArblfLwormV93QLnBm6T0iRhWmuyi_HomqkH7Knnu6S9JTsIunDAM/s1600/suicide.gif'/>=D&gt;
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5jzMT0j8pXJwxY_QzKcBic-7N0MzOJx_JVBr1uDxRkbVUpo4ltvYumLmcNez-ISyLK5hGf0rlfsH2fZLpIULIGVlgJFDnMGpWAIVceBk5C9Unh-M3kUGUPWUa5Rov1Cgld0mrw1xUdtM/s1600/biggrin.gif'/>:D
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtBs4LSo2TlYf5YEC_euu3LDTwewzmLykuMuN_o65IXTtBNyOMsY_8x2AuGX68AZCbRORwOdwrdkYAiHWUD_dfmj9bpvvf3rWs10ZmAN6HZ_i8gS8_7hbDeQryLhmwIQxbMSekFGe2jbk/s1600/tongue.gif'/>:P
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcl7LzMPPS7K32mcB2baIJlCNDO50erThoj5d24W7rJxrRToAp1rO4cVNM2KZmVg33xzu9ssYsoQqNg9oIsBOnm7r_m-bqIDmtfj0A3Q5gGrJdXQB-ZK7NZrRWsF5FsdtpvNUBXlpxZUA/s1600/shock.gif'/>:-O
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn1hkKlRmiGHlNCL5jTpQ9JnLP9dg-t1ydxTwjOvQpIVkj6HBf4tRKlJ5eIjwJ6_oS2Uxb9SwgU8u9HFeXPvURr3F9dvesEy4FICT7jM8OrA31GF3u0eg_Xa6WUssFDoXrnfVK95Ozpqg/s1600/think.gif'/>:-?
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpM37Smr3lvIuxHDxgggf9qieApMPaUXO2r9YSaTEPVE5pn3QUjtMWpeoDk7aPUB3UuwhxfaVr6zK9vsYJV-_t8v1k6LsdcRbangrx_LBdM1MORtMbJiQ7EgX5FbQ0c2JOfpQY69yCvNU/s1600/unsure.gif'/>:-SS
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgELd3lOJkyEQFhwHu6NON6gMkgCaoUIjo8U3w44yTC3bmbb12fuE9WPBmuOmm02OYxW9R1fT-drQnCqBXPtavR86MEjU5yVPCDV7arNQoBrt8ubGXP3SxsR0Bs3_LmDB6pr-kgHHA3lg0/s1600/flowers1.gif'/>:-f
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs3yk6c2RXcVam45ba1ldsSLInWGg0OuZlFmktOStbO0aggLyzAhv6foR4mNo8JAHxiSD4-yh-aO9Sb4B_WhMv2v9IzkgW7YamHJsTQUHrgRMPwfOBsRv7_7NMVVXEvKY6dm2byPtK6uc/s1600/doh.gif'/>d(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIXL7AYNIlK-fMOlrSFENR6TgxPpadjaZQA8n8KLbL4Gvw3FN5HhkuDf6_wy0X0s-22kzGHrndTlUdH19-aiSMd0h5VPgHD2fu9uGbzPgJjwgxjPzlv7irE2XYsf4XR8j_ANdSP4342CU/s1600/air_kiss.gif'/>:-*
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzZAzNMMCVLq8VXRLW_-cZk9xYgEbYiSCMG1Pv9rEs6VmDE4Mj-VLX3kulRZqQPTyAxiZ9yzYoB9NEbzcTH91zIv14aiTjDZQ_8hxQvAmoSj1Tn_ANUJdJxqtzvJ2ZNJVG60v7Fjw0V64/s1600/threaten.gif'/>b-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIFW3n9zVjFyTU4PZujKJ3_7M-s7zO64xIHyYyU-zXY3OF8w4rKQwVTHehg2Xlyq_42k5fEai68miDQF_J_iTgUnEIJHlmKhJcf2YM3L9j0VtsW3uaeFwANBzjtykjFgk7J4b4LiOYzSQ/s1600/help.gif'/>h-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyVR05n2FDW900wqVLo7qpntlYUodPqMrIze58CXHgdrXz8DU_jPGS8opOadaqx4cexiI0igVAZKAvpKSnHLX4IBF5jjIqvRI3ZYGfb4RPJ8NCZWO3_AJQQt3YuPNRETeb-G0Hfp6gJGA/s1600/good.gif'/>g-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiChQyrpD28e2NaUJCOdTENvC1XM51WttQStth3LtVXdwC1TcakpM9Sn2WIThgYC5k0RyyKtF2iKItO7n4Iygv5fFpVtKZWpwKqczz4m2wuM0FB5BkS7-rwfpw6Le8raMy193A4ylNzBFo/s1600/beee.gif'/>5-p
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9yXaZ5vYDw12vmK7oek5O5aOrVq5teY-P4mRXpg1q2hd3sRA_Ob1XvxkBZz0mqdTWC-Peeo3xyAsmSqdusmJ-fm88k1ED90v4rzlIw1gM2HmZd-laNekcMpQLMz283N0XOBMiZrjRP44/s1600/yahoo.gif'/>y-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKylld1GTK3xxswWsviEyhz0BqiU1yvDSL0GOtW2BlM4RxBqEG-mTeR-7TZWBrHE1U4QVF6PVdigL1jnX03EqGiqMTz7C9o6jEbfHBEWVxoeBu9T1ZYkcUdze6vcQ2YWyBQ0SqATkrOGI/s1600/crazy.gif'/>c-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDvHsrBueCunjpGnyQ9LnWJrMkcBq6X_-Z2YOicXHwW0AchQDLConJQna9-6G3uYVSYZHy78wGFlMx3QUnv_hndpUdpR80WHdmTD3zex3S1eRedJAllvFfoRPtU440hQntGw69J6XnUqg/s1600/spiteful.gif'/>s-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeelXkhkdU-1MBKKuIdsMJET8uK3H0ZKi3y96zswThGgcEwmpYERWV5U-zGwTnJv8Ld-MdV4tbEUmVzj_s1JgvOZ1DmmJ8j9hyphenhyphenp6DnKD8vmLp9m851xmwqTBztHjEIw6svuClUkmM6jzo/s1600/drinks.gif'/>d-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHuMiCGisAsSqYt4gLTXy8mSv51Y2mSakN4iO2I-GLsvo1dLaTDSTXHTVtNUbpWjL9HX8hIOMESZ9kYeKrrBY3l2d1HpAkW5lS9oNUSPYSVOi6U6BefmAWTgXrgLBzHdqBiceJb_3Rk6s/s1600/cheer.gif'/>w-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMiLjnsgncnD5TkfjBhD2uTBhyphenhyphen3G9Ed7RrW-t4zDcLzrj7tl8ZIhlxQx3j8QsYibasxejI7ete3_H4oqUPZ86BfbDcWf0mK6ZRN8S-088tgoeQQtk2QgulZoABemYgOZucTawSB2KzCHU/s1600/hi+2.gif'/>:-h
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh476cpVq0uqC9vOVylW4aY90bYCDMPIWzC-us53iTwrqpMn_gxq_j6ELSgyEwAmoWuxKYArFIgybznl20rgVdtZh9PHDs8SwPe6F7hsmbGmjC2nyqMWwAOVskoTk9kAAxkNtYZUx54K10/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/AVvXsEgg7lzhW8DoE2aRpLkQqkV9R3cpRIHQ5JvnsaxVTlE_A7fZWtms1S_TKoQ-OQrcjSwL6DXanNcbYV8SpJR6Aq_nheuCWXzDv1ojS_1S4XAaMaJZFfV2gii_OB-a7nX0_1IxjK0jSHDrMf4/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!

Posted in: Comments,emoticons,how to,Widgets