Skip to main content

How to Add Emoticons/Smileys in Blogger Comments



How to Add Emoticons/Smileys in Blogger Comments




Emoticons/Smileys are used to present the user impression. These Emoticons will show on top of the comment box. Just copies the Emoticon code and place this code in the body of comment box. These Emoticons are a neat means to generate more comments about your positions.




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






How to Add Emoticons/Smileys in Blogger Comments



Step 2. Press the CTRL + F keys to open the search box






How to Add Emoticons/Smileys in Blogger Comments





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/AVvXsEh7X4WE_UE_OR_Ck4pYf4A8mmR73s9B8NdSw6xQ5eJNv6raD3ew0fl_I7HGpZHXSD3Kjnh70ELvqFvJEr3Xn7QQ9HVBAl20fOhIwEb2ibt8JG_52DYCDtT4a0z_R0rgIMxk1437-N-5Qaw/s1600/smile3.gif'/>:)

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2tyi6pMClyycV3VSagXjU-E4-uOz9CTH0ojTS2d4_AMWKo9wgq7Me4UbcIgZh27iXe-0YWosdPrpn3_wxPaUT8vv448tvD4uQ46vRx3EcZijWY603wRNIM8lnkVkXKOnl2tCUASm11oA/s1600/sad.gif'/>:(

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9euUxW0pBR2HTq46lbakFvYTaAn1UXRcjVIGImh0VW5KDwN4OsJirIa8ecOCvd9XU5hnJQ5wI9Z_qrAYlX3xXIg0RIyBqrzNBx-_5w1SuWNaG9j2zYDUxFJs7yyyScQ_VXI4fuDTEHec/s1600/taunt.gif'/>:))

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKfeD8qleJ7P9V-LMXERedwdKMVpv3piSlF0cH1jUMFCRZ_Kp7xEdqy1kJt1HS_CArYANEWdgd9Qlr-XAwimAmQfAYvcv6TNvcu1QvFe3r7dUgXKZGYzF-7v27Dj-VWLcZ9ziS_IqOHBI/s1600/cry2.gif'/>:((

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVv0JOm0WqauAUaxzKKYEcr9vO-ekX7gXnDOcw1CSVzpZfUM2oqkP7R5k9J0Xb_rAfybRg4i7XTnEc12qlvkTrPAHhLp4Z1tEz5c2RGidQn-nIGbeUDSEHvE_bbWQLrrrTPQFYU0Xa8Kg/s1600/rofl.gif'/>=))

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5ZwCfmrg6BSOS099WnogwjJ5rEQeq0_Nr0EJovwB6LT4B9_dFFM4elBRp8dDgH2gzi_Y3YnxaRDU2zor-5fI3GaxhVWhkrMea0FZc9zfrYN7csf7QV_qCv6GJpEIRVWHpCblzzxngjs8/s1600/suicide.gif'/>=D&gt;

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJxNsG2BYXQyVMCNZfz68TZvfKl79V6F8jtoGnw5NA44JwenUL4XU94BFPA99cO9xrQFd_LuiCNHIS6jvb5nVOs7iLKw1zgWA4Se8QySyStV8BK5CVF_0MbIiIsskoo_daQ9CO1w_8nRA/s1600/biggrin.gif'/>:D

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrM9BcPIFQmVFQkueRuNqKR-xJhJZ5gbquXWxG_1vXK3r8p0bn_5EBGvkhlJPK0rZrY16neg80_kuPbGZGoHScM1ndTgGQjJjtEGTxvJTjioCbW4xswnx3Qm8vl79w7Xx5f04TNShghjI/s1600/tongue.gif'/>:P

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIuV4VXPzae8FVl6kGNxnEY7mYUVWt61jW3GFSPjpHSdg_38FyUXN_xkuKsZrTHbrH6UB_2DoYjWarMueJkhn2tejTkae8r3Bpiqhs2K0bHRXEQ0YNl-ARj_GjhK8beQHnyQ8dJFSsKuE/s1600/shock.gif'/>:-O

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg51nPKkNba_xidAoyzE2vvdNX60jOPKEWv_l3oi45UOfDHTY7iR2Y9cYWyqGGZzgTY6dbqd_ckAjEZD49y93Yb2eG1fbjIMqZroMRTFibXP0FHeNxJOPta-EA_fW3b-j2voC11noCOFBg/s1600/think.gif'/>:-?

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggnaKpV_-KF2_0vhpTn4KM-aAhBE7lGrwnXWC5cxMP-e1IICwGSJXvrO4f9hxzknTyWTXrVyeoypZAZZ4-HuiIxhVh9t6gN3LgrWHRO1JoAhR2FEuQWJALmrtWQdNykbZ5LaZPgBfG96E/s1600/unsure.gif'/>:-SS

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi96QMSy7ynMhj2lNSyEzj_1TK4LbZlq2mschPbVQU0M3013v9CrQJ3KGd8DDErVT8EmT15ovcZdOviMxj4xjUUzSTV4wOPX0OKRUnWsmRjyTrAwFjgRpTXDmKoPIfLSzUUDW7bAft3jD0/s1600/flowers1.gif'/>:-f

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLJoeBLgndLJ3dWkUDsRHt5laDaAWk1nJ-DMzXoOSoYn9RRMzcNPZNMbtp-nCD8qXpuCTIZ0MHqD44sXWRQwVR2F09QPYg7fA4Jt7NgMv3hQIRArpLqUpfX3KwtOIIETU5fwub75oMzOk/s1600/doh.gif'/>d(

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8Ko8abfaWty5yaT9Fi_1SaGnfjUT4kYLt01fp8jh0JPHQKPB4bRYVpNZSi698DrwnmMnkLYc8lJ2tNmFC0K2nlm_gZSPRlG01lRRGXNHXd1pB2ld2a2fhcm5U8ifzFlt-V3GrPi-BM_I/s1600/air_kiss.gif'/>:-*

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpN-5B9oOt-RKmE15FFun0AT_T5vN18Z2auE_ANa0Zu_iLUJ6OjZNEgqXx7abfa_UvTTEOBzwtB1sHjVsSIA2zsjNwf-b-cS-hhmiEdi7TR5OW7pZlY_iuVdgqDdXpi6P7A0oWOLMFGFw/s1600/threaten.gif'/>b-(

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8EAvvIVF2b3fTCk3XovMo2aIkGFOtezhFmqByEPsHrwFouXrgxMU9UEesnAPaRyloZhC_tCvUIOXdYWeRC48lg9fXueQI644barFyeL2yW5EHPgy40ELX-klEpyRgUH5p5ZMWnf-4FoU/s1600/help.gif'/>h-(

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHicgbfimL5I5mM4qhGvucU1aG-0uaxjPRz1yQ6F1_IghREVuUE7Y6KuWQJLb5RJJO8ApHo-mVePe2-AuTTEA-q3p50z6ZQ8D2Wufy7SyuKypTItbOHPIBqJ_k54j0U_VUGE33NtVBpig/s1600/good.gif'/>g-)

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1JO3g_PiGaz36JifOlRF5L5hv_IbBlEbwWGgfidgwgSF7CSIj3ZFJIchhRWKDkZ6m1mqDhCyRf1jnvXf6vo86timWJrPm7AF0V-3HL7OY3sOBeQe2_OEEjk_bu3kBSFjT1mZWGC0iSmg/s1600/beee.gif'/>5-p

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIB6Mgy1v5VVfd7Aurm5k1508T3Ob52FKq_E4zgqy0-gAoELURYdaRk3xSkaPdm6hXXRwpHPKdOxEKBSU4w3q3174lJ0n_5HR-hldCNWNtf1P2QTPMEPXU8W95xZX1SLFHMujKQugMYxk/s1600/yahoo.gif'/>y-)

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq8aKeZjUkIkCr2FkxgQdPyFRJntVPzLRebLyUwkGU3vMlZn4xV0x6ae2IZ5_NA6yLzlOoA6IaWqrEGvBkqiKRR9ysp5KrRlmbYSxqsJbo5p1lFISv3JBk-RXLfmiuYoKJpGfhodVfZpA/s1600/crazy.gif'/>c-)

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJTLEoDFH4QymDc6CnD4uJwBiURTzwcg825nvXq1ORQM3UAj6d1RkZ70wNo00pn6IsDssGnJ3Z-TUmoqmCb7PNTj88A-AZCTFFeKednPMBq5JBsjrUWxbiwaUsUkR7jiO17GocJgbHyQw/s1600/spiteful.gif'/>s-)

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWJYZGISlRK2dUE94sbwmDYbswlli8A12gb2z_7t0wq9a_A2zfV8w2dJ6xSCUOSvbBJQxt0SfHLLxGtCruTfXQWsdREH4Kxw-IHpbkYGe0uqw4AVkfrkpRLcCCdxT1cWzpfcSA7l-aaFg/s1600/drinks.gif'/>d-)

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuDFYulrnWjYf7EGAG8s9liqIwXtwh_q2t7NdJZwpwOlvfMz3643wTIUv-Kz9K2dGjjyqLTpCAhtbDEl2SfimYcMHthsCSRfT34XQgHnyJ1HQqtyCTnK_nlOuRIHdyJ6MIg_j67wAQMbY/s1600/cheer.gif'/>w-)

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZHqk474Ja8ViChHUf0Ah2vz_A4wthXochbwUIYYiPrZk7-ZB03mRcbX-vhJikpVk4VIQXT77Rq6Y_ANEY9Mgj1gvfrA0bwkS9T9kp9_7SZ4trzhtYfm1gk-cRlVKwGd75X9DNhvgGpYU/s1600/hi+2.gif'/>:-h

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdaHY2Or4BBs4crQeCx1Xvokj2D3UK3qr23unl4a2bdj5kcNZ7U-pDPdTy27LZYyKS0yIMaWkECQIn6adGH81XieI2vh1ymQqDA1vi7V47Q8UmIeYl_WmfTzBtJXtqeL6nIIdAnOVJWN4/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/AVvXsEh7X4WE_UE_OR_Ck4pYf4A8mmR73s9B8NdSw6xQ5eJNv6raD3ew0fl_I7HGpZHXSD3Kjnh70ELvqFvJEr3Xn7QQ9HVBAl20fOhIwEb2ibt8JG_52DYCDtT4a0z_R0rgIMxk1437-N-5Qaw/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

Labels:

Comments

Post a Comment

Feel free to leave your message here.

Popular posts from this blog

Bouncy Content Filter for big Website

This space-saving content filter allows the users to switch from one category to the other in a fancy way! Each click fires the rotation of the gallery images, revealing the items belonging to the selected category. Content filters  are particularly useful for big websites, where each pixel counts. Lets say you are showing the “ last products ” of your e-commerce . How about giving the users the option to switch to the “most popular” products without a page refresh? A good solution could be to hide the “most popular” items right behind the “last products”, then use the power of CSS3 3D Transforms to rotate the items when the user switches from one option to the other. The bounce effect is optional, but you get the idea! The rotation won’t work on older browsers like IE9, but the experience won’t be broken – just a display on/off with no transitions. Lets dive into the code! Creating the structure We wrapped the filter into a <nav> element. The filter structur...
Post a Comment
Read more

Side Team Member Biography Resource

Use this team member biography resource to insert extended descriptions of your team members, with no need of dedicated pages or modal windows. Let the user meet your team and trust your company! Sometimes a picture and a role are not enough to completely describe a team member; you need a more detailed description to make your team “real”! But this requires space… and you can gain it using CSS3 transformations . Just give a look at the smart solution found by Aquatilis : the description enters from the side, just like mobile application behaviour, with no need of page reload. Creating the structure We created a #cd-team section containing our team members preview: <section id="cd-team" class="cd-section"> <div class="cd-container"> <h2>Our team</h2> <ul> <li> <a href="#0" data-type="member-1"> <figure><!-- .... --></figure> <div class=...
Post a Comment
Read more

Pricing Table-Cross Reference Table for Website

Pricing Table-Cross Reference Table for Website.Tables are indispensable parts of web designs. They let you visually organise tabular content, distributing it on rows and columns. Although they are quite easy to design and code for large screens, things get more complicated on smaller devices. Whether it’s a subscription plan or a checkout process, you must deal with tables in your projects. And you must deal with responsiveness too. I’ve noticed some websites just cut off some columns to make their tables fits on a phone, but this solution doesn’t work in most cases (at least not if you need 5+ columns). I found this good example of a responsive table which inspired this resource: the list of features gets fixed on a side, allowing the user to horizontally scroll through the columns. Nice! Now why didn’t I use the HTML table structure , and instead went with unordered lists? It was difficult for me to make this resource responsive using proper table semantics (maybe an...
Post a Comment
Read more