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 Emotions 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'>
<a href="http://www.blogtipsuk.com/2014/08/add-emoticons-smileys-in-blogger-comments.html" ><img alt="Emoticons Smileys for Blogger Comments" title="Add these Smileys in your site" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBCqgO1PxvDi95xl_4l8q0Qck4fwgRpEzYazRvHHtWJkhnacBOT2uUgyj49I8DnkTDfyTzT7hyphenhyphenUnjfaNrimRJeGwp_MoJPzJUstBooOyArcYb074tjcOPrM8AkUW8EFRcElVW0O6ZCmVjq/s1600/Add+in+your+Site.jpg" height="20" width="100" /></a>
<span id='smiley-more' style='display: none;'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4oHa9vrlviX1OC4WfyH6PCjef3M3yNx04vup64_yBYwoL5CYMZWcz6BlMuti_Lyz6PQViaYrSNFJIRmtlQTvDMpoluJ-HQS2UJPyWv4n6yJnRqUfSmUmHeNUbthFnTlUtTFTfD7qzrao/s1600/smile3.gif'/>:)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPQfYO0bxfWg-r1nt2yETWy5Z5P-ShgWMGey9G9v3MzNRznzbWbItcH83Ma9jzinFVhi3WvajVXKFvfS0QJjsARBnKfzKLvyAqXeCqMtc2k3GCKLOwtVvm4MUNmQTyPJIbAZA9pSCkmtE/s1600/sad.gif'/>:(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpsmGjHQTWtQPfyZBqZ6e1_jrhM9DR_4xwSWCFltPAQuzl14xp8Goc8uIAlKQjQNOUJbETE_cuhuMksWXcFwMSyjPCeZ63IOdCOBAN1o56tecyvev_Ml0bjveSDr0XsNOt_G67EjhDJ6Y/s1600/taunt.gif'/>:))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgusUgN-Fe6TEFzfb_w2LE8zhwy6wNs7qNXyA0IiMTYyBNF-n7XmHIzAtwGpWk-Kgn_Sw8xAsIty5i07Qg62tc5TIKUsL143W1EiyK2p0UgAoqAFu44eXkGyiI3jKEnG2PkxcVTy88osLs/s1600/cry2.gif'/>:((
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmzWdJp8KdIeMOfCrdstn8qYAy-uCYAa2jmjlp0LEsLrNC0GI_AJm4heWNJWyPv9JWWPo-rlvCqpsq87FbAckPg0qkPFvg2X1iKB09zbsTa12D0lc2miJ03Z1R501pSSjBaeCY7L8ppEU/s1600/rofl.gif'/>=))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3fD0WtorbifmlMgDPfA5cYLXq_ab99QwTx3bGpXBUyeUpI6kpaV1urCgoaThB8XiuHgPN_8WOn7VMsqi9CIpzNVzzvUMkqPGf0N7VqCFI3cFcgWqz7kEtIogBgmCkDSkWY3bTidjvV44/s1600/suicide.gif'/>=D>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8RfJLRu3xOS1nXjPyJGjLyzdvakKMwmP3Xjrm1ba6j9PpuylzAZ-082eeLfBj7rAk-J1wtkFl33MirU7QlqPCihj_v2AnOQMA6XZ30d1d9-RrgHSE6mAWo4id-8m4naguJTnQJnscnp0/s1600/biggrin.gif'/>:D
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKNVD-AWAJsMeay9cnjZdapawGepz6kTNtJc_PqMtvAam7vr-qFEshSKYXHBf1JpTNMDy-cbSHa4Fl9eMMPnOf0o0OoIUy9xfIrMVaTK4bO2nM3f2w2yuvHunUD4ub76GYDW8H2TqGgpk/s1600/tongue.gif'/>:P
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsHB__0dUUSjpL0RJ8opzjA1yU5PkPUzp9aRwytZ_tiQzJ9uNYQUI695WmGjB51URx-P5VvdyjrQzetPGsnUNsIa5RQqtTZ7oaScU5RF0Z6a6s3cFko5y3Y8d8mRyawHAJDnkACLTesz0/s1600/shock.gif'/>:-O
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZuGl7uiw1afwDdGT0bQXnitzeZReqmrolbV6mB_WzI1L52BZSnoB70GiDxnmrMHtUFIF0Coa8NyHrWQHmkwfMD4k1V5B-UqMf5LGZYTXu9-ktwxDScTGbGUiLpCyceNIHiBVu6h-6y68/s1600/think.gif'/>:-?
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCHEdPxLP4_VSlXPgrqaxgy2hfP1SfjDCdFC1RFT5g-4cz63mDi2gNgD3cERbhnlpBeqybePns1hByN3jMQ846TDjCM_wg7sbgZlA7lQXXN0olp5UtpCHdFJe4s6M4rQxzLGT9d0DBu2A/s1600/unsure.gif'/>:-SS
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeNMZaQE9S9ba_ziA2Xag_N8zMKjqdDUKr3sI-NNCPSS3nSTf5nu25tHWi7iPRVuA57G4uV3xJt_OC2D5jTL_DDz5c9prEk_MmnnX3J6AsWO6BVnuf5PNtkuXksEtgfky16_BpG3YDp04/s1600/flowers1.gif'/>:-f
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2NOENpOBPG4fbTlPCehWWWeQFonwFjuPeTHZy4Nmxq5CwIgFIJ-FxWrKa10gGGMs_arAF24soZOCNcl64BtZXZxGYpppG65-IFK_GbbYLnQlFA4hiYzgRWvxHFI8NO0lA2Yg6-JdMj1U/s1600/doh.gif'/>d(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm9Np6skLC2Wb3DAY8VKfcxKGrmrVIDpfaLRicOqd3O3VCC6K5IfyQ3AEkebcF8OymO8gGg6hjSOnksH1vsvqPr7JNv2TT8eAepV5V8qfXcwV9UE7VljG4h4SBYgE9SJT4OqAI-Yy1d_w/s1600/air_kiss.gif'/>:-*
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBy5xj3SlxEBujv4YUtgcCcOJ3bfLCR0pUk8Uinzr7ZohPTWeaoXO3g6fFhWn1TO4Gjmc1RpZi_3qQ2iFXpbq6i0ND-b6C1hbjmhDzlZE2MSKJAoxuypDE85xaNwVIMA2k6Bb3HiHegow/s1600/threaten.gif'/>b-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvj59L1djY8ta8KYGAsTaVz2GcSKS323r1Wn0i1mrzjdhSSfcF1yT7QWV_5o9ldl_MyuYs_0ADxS0EovZdes1wXUJ9zkWEK-GETnS2SOioJz_hce7WUDzTdJlKWdL_fqWnW6IZeSWSHyM/s1600/help.gif'/>h-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirXc11HX-xHvPnr7qAunAe8e3R4EzIiIYIZH0njZDJUwgUTwcsIbeFbUw6ZgTVLglaOyCEqPtRuAhxMqYZHKN05VE_4B6biKawLgs09m-PUe2r9rAC6qTuRDoq5rCuL9T9PCso3Q_XRAY/s1600/good.gif'/>g-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpzA_LxiUu9S9b4QR9TqL59jyZSeq_9j_ZOIcx01StsrqrQ0iXSF0r-OJwclwVXYnmmqKAn6mjY0eOR0M7XdKrPz7BVMsS_OPBTT9jBP4191rTDR2Ar0IEhChVSqY1c3Qqxb7d4jMKTVA/s1600/beee.gif'/>5-p
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDvv7dOrVo0-rseNshlSSWPxM0-IzCG9y3KQy_vUmAQZPZW7Bcrgjk1Y7gnTWBuOFUPwdDAJI069ytXuF3PazNxJxbLf4K_fM6SCezObFzDXQXRzjphRUKJxfGs1kb3GK6TJj_EF03ahY/s1600/yahoo.gif'/>y-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkHq3U_QYl2SIRRYgv2mSdP2slWiUeyhU0xl_uQN2fPa-YeIZHJyIrK9VV467aB8cCJ0loWJi-xNwhk8H3zCzSwwECt4yAfObFlpIT7r9S1jQv454QMF6MlZ6Np68nEzYDJoQJfg4HTh4/s1600/crazy.gif'/>c-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkdFn3Z0MbJFG3jGDrOlolD2LhO6vkq9GJ5GIRwxv4hTM4xdSCn73SIl8AkhYCKjN9yOecTZq3Kv_yo5o3dR9z5d0MA_tschJ5VZFU3EqsTaGgruBz65cqZ-af5kFfNhLbWL4vDjeBt1I/s1600/spiteful.gif'/>s-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXxGbB2S6GoaVK2A2DsS4Rgv4NqGW3n7Vb-2LtEylT6ohWZTp2yO1Eb6Ga_YAch6Ahrw83CM-wBM9bLQfE43rZUqCnGaYpMEjyo1AFIiSbTcKCaDbOec-oxBqwnTyuu8tBQmTa2rjTIyQ/s1600/drinks.gif'/>d-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmyWBgFQs9JyREs15pQSF2CQ0wy8-bGCYFlYguLDgyVsqYeFK4oxMpiVYqvFw1oSHxC5TAtbLv7JRUB1KajQEk4cl6bYnlaZJiO4BkS7Wjj24s-Qt39fR51MIPZSsFJrAbKIIfjdeOR6E/s1600/cheer.gif'/>w-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeBT3jYH1zmUpWNvTnDWKc2Dr50b1AG5ucW0wZ6cREwrC_pZ4saYcr1Kx3ZfVVl3sPgniJJPrdMR3OErkVMXm9OSadFOkaWIWzAPirOC5SZVzcn8TjGaJjZANtA92GudJmljP0idK9qmU/s1600/hi+2.gif'/>:-h
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwTIGsxECmFrJOHEco_YDQyefTYs6ZBdzSTfYn1j6jAL0sCEcIhot8OtQA6tihSKHJ9I4o2tMrsleOUVYRltHfEqq9QJcudPR8b9k4y4xQpMPhxW_VzNpX4UYjj4kiXimCCgo0QfnWHC4/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/AVvXsEh4oHa9vrlviX1OC4WfyH6PCjef3M3yNx04vup64_yBYwoL5CYMZWcz6BlMuti_Lyz6PQViaYrSNFJIRmtlQTvDMpoluJ-HQS2UJPyWv4n6yJnRqUfSmUmHeNUbthFnTlUtTFTfD7qzrao/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!