Blogger Buzz: emoticons

Emoticons/Smileys are a great way of making discussions more interesting and fun, so it's a pity that Blogger don't support them. This tutorial will show you some simple steps on how to add some very cute emoticons called Kolobok to your Blogger/Blogspot comments, so that you and your blog visitors will be able to have an enjoyable time together. Now available for threaded commenting system too! <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqN6KFXbMa3pm_jAiCG4T37rqP6KiFTvp5IKAlGCnb03diX0WOPMBNnzWIwUlcJTPhss4g2mY9PR1H3__UnyGVwLjeL-plF7Qvyqa-eHzcsSJxG06CmFxhTI2YY0-vIcjaPlV5bnhMCu0F/s1600/how+to+add+emoticons+smileys+in+blogger+blogspot+comments.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="emoticons in blogger, kolobok smileys, threaded comments" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqN6KFXbMa3pm_jAiCG4T37rqP6KiFTvp5IKAlGCnb03diX0WOPMBNnzWIwUlcJTPhss4g2mY9PR1H3__UnyGVwLjeL-plF7Qvyqa-eHzcsSJxG06CmFxhTI2YY0-vIcjaPlV5bnhMCu0F/s1600/how+to+add+emoticons+smileys+in+blogger+blogspot+comments.png" title="kolobok emoticons on blogger threaded comments" /></a></div> <div style="text-align: center;"><a href="http://kolobok-emoticons.blogspot.com/2012/04/smileys.html?showComment=1334792292339#c8595375496983747182">DEMO</a></div> How To Add Kolobok Smileys In Blogger Comments Step 1. Go to Dashboard - Template - Edit HTML - Proceed <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0WFm2maQ8jfFGzqbdJ8qG0m82l3i-6nCIWTLxSPJ6NpJ9dmillvV-rPJE62D7RnZ-TFXGGZd-2Xq901cguD0-uz96btz9JdSLO7o74YTmBCq0turA9hja8rumEqnYx4F5tK-20EwjbI2m/s1600/remove-blogger-labels.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0WFm2maQ8jfFGzqbdJ8qG0m82l3i-6nCIWTLxSPJ6NpJ9dmillvV-rPJE62D7RnZ-TFXGGZd-2Xq901cguD0-uz96btz9JdSLO7o74YTmBCq0turA9hja8rumEqnYx4F5tK-20EwjbI2m/s1600/remove-blogger-labels.png" /></a></div>  Step 2. Expand Widget Template (make a backup) <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqmak8_EJ1vAGJDseuaWQf8_zHDw59qKUbdu5oblyzvqOzlyaVu7Tre2SEcvfFNcO94GNzrXlQ2Qgnx7pZBbP615fvj_Fnqgj2Jpgn6yhzOhyaKtjQWJh-PnTIENnZ97ZJONnBptP-rDq5/s1600/blogger-expand-widget-templates.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqmak8_EJ1vAGJDseuaWQf8_zHDw59qKUbdu5oblyzvqOzlyaVu7Tre2SEcvfFNcO94GNzrXlQ2Qgnx7pZBbP615fvj_Fnqgj2Jpgn6yhzOhyaKtjQWJh-PnTIENnZ97ZJONnBptP-rDq5/s1600/blogger-expand-widget-templates.png" /></a></div> <ul></ul>Step 3. Search (CTRL + F) for this tag: <blockquote class="tr_bq"></body></blockquote> Step 4. Copy and paste just above it, this code: <ul><li>For previous commenting system (comments without reply option)</li></ul><blockquote class="tr_bq"> <script src='http://helplogger.googlecode.com/svn/trunk/[helplogger.blogspot.com]smileys.js' type='text/javascript'/><noscript><a href='http://helplogger.blogspot.com/2012/04/how-to-add-emoticonssmileys-in-blogger.html' target='_blank'>Add emoticons</a></noscript> </blockquote> <ul><li>For threaded commenting system (comments with reply option)</li></ul><blockquote class="tr_bq"><script src='https://helplogger.googlecode.com/svn/trunk/kolobok threaded.js' type='text/javascript'/></blockquote> Note: ignore steps 5-8 if you are using threaded comments! Step 5. Now find this code snippet: <blockquote class="tr_bq"><b:loop values='data:post.comments' var='comment'></blockquote> Step 6. Paste the following code just above it: <blockquote class="tr_bq"><div id='smileys'></blockquote> Step 7. Find the following code (look carefully, it should be somewhere below the code from step 5) <blockquote class="tr_bq"></b:loop></blockquote> Step 8. Paste the following tag just after it: <blockquote class="tr_bq"></div></blockquote> Step 9. Now find this code: <ul><li>For previous commenting system:</li></ul><blockquote class="tr_bq"><data:blogTeamBlogMessage/></blockquote> Note: if you'll find it like 4 times, stop to the 2nd one! <ul><li>For threaded commenting system:</li></ul><blockquote class="tr_bq"><div class='post-footer-line post-footer-line-3'> </blockquote> Step 10. And add this code just after it: <blockquote class="tr_bq"><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 /<a href="http://helplogger.blogspot.com/2012/04/how-to-add-emoticonssmileys-in-blogger.html">Add 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'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2xv0FGojXQf0W_Vw77pzuyDoXSG3yL5wrfBRV5GM05Sn13IwkYpjCU03rO3y8GS6sNxxBBy1Ntco02d4dFRMJMXmgAL7ythhg4ItKO3pXbOZ0xg1mOVQQktR0c5_Q1_gNBHObHynPiCA/s1600/smile3.gif'/>:) <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXN0xmoiQ68Yr_LQpPitSTSunJ7zMop1DBpxD_2uDcvQ1F1kPSUzfZQwKboayDXxZk1lhz4a4ThD4RKUw_7az2UjRt5CdtTEEQikv_tcxS6uyMPzRRNfVoMU-psV4Rb8v6GwrwNbletSA/s1600/sad.gif'/>:( <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuMckjqGhcf3cewY62WNwfTil5_YrnDQri7cAsCfS9FP8MFEZWFYRzVqxGWgWNwvT5wdxTPPQbttKvl_YJkP8BLj6V9a8W_VV4V3GfZ9uoMUQ6EExwXgzQ_X0f-Bi0L4ZKqPpNBrdoLOM/s1600/taunt.gif'/>:)) <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDsHPF0eWPA6BCXhCpIQszHoqE7C-gQ39UHsP9kQzoUhh-5b-LfxRTYxJM_T6B-Tr1i7JP_Z2bl0d_B1285ZYSI-_xDX_6f0_AAZvSJ2002UMD3P65pA68xhScinLY7VDmvgYSJEWcocw/s1600/cry2.gif'/>:(( <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2N-noIaMGVNxyi_200T7GCH5h0RZMl9UghBiOz3LB8eHNE2IoOMqh88F9hYgXROBjiYziyuttFEGdIlSzx2d6J1ly86BQAQrjGIDz4sbF-qirqXCNzL_YVM6XrmPMrJ4dTdBLZfTbf5c/s1600/rofl.gif'/>=)) <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKpY4jX7bryIVEBHmbNOqYObK0XqUYUhoGm7RMF39q47A3GKbI3ikYN-_lDbQj1iofpGDev9wQw4Hf1IL-qU-ABaCgjpZQj-d0gT4_v9aNJMUvdS3GzKiR3bIVhTAS7SRx0HlOpzgRdAs/s1600/suicide.gif'/>=D&gt; <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv6FTwY7-AntxNYxfMAVzBNmyqnYbgbYD3F9ADJZ9nSVtCsOHoXeWn_xvU_h9_-lM3WV6ZQVXcch-Uy_ccAsFbHGmzWg5fGU1MMnUA6DX5tkRpcy22rKDz_0mY0VRTnDF8iqj6i4srwr8/s1600/biggrin.gif'/>:D <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijLUSFPKEvJcebZEg2kbEiHyCGM0Abj0fOKo8zw4TTrtDUO5Duy51HN_WV5C2DucdUnwyyVhyZIVxOiD-P5U0yshOq0Xun3NxfNekSHz9wClMwYnT5DBD6uDdzSdNze6gG1PMVFEHuAgc/s1600/tongue.gif'/>:P <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-39jwzv6Agj5STwpUhbCDugpW1OrTYPyqGjElATeAdbRrMZg6nLmMDA-PdozbnCpaBlkyf-yAATzHwxcGHgoxpAslop2NHpJs_PtH6ZXpQggU-D1F6MA4yieyQZFo_5iUeSCNFoLrnIw/s1600/shock.gif'/>:-O <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU0mXyB7WsC_v6H3vpq_1PGRgorrDCyA8Yw4JZAfR06f0BwL5YhJ7sjqpQOf5HiBiEuTZFLdbwILAewYNqRoIw9rXiXh0wKFFR8WwRSkwsv5s81PKzvfZX3IZBCOStxJi4MpqOK6Vxj8U/s1600/think.gif'/>:-? <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgygg6NvjVtqo9ibxht2JHZr1lNRfgFJs9QFaYPw0zD0n9tG_3m0-LRaLcd_1w02mhNstJIotuum_yvuU3d6ngCj2LHZohRZ2eh1Q7ZuYrArxDfuQvSbWCnYc5ZDVhOprFKsq_43uxiEtY/s1600/unsure.gif'/>:-SS <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAe_O8BCGUdiVi-MD7AyeOMv5ZAnpkgh8vBn18gD10K2FMvb89WzeeTscPbpV1rixntOrC4EgA0KvzsYllCk-H9mqNcpjhEwSU-vW2-0ADu4nmahaYw5hgPqZwpPmRpZPaUNMXrvYpWYQ/s1600/flowers1.gif'/>:-f <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXEvKEoCjjQT1zluZ0LJJmTcMNIo_ztVfB_mZI_q616Xva0Xr-xCC1lqMiM9fmD6UJlTbokMKxtUhRkHR6l3nJZ8G1w3zjxjG1RSgVwrGqpHTnUmj2MbGVWXl8b8RK9CASWTu4z0MJIyk/s1600/doh.gif'/>d( <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAh5SNZXN3tpimxP0ytMBbE2uj84MuwZN30znvbWdSd6VUkGUSztt2RtZbmlhid2MKAd9S5FhmN0VgBZ2sDERAOzokpw1TfCOcMrP_dVGHPz6TA5IEif_1s9MePWiXYRvwrjDMaJ201MA/s1600/air_kiss.gif'/>:-* <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijSTmyKZIg0xMdWoAlaFfqy_-UxHiV9wYpWlvGlXtaBFhVaaH_qcnybaht0dwzd0mryoFr16R5Xh9RIISys6nAGX1Sr7RFRDC32nrDuLvhCSu1fNi5EcTQreprjVSIPuVid_bqJaXzSCI/s1600/threaten.gif'/>b-( <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1JGVy6RKSqntCyWOmYVrP6qaBdBsZ9MNCF-xU9fv_3zblk8C7Fi5y_RmGsA8Dfpih11kh1WYmfZEHjIR9PtjeEMO20IIeANRxSakFwdvQpPHwhvyl8KN3xHASfXBFzVhr0Qc5okXVjSI/s1600/help.gif'/>h-( <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7m-nmm9vtKxRki1P6SKbn65Vhm23BNDb8An5Waca7dPW3a13j-AILJnS5P8y2VZWBh-qOMF-NzKKSYtH835sHcjD0OSYz4xZocxL3pjAvfMZK-nPdSeQHc18d-8w6X9BS91FwPfu__rc/s1600/good.gif'/>g-) <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrOm3Ow2Nzun6Zkb4a4NI6XRSdCSma0jEDEFjYzPqnOaqvSwSgiQFRVk92NcUSCHx7BkKXVzCicTub-gIRa1uJ4dPkBFRHPSRSTeZ-nqOBvi5MHLS2vhbZwRpv6kmLIZRqN8ezo8nNn_c/s1600/beee.gif'/>5-p <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWcyxLD8yLBGNycb-j_royQvRjM9wlVPIrKfC4xKk__GOQ58W732zFB1r7yTIOvVkbccvRtYmcB2UFI1s8krKVeldqMbOGAAzR_mo2nmfYExWV8NNm8Trvy-PeVmSRtnh3BPW3gdFuI-4/s1600/yahoo.gif'/>y-) <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlgAQ_NJMW83unAEOEYUt4nqOCB0Zj3aFFMvPJoapyuGESuyEO2IOw7j2gHuip2KTGlBZZ9RiWhixFbBaSNgMdKC5hJyViSmIlpxLI-vNCpVEGDPwV6OZJ7ohHimHVphY-0UHqd8DAndI/s1600/crazy.gif'/>c-) <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSltt3CWF4YIjaOwQh_SZoWalM_1Dnj30cF0HsccGvh1hRg61AE8hZbQxDv6GBk8qTlWilU9sOj8eTXVIwXs8BCVwItTozgsgWxYrZEt6VOdXeQDeUeI8Fj_YXS233kWC2ENgcPX95Ekk/s1600/spiteful.gif'/>s-) <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi0t4codJl8GglmsEKrhux-BgmeTL8J1xMdd9DF6gqsVtYxJeOACpnA-Ep-Xylc_wEV9GuatBRG641MDh0JaIEayb8jGX0eM98okCFzk7WdGCdeQWL3BYzD_j6Yw5ZKFqi0GydkCOZZCg/s1600/drinks.gif'/>d-) <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7couRQnm5bLEHfYQicf-sU56v8wwEvB-r8DFKuQI56fdgKXeCuG_Zs4rJLZ7kMP8QPNh5rrH_4TyYNGj9ronVBCVhA2sWLDXzXxUeipzw6FXRkNKiEsrBp7PJRl2S9p7dW-936SshyphenhyphenAk/s1600/cheer.gif'/>w-) <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLhQJoMIhFWhzAKalnN4ONVDWsVfqTe3HN3g6I-MEXEdXcMrGFyfGQmQoQQsf7oigmYoZ-Pwny9BB0U4ArY1wFVshyUGh6O5QfNqGEHgwbAPS8TqWvNchA5o1sDOpzpovQdexkMuf3W68/s1600/hi+2.gif'/>:-h <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGdgWprVrb3iHBGacLhKg4fQN1pM4_EaL0tr9J2CvtCyfuUOVEPMB3UcRah28y_kZza8tAlSD6KRtlLHhuOxyHrvgo3E4Sirjk1DP1bZX1R8K3LbzGw7YYvMthDoxPeH3DY2xQI-NL1ZU/s1600/give_heart.gif'/>:X <a href='javascript:moreSmilies()'><div style='font-size:small;font-weight:bold;'>Show Emoticons <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2xv0FGojXQf0W_Vw77pzuyDoXSG3yL5wrfBRV5GM05Sn13IwkYpjCU03rO3y8GS6sNxxBBy1Ntco02d4dFRMJMXmgAL7ythhg4ItKO3pXbOZ0xg1mOVQQktR0c5_Q1_gNBHObHynPiCA/s1600/smile3.gif'/></div></a> </div></b:if></blockquote> Note: Ignore steps 11-12 if you are using threaded comments! Step 11. Finally, find this code <blockquote class="tr_bq">]]></b:skin></blockquote><div> Step 12. Add this one below, just above ]]></b:skin></div> <blockquote class="tr_bq">.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;}</blockquote> 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! If you have any problem and need help, please leave a comment below.

Comments emoticons how to Widgets 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. Th...