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!
Step 1. Go to your blogger dashboard and click on theme > 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'>
<span id='smiley-more' style='display: none;'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6ymBO3L1x5alk36msr54GMo9i2JnypQlujvZV5AjNAlvYzKGI3bDhYgz7CXatwbhhyphenhyphen91Cc1ikpohQrldwE7f0eu2gGCZ41s-m0qDNxua0ES1975_43LHH7AIfER_GdRSXz9yztrA0HNg/s1600/smile3.gif'/>:)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtAGFY8QeUPauB4QNTWNl5vUO_sy6GxAaWPGpsqh71KJdh3pSMvsEaFzA2mjQ0QDeMq4_VIH3hY_7jDardvdBYPj1Df-mRQur2ELP-nD3zjeka-lCvSxdLN4WUAku8HopeGSmoHnpVhgg/s1600/sad.gif'/>:(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCVBhx2FsQ11bNB1tNgyCbjp9tVOCiehqzvm-h_6hEavr_PS792W05-2HFjsjJl9j_aVOpyte-NJ7mc4ouMd6mMWXWFxH4iaQLJ0WRaPdfxcRio8SwXG1IMFyyc3p6mCgU5Pkig-Pm3Qo/s1600/taunt.gif'/>:))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ5MssSGvTzgg3LwL8rkUFNF-9IFYh0soCBQkTLvpVtUQgEv_GOLBl5B-Ork93c55NExLIOLd-pSdFC4XvtkQt4bKKovMGz_CzX2547wVlHIJodcri3mc6dkIlBgjZ8Hz6DZaO30GvLvQ/s1600/cry2.gif'/>:((
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiml7tSYvpD5TKidYxvWnYnGPfySL9J6RFMwyQnryWm2cSr3aUhlerwudXAFq3f2ziL8sBNFU6zsNCjyvFL0198i-3MvMve4Ufap4bi3k-ToKRVp8ecDF2pSsq4nSd_zW2EvMRsyt3gCjk/s1600/rofl.gif'/>=))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjjyOfA-TLa9-LQBmjs67LLKRdboV7uEjOrpu1PTvaKe1B8WGKLmtyhLn9RZy1rmVvzKFT_5MAsCPdPOdMWfiD6SHn-PZ3CofC4DihQTC_qZ0Lq2aojoYf1akAMfeEQpsfQNu_0zUNKy4/s1600/suicide.gif'/>=D>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk8CJJSC2oVqNsdusLxx4IkJkxMTVMgYErlBDDJBEtDG9n78Z26rDfeiDGUo6ctgsdh8nRC_m79RpPIwiYjaWaIeaRDDUF1wIFW0tWsJkEviDvncWhTVqPGbDtdIWaQ-m5xcAK6BQqM8M/s1600/biggrin.gif'/>:D
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSWtguqAgf6zArr2cmYXP5Z3gr9dR3vA41lRVcUDKDMbFL3q4DYzvWULHhMSE5-eNe9WUCeM_fsXShiAJSGxuStfuJGD7w3ULN6lw85Y8HDRAru-alQPgUkNZQyWZB6yx7AvUboLc5DR8/s1600/tongue.gif'/>:P
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHWCFlRPlq7fxr4pIOBogdpefvkMxmmKPPlRm4qLeInAjm03E383wEScJR6RJgBaMMlvJALMvpqveBfpD5eTpA27wOW2nBcCfdnrlMxr1UK5mFI19aUyjNX16_c3NSGbjtn2IY6mxB_gk/s1600/shock.gif'/>:-O
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPlSEfqcfIwu0LvEWwYuc3lxgMkOGYe_-uJQCB4oKL3RcsA2XZ6A_uGZjBm13QkOet_p78uEXSATU5u1sBJe2VnHC1-mMaH0sbZU6aAHXeEDiQY0QxvkPYjWjzz3tVwQSgtBmG69u7-AA/s1600/think.gif'/>:-?
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaTAnY7ia-2cyXl9qDAeCDh36BJUzLTFOXeNE5uQaRnlyGQzmuugRNofXCGb62aZweU2xRDST_rT1MsbCPNd4VTFH3trFG7UWyymV2A2cj6gzx1jfu2PD0igauWyNj70lH3B_1r9f8vJs/s1600/unsure.gif'/>:-SS
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzohdbPUyndP6nyFRtEz1zGnkMlHdbqZojKAlqKo-opP2b2V2TOv-5tlGWsoYoIyDXsSRvpClCb8OKyBESNtAkTr79xoVzU4CO064AVXSCV_CmeCwnKJVZ1wyAR7EHmDhYoBwNpkFeCOo/s1600/flowers1.gif'/>:-f
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmGyZrq985qAvnWI64-4HFwgw2eyRY5sHR16P4Fjeu35BfoJU-l2YHvd56z4d2fvA6pU0_6imk86lE_4hYIELkywrtrFRTYgsbKgfqaGCqd0_uYHOWc-uWppB39KU4yidJ72p97FRYOBY/s1600/doh.gif'/>d(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVv19DkxaWvfpAUP0tJWAj4Rfewixx-QWxmYGk2UWmm5T-0vnXXYLjwtf6u4UMjT0uzdmApUU4K8Iqn9kocOWUw21SjgT-RAzVNJvyS8wFECA8_9epYgu0cR3PiZtcwxz18amusOqFAyM/s1600/air_kiss.gif'/>:-*
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj1JjiDke87e2JGE5bk6aLz2PGdCI00g_iTxYjxZjiW3EgM0u-8pUAY9nqJONFtjArqzhr7qKqiXg0ADacR6YAyO6Mr0EGoZah6gFolqizRoiSOFTbRT5e984XL_ual5ZAh870DJTE1PM/s1600/threaten.gif'/>b-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2a_nfvXHVCPw6emUbCezpYDNRGLdVyMBXcGMP45IgHgr0X6uIfRuv3ZTFY2g2e64Iz_gZGGqloO0zmZHyx_Y9Xnt-TaSB7UewlQxPHF_1poxDynpscIoFT8xHSAVZw9P27UtRM2jHksw/s1600/help.gif'/>h-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_tYzpeoCHcR4yWix3Bg01VhUZDutiVtPDzFUhOcyanhjT9Oci_UElV6MY1-PIyTWsnkID-RuPxW77fT6od8ze6U6soXa_SFDmd5fUcTNclu1N_GjAVG___7b_k93uiwqmeCWMl-V8rwc/s1600/good.gif'/>g-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgso-PEHNmjR57uvGGhRJ5ahxH7C-usHukmmnqVlMYUi3ih8ywS9n8wPdNBjpBi-5CmEcE7UajrTw_5vKVgsNkpJbMy2XFSxRlAxFejVvsyHdbigI-FcGLBKOZPS7naeTYMlhANnKDBc3o/s1600/beee.gif'/>5-p
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9qB9ugCFD2a3b_FEicIcAePBDVbXlROG5HveuRTbU1nakll5qoTPOuK36MQuLu_LAsI-VWh14iNlf8-hcNRmbmlnrLdqKkBEBarU72xOq0rTaM35kayMagt7gAPyv5PmZAPaLMo3a6NU/s1600/yahoo.gif'/>y-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg09A6mXtWASZZ2isF-5wds7AWzMdSmyb71wzhuoBDK5ht_le5W2hiAiQRhf3nQgvX5kTOWl9fGiaL2UEWBZc6LB1ln8df1fKDb6VTdceSz-w4Th5m56e8g8lF7BvH4O4oD8yGDcl3ySR4/s1600/crazy.gif'/>c-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXu8aMV6Pd7Td98KJQHvfi_dd93t59sjUO5FzSTQQLxDtzfx-uTFiOnRU1qNsHjOnFYVaXylBHXDgzVvOpMK7TwhxIYs_3tLkPtVvJYqMQRHWV07-WxqnZ-7YXvJwEMbMOYd7kBojD8hI/s1600/spiteful.gif'/>s-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-jwuYXgQ3a86pxGbhyphenhyphen3H5TO8WNw-Op1R6L-9fTLazB3UDUUJerfkzZ2tEbBKELTK6b2uKvnsAuI1BESy5DeIwajQVxyiFUVzHtLigFtn1_-E8IS_2sDtuRCOAC1UpusLpyvHTeqDQoY8/s1600/drinks.gif'/>d-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBis0E-aimMVWmf807aSIcfggU4ck83_9SBLiT8ekwL4yVwqZXNPsqrhSawj1hy9Kv9c1eEeHKYlv6EPY3alA0JQNrYVlKJmEPc2tWvFnj9wmBVJa50s52HYekJnrKLKkWNzHjI1OXb04/s1600/cheer.gif'/>w-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO5eBDzV9REFbyb95XQ0qt0-r71KSpTQAWEVb6zqFL0LQjQTbdfHlyiQep8nWZKG0udm4rbn_vOd87BtcHW8SXx_oZ1N7DscXmfi9Sym_YzCLa98WJwdWXrsv2j9AuzPSTGQqxInxW4ZU/s1600/hi+2.gif'/>:-h
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLosIDIvmrx2CKAnt8OsBk197dKLW6N1xrqk35rX4d_yUXMiT_TDV2gX2MLwAv72Qnw30ytZ4yw_mZ7MHvtAEH8Xf57TyP1IxDsrAFa-rK7-xULR8Z0fYwlwJW5WnupfGW53W_1RlG2ug/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/AVvXsEi6ymBO3L1x5alk36msr54GMo9i2JnypQlujvZV5AjNAlvYzKGI3bDhYgz7CXatwbhhyphenhyphen91Cc1ikpohQrldwE7f0eu2gGCZ41s-m0qDNxua0ES1975_43LHH7AIfER_GdRSXz9yztrA0HNg/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!
0 comments:
Post a Comment