728x90 AdSpace

Latest News

Thursday, April 28, 2016

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!



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/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&gt;

<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;}


    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!


How to Add Emoticons/Smileys in Blogger Comments
  • Title : How to Add Emoticons/Smileys in Blogger Comments
  • Posted by :
  • Date : 4:18 AM
  • Labels :
  • Blogger Comments
  • Facebook Comments

0 comments:

Post a Comment

Top