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 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-->
<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/AVvXsEirw57wmkDFP8AUecJJ16Tk0tLEr0Ta-gLsEtmOLQmdfa0lX6NQDDkTi1XiHS9pIEmKiH7HU8jtZ6ToFsD6rz30h7sKzAvGO3A5dAFGSGoug4XzRcs_-JhAUcL9inK0w7zw2TDRnN_HYYw/s1600/smile3.gif'/>:)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMZefgEK2g-MuL4QcEEVF2J8qth3EX9xVpBUdsQ_ndnqk7Yw0fwnfiTSnfZWsW38orHqnIF6eua0BUUXsX_cFL1mvgY-f2khuDYXIlP7DStSyQaZ5YYFls0Sf-uBjnf9fZl7vxll5skLY/s1600/sad.gif'/>:(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibuAlO9O3Kv89bepUILxD1VEci72CtknIu1-o1ac2Rxl6tQS_30gsnB0yR-GTv40isSFb5XFyyQhfyBxnt-WkHOJHlF_vUXdwEIgwq_a8D1L_3b7q3Py7HOjKn6BwVjPDhqsobF-_7TLs/s1600/taunt.gif'/>:))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi90-KUJ9Gj9ZkPakU9cDO4Gm9yAqTxJsUCzV3nDtkWyhn3J6WbdorYs0YdScRmV9jrVaL9dMr4LjT_pnYmVqTmX4hMVWnfQPemT2cB_0LS9UimHmy0SQxn_2v9BtSKiC57dRFF7MchwtE/s1600/cry2.gif'/>:((
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjc20fJTCVaZQwSemTdkEBaVOt5tTK7skx2nSV6YYBe9inrd7daJb-gGDs0AXfhvVx66MBumIKEs-ohWlcg0aUpykKFrrWBLH5xw3Okrww_2HpwvaAhQKi-fDdDCktYtJRNu1VDMFsWUA/s1600/rofl.gif'/>=))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisIDr4Dsstf8tRWtWSIdFJZVIm78ns-cbfva7lb3SYsaS-n3d_8xzleAJ4m7H7_BB5dsyOtTRHkB4jv9tng-XyqQZVtfk0KF_SBpvH1iPgibzUrGSSDFjfwtqurdIFquzlkx-9BhiSZAU/s1600/suicide.gif'/>=D>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje-cRTwieGPTy3z8UTbM-9HJ9-rhk_Dy_kVLeFgNqCFjOGN5r2NCoFdBvXnP5h6Du9tteM-iR9KjP8LPCKe6wAobxdJlwSNEEzfv_PUwSipJMHuDxZhl4ir0aL06wjK6OMJ-q285ErPa8/s1600/biggrin.gif'/>:D
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH0-B204VBd1lqg2uvVewJ8CwDccvPU1TYTIvY7EoouisoIxG1WjcDZHnHzuztM99MeXhX849fPTJLvU4qeJ6E9ZFkOWDKwMMIvzCl23PWYBB0SP_XRdMjf-ImGRseBfwlty4fG1gn3_M/s1600/tongue.gif'/>:P
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDGfrnilhR_PDB_3chxjnJjRsjbgh1rwFvcZYlR4uStxWuDUyCB5KsEudFQcRc6AJXUa756Eo8RDBr6axm43r1zq3Y6qWvWv5k_QApurogcpybKwTPYPJlEGVJ4vXRBBu2EW1o7mYLP50/s1600/shock.gif'/>:-O
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs4pKKsmc1gjIwtrUjrrzR81Zdo29uaHoplPGh48IUrIw-ekNNCJHep49yC6lhC5tS2QQpuRiniHzhpAInIFKI9UUX_hj79PSjV_SKwKsTrLv5iy_TA5rpDtE9R4RJTZ-Tw87Y5Cf29KE/s1600/think.gif'/>:-?
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiqqttNhyphenhyphenIOP8AhIOhIJ420_bM0xdb1ckTZ3capDM_8ItO_VFzQTyFm2WmpJHHhUvcpmAYcVKuTzU1mr_rBfypXFlnCumlAy2oAeCSuyiwPco1raUxiD4vKnnFC1AUH1ZdiDI23vlYlEw/s1600/unsure.gif'/>:-SS
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmZoKo_1SRZxVISyBefUmJzM_GpObs7kndktNGMxCr-9dBfXaW4rJTxrLQOD3d_N-clPx13flwuS3p2nIZo-k59VxdOgHR_lPZPtO82011T2RR9eyenlfOVym45E9gkusdE9uVhkrFXXQ/s1600/flowers1.gif'/>:-f
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeetIOETW7eLRH3UhGCLolj1e1sJFzbZh9cyqKhm2ohzstKd3WLxetbcJb2Pki0aLICNki7Wn3jKw-FaWRRbQjLTPD8kzpLjjqaO0gn5GwMj0CExSaiUT2r4F0JOnrfJZGNWUEnGtTBLw/s1600/doh.gif'/>d(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVWqtQg9JOdpQInRC5bR5OJy4WIDF1Je5u_cdFfbng0YZNQEI1KFHu_0SkUOytfaNfnq0s46b3kcU9Kfpk9D3WOLZc8bWTe6h7ZE5soS76pbH12q-uQaiFbfoO4tNrMHQa04z5HKsdD3s/s1600/air_kiss.gif'/>:-*
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm5QdmxHhdJjGT46BxRjDmjCIRxri0pgoNvb4rNxjcjwfHhpagC4rTtohb-9FEIi0vz4Y-mk1cM5FBATk18GlgmPLCcsSyR1jF4TRhBwzPq-ESPJih1tNzX0MfQHftsH4cMP4uRxNxMr0/s1600/threaten.gif'/>b-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh9yfzW5cFjyuUKHC4hC5r7t85piWT6dCtw6jKHSkxefkfHg179E-Exjl7tCfk6JF-xpSDLoqnihJlxMPjI78uJboDhNDsxAyutnMTFCvcb2AJssHbagKB-0ctAlqIvSQyLORaC9x22Cw/s1600/help.gif'/>h-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0XUMOJRCKeGCPkXEuCdI_piNo4YhmV-llIvj8rdRrxtJGN-EkqLICu8a2UnJpJC5s7Us19mbL3ZXJjSF8udz2VG8Y8WRqokwxyAFZ8IdRrC2KOVZ5HPYegoaEfHiHPd4WuiPHwR5ErJo/s1600/good.gif'/>g-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJBISDjNTP_mCm5DoYpTumBeCQjljJJyeNdWhklTeIlS0qwD0qvGjH7eOaNObeNcVnw3-ml2QIo71MB7ydi6awdleGJuZzg62Zdm-oh89RAyqooQSjU0uP-WxXD0kc9oXn9OfPEt-3OZ4/s1600/beee.gif'/>5-p
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQesSvTCM5_OH1hAxHAjgCKuEq2Z7E1vgpiZw1Gck1PGx303olHRY6IgM-Vjgi_BcmvkUXPuFBRfhEpHvko2tCbZDze5QD-iM6Z1Dn2BwSgN37qntU0Za4boKWNKRQcNIo8CpSkRCmNfg/s1600/yahoo.gif'/>y-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUMJdhMuLfHfsij2M5ocmfS688dE9IZAA-pr9CJf_7fJbnUN8_5QRaTmGVgvbWwEOP4t8V7Jb2XFE6TGpPxui1HtwjCMsLPPv9n8jv2eoacb6FbixXXIuMr29EjNhBBmEXAa-f__4xa3k/s1600/crazy.gif'/>c-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBeSoU2Ab2Y1nr8x1nZAcfplh-iheFnQG13ZDS4xwBGnrFlAZVySqWRc1HTez0aK5f7JCBcY0P9cwA1shNMeyO4gStuF5sNAQWtD4J14bSR7CIVbm0_v4VivOmNZaY4O-7iqUrGmgIE9o/s1600/spiteful.gif'/>s-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiePMwS3WAD_0fr-LbOtqQyHh0o10UVvsC2XgcyPNdKmmYCtpOx74yi3zmnxu_cOnuCBB8aeaqZ0lAdjYwF71Ou2zarsZn9kMJJoddxcrEtg9RVN0fAZkOOHxb49JLBruwYcONCIc7mpN8/s1600/drinks.gif'/>d-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsrvJWa32b65w3yEchbUw6F8vNrBCmGh4VaLc_EFIQnMSvihBdvZLM-uoOFWtVBf3AsrRjGMC9gk4Jgt-OmfsbjEc4zecH6F83Dbo8yXvSyqsilpS9JyQjR9YSucgm06UfH5l5K6ckaLs/s1600/cheer.gif'/>w-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZIqK4ohQ4feie3j-6WnY3Fn2Go_T31GFIZuMmjvGq34sKwGt2U-OLqrhjV6GjwD5SDfyATqZwlXSqP_-tIrw0A7qWu2DG4w0dKPRCePAxKA_7JzGsJpUtth1aqpsj9LLTSGDYEA2HWhg/s1600/hi+2.gif'/>:-h
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHqntvCkWdCvQQb3jvlffz_ep0L3IsTNz4ZUNkNd2CQfcSusQhNm_7OCopXJU8KMcLzCvirhfyyQcWGAZi3mrjqQk5bzFjilnHgqWgcoocpzHx-2HSl8kk2WrqwucO9EUVyF_ToP3ddMc/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/AVvXsEirw57wmkDFP8AUecJJ16Tk0tLEr0Ta-gLsEtmOLQmdfa0lX6NQDDkTi1XiHS9pIEmKiH7HU8jtZ6ToFsD6rz30h7sKzAvGO3A5dAFGSGoug4XzRcs_-JhAUcL9inK0w7zw2TDRnN_HYYw/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;}
.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