Emotions give the appearance colorful flavor and makes the page of your site
more understandable moreover it makes the meaning easier to be understood.
Emoticons are a great way of making discussions more interesting and fun,
so it's a pity that Blogger don't support them.
Step 1. Go to Dashboard - Template - Edit HTML
Step 2. Expand Widget Template (make a backup)
Step 3. Search (CTRL + F) for this tag:
</body>
Step 4. Copy and paste just above it, this code:
- For previous commenting system (comments without reply option)
<!--kolobok-smileys-->
<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'><span style='font-size: x-small;'>Add emoticons</span></a></noscript>
<!--kolobok-smileys-->
- For threaded commenting system (comments with reply option)
<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:
- For previous commenting system:
<data:blogTeamBlogMessage/>
Note: if you'll find it like 4 times, stop to the 2nd one!
- 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 /<a href="http://helplogger.blogspot.com/2012/04/how-to-add-emoticonssmileys-in-blogger.html">Add Emoticons</div></a></span>';
}
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/AVvXsEjlHHkBfQrVWCZrAXx9V9nWH1OaMTJdOMmYg6NGAsSeoh_XJSy4Jr3DMbAiH7AYEW-zi7zzVoC8VXJq3ZBBBVU1nBuGCB95LL28tGnWkx-tYum6tZwTcno-9uG91GVtiQZPXo7rs35VElo/s1600/smile3.gif'/>:)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4a3NedC6lTWRc4nP_wcS9XKK0TYxOn-PkpzY3gJ67JLK0k_PpnKFNDhAkjnvAaEmvoLY9yIhywGk9w4HkxVI4iQE7qn9lqy1_QvQRkzH2nMPeO1iM7QAUutrunM433ssgA64gDreXddA/s1600/sad.gif'/>:(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyney7wXyMWjmoOBx3mYcbQYFtis5O_bjBxwtndL3Jqw4GjwJDEtlqzEU9p1RhHdNRiX_eVaqtKh-z0IQV5si-JzHqwjr51JF5DjSe59KE69ZMaNq8kxwYcSJoHBHMqikWZgI_fp5gO60/s1600/taunt.gif'/>:))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtIOOEQ4ZVmMoXeqiD0mCg3Rcu_Ee8rHoAHDoI7C65u5k_FEXAUWbhnC-YjkkT7os9W-Q63YXRVQc__XTxAzLgHMkY1Tlnm6nBV9d2umeqOyj2WTnymtfdToCsubfho5Bw42tzgoX965w/s1600/cry2.gif'/>:((
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTl48Wo8T5Pc-NuLKqcD2mUQgkwytDIqf7FiPrWu6lOiGFTMB4PFCNchw4vzUYzPsM2m4Hu3B7gqfjaOdxSWS-A2NHKEsaNZXSBTENNfnUV40QGdyujnEe9t-hAMTe5AwvTqdYEcjBdD0/s1600/rofl.gif'/>=))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRS9zTVaikxrCcUZMRrTycV8bRFL2dIBvwWZIZNuSC1xwFdrEr7e-wwG0E9hrb0Lhy_pidW8UdolQgoEpwuOI41GM3rwjsDeP5OhDX99mY6pueShT03AKDPlcI1r9qPpRpjpALu11xn6g/s1600/suicide.gif'/>=D>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitJvXoc1v1DQkoBRO2zCQiwOIBlsAqqJrBg4WbhLnf6jJE3nNEk07hz4t-SRP9d8BYCtlWndpozBc4vsatbU2Vot92RLg_zsT8bvsS57AVugmrljss2fnckJrVAg634hETkPQ0yPv-3SU/s1600/biggrin.gif'/>:D
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7V3JL_RyhH53i17uqs6ar4pBZv3ABdanf2odolFdL2EP069uomLeVndaMmzBNh2pEkWG-6Ri2oxIAxL5Rvm2oDNaP8UNybpTn5decOJF9VI2Vaw9Xq1_CM9w1LOQFJ6lwX5lvhyyuIvE/s1600/tongue.gif'/>:P
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8UpRKpV-f1GAX4ijBsSs3R1OeYVFecfcWEG4-0ACh7eEv5CeZPqWTr4i2Sdm2-XLhspBQeH1GCuq2PIqYqt0gmkCvA3UB5fXnREHnw2pSCoop022O1SKYGjs-PNqkYSYIIyUGfJfnq8g/s1600/shock.gif'/>:-O
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF8ndDoVUvlOrK2wrXd6N_OjJjBSBNx6cpgeTXJb3L395KbjmAd1UCzU-sdewYW_twpvzOwfNhzOD11vNrKluNnp30tzsvD3nOTLqYNXJRvKdC5P5I4xPYhvwHMVTqxwvTR_xIvZUIcvY/s1600/think.gif'/>:-?
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOCWAVhmBh6pu1unc6oVvFHhsJ-JpX6xTu96COc6KOMmfuR9EI1-1lYoKCjr5oHIWibVJMfT5a5cByB0xeLNxbEVywQIKaDGt8K5J0BBvK7c9u6R0Lk_2COzTddr7ydJmufLZHV15Wcc8/s1600/unsure.gif'/>:-SS
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfz4YJdNCTbIuVH0jhltrzHpHnem5uUt8Ci5uei0u0nt5iId1jTshTUskiOMvxqGBuNDAXMtX1HysWhQAJmpByVwH46pHQqsfZ0pEBG-HKvNc2byrrApB-pEljww-Ms9_ryxczlj7r6oA/s1600/flowers1.gif'/>:-f
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR4jcIcmQscWMSoa6SpoUS71nVYRHwTJV-PFRBeSfAddM2TDVCwg3XH9yN89xcl4VuiGC3CZ8inW9JF3lHTo7wlWr-tBxYEx7CJBngLoqU02wRy64KR_TdEVWEstM3c3gkyUHCjmZanng/s1600/doh.gif'/>d(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBhtNNAy7p3fLxPshrZ5SLRgcnqRtzfPoz8KWtB4cgBmJq_Z0XNhPE_5LEnpLH-LkJOpuyDC2LMC09jVygrP7Eixa68OdE2ilBUottsXHxhkQV2FcPD4iT_FgFIBE8cKbgpTWUWy9VSBI/s1600/air_kiss.gif'/>:-*
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihjrDG_cKlWlYWJSf7wf-Nx0xlh-L3Nd2GxJE0wHfFb8mAkGjCVrxw1C4DSaNsrPMJFz1GMq5irLzLhlY44XBjkOZS9UM8xQTzT9GncJbx51JYDbmrp62sVjI03KGGvS4EkpLdZ3j51zE/s1600/threaten.gif'/>b-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRlNWIQ1iZnywaN4e0o7gmnZTMt4vMcOdpsv7fUS2RO4chO4nqSzRQ9iixRKB9boPnHZ5ZXDW1dcGffoxg4SavPPi0WkKmZEqIak25AI5qaZuafdBhSUhDxSS6UV2Uq3SgheYAd_ur0Vc/s1600/help.gif'/>h-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV1V9erKzI8tNlcY3zgt4mOD4w8i221CSIGsnVXrpfURyz9Zeh7eBXeTv5nTutmZmpKxQPq0GilS2mgW8W47LP5zKEpblpnQupnds7Ac8w1RSkFFU3qL8pQB99VkZvQZlSs69B6j3B3cI/s1600/good.gif'/>g-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjBe7v1BRpehKvlds6Z6svz859eCmeVuQt7m64vSGVua_1324Q5HQ6REX7qArS58uTci_mg7gojFb86uG_dcz6KheS8qOgUER6JTYeZbdGycsEbxaCiB47CxnOE70sg60jSayHBtjhIRA/s1600/beee.gif'/>5-p
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrzrWScz2DBTgqEU0s3VvU61OMbXevYB-d74FzfFQKAjEQACPNynF-HkB1julXMSI2J5KoQemPLguk9quGGcBw7Utcx7qhv4fbAM2RJiqJohE0RjDmfWQk01wDl73TBlcRFx6svS0oNTM/s1600/yahoo.gif'/>y-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeRKsVkhK1xubK1AP3J5rWHOivVnajo7BTBJoApUqJMDN9QSOm4jpIR5Lai_l6GyLpyB601Bt6Ewd766G7Knw3ChsfM3Wf0i6cWDRbgSSsjpouz6KPrpO_4Vw5ZwKDastwGpCkPuHG_IQ/s1600/crazy.gif'/>c-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyCPP4-yUBVohY_N3SyfrNhSXRbIMNDHd_vpbv2Ai4x2ROtJ3fkGjUncuMhpPh-Fv6gNpp7sH8aIdaXfcsZdEUz2zFyF4R815w8b4vVtL99U02u42Z9k1TGd1sZCetsYDLM1rtDx_z1xs/s1600/spiteful.gif'/>s-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuX9e9If1RwkLdBKq9ZygFrU3QjHJXCZfjUnIlUEGHYdDUr95axlFCRmcyEBnRzjw8_Vm8gOXzWn-thMf7QlvjAziKhM6mszoKRNZvpO1MwKf3VhNrixted9pmD4sLPJGlyARlvlSycto/s1600/drinks.gif'/>d-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7upu7aB_unnEUJdAbUH7Q6hBx4cZ__gvz1S56rtyBk1jcgaSz0SXcBO59TDroYHrMVh1WyS3fjA89jKwGvyWhJiqQMcdvzCrwiI0XOPkXVIc8bE4PDs0v2sKgyiXyPWVNMHY5bI6JV5k/s1600/cheer.gif'/>w-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj25D8xds5oHuTLG-3N9PvH9s7oe2g2KjMwP_Rj_40zvfw3dMOOyQ1igQZCq4G-WI2TgKdv8kJZou20iWpGqXCYaTCXvbtpvSInMhwJxrBZsIjx9csRNTF8Idt5RuU0pD1d8cWA7FKfH0w/s1600/hi+2.gif'/>:-h
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGBuZL6wsR7mWCWcL0LwQKgGAQXLl22qxiYwZtZzf4onGkJ-ZBk1tg6C83WfXThrGWTAX4TLWmim8CZA-2HC2PpBTw-MHCe8cxXJ1IpJl_8YZoNNp0jmUv40MCqY_GJ81_5w0jqANefHw/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/AVvXsEjlHHkBfQrVWCZrAXx9V9nWH1OaMTJdOMmYg6NGAsSeoh_XJSy4Jr3DMbAiH7AYEW-zi7zzVoC8VXJq3ZBBBVU1nBuGCB95LL28tGnWkx-tYum6tZwTcno-9uG91GVtiQZPXo7rs35VElo/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