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!
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:
Step 4. Copy and paste just above it, this code:
a) For previous commenting system with comments that have no reply function:
Step 5. Now find this code snippet:
a) For previous commenting system:
b) For threaded commenting system:
Step 10. And add this code just after it:
Step 11. Finally, find this code
Step 13. Save the Template and you're done. Enjoy!
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 HTMLStep 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-->b) For threaded commenting system with comments that have the reply function:
<script src='http://helplogger.googlecode.com/svn/trunk/[helplogger.blogspot.com]smileys.js' type='text/javascript'/>
<!--kolobok-smileys-->
<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'>Note: Ignore steps 11-12 if you are using threaded comments!
//<![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/AVvXsEiyhxeDrz71mq1yUPkhwtl_-Hq5gD1Mljdvbt_tuFpZpF8iYslDmTNOau92au8rVc_Oil2ZLxbf7IJX_qtLiOprCpMR_l0zjAA_tQG-9aTWNsesAPpJ457YyiAtygYghatKfcTJqNwE14Q/s1600/smile3.gif'/>:)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoXF6xyLPDNgzsHOT3V1pydmApNgJIilT7IOFH4ZLhQJKqH-ZD5bDypJekux2mGkxis-ro_AQCNMgewDhllqVo1fRvV1vKBOr4dCmtRaofn4ElOl7pbT37ipPRHQmmDpv7d4qizzp0n4g/s1600/sad.gif'/>:(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcGHHTpVm2LE2aK6pBML3Sg0LCwG_lSXU07vC4bnodTgld3J9yYKer1p6m7bdabAg9g4rW59T0SxGHsA6lTuEQrPxXmiQv6J8Y2EpzkijBvxknJIMY3YlomcVV1X5HDtwHuvJ3qXTRp88/s1600/taunt.gif'/>:))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjITFmaEOGp0vgtgN0wc9FZPR-AXaDj_01-_3ySzZPtZalEFslbNQqX3gCI_-ZmhYOZ0J5wyK3eC2TnsTmKllLBzEX8aV6ORpAe5pKmtKkM1wkQAQUpyP_YXmv29YeotUbEhHX-n00HKk/s1600/cry2.gif'/>:((
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPJTYDGdcSYPDMy2Bb5-G1vZMVbBgfQpv978x1s9MPbPiyBrkaMv3JixNQLs91JSzLNr6X8_jwg1AxMUAXYzh6-_dDCpJ1RKqFE5SVCsqw5-ToPJDhP0b6uzgNE9RT6emTf6RBiTlgGH4/s1600/rofl.gif'/>=))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3vj8l7vkWWf6Z7MyspKj9QwIrjGEb-Iv2nVvLDmsaA2Z44ijBmNbCqnQmLoWUHePGv1Nf3Ys49cQMaI9oI_DQn0KUr81_izb86me52W_IGFsPSl910zKFOz4O_78MVAWO7ajjbWoxhZ8/s1600/suicide.gif'/>=D>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIpRa6IM-q7bhrQiq2NeKHS9GAZebUXkSIU2TY6C0IkanuyY9THINZ1A3WBLTf1ebiptf5H_qGcm4p8zwx5i-_HYxX5FtA88-4YZ8sDL18KIs_-9d6mPdcNysGcLusGVNQAJMjGISwBHI/s1600/biggrin.gif'/>:D
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv-yunXzMr7NeNEZR8i-VFbQ2gZ5Ujd1O6eirwbJR3lFNXmmOwPBm8Wuul-oKSJ1ost4Futdh329T0kx4Jth1ZYWEAFemr-MXD4DYL8LbiP0HST_nTz49LsJIPaL9pGYt2_28215p5dmw/s1600/tongue.gif'/>:P
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieQ9omHNOL8SkuVejY3nEkJZz1K7qHjyCMmvP5k72a_igf8OgJ4f7wpWa7WVVOrr-n6iOG6JJbNu0HRAvkU4GDQArs6-MRHLSATp5RHhhm4_8Zol44_0Hx45ZX6phxBwFrzUpuTJqXnz0/s1600/shock.gif'/>:-O
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-s3CfzXjZ5sqkY0kSuGu2je3c4a94i7j_6S6nS66UWRqQP_dzUmktRa8QJwAbjEI_IO4YVTeu2Jsyzm2WN8tfrTPX3souDKfc6jQJpCe2LfYKDM1nu4xDIoC3nwFjiJ4DGPBLZuzUXQg/s1600/think.gif'/>:-?
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgASkEdOOd7I_ktDmttX2z29cLjKsfGf_y8BfoOIaj_Gph37ivTQJplN9Jt0oRhgxeDiIsUjwll6XQCBsVViEy0DrBdhXtPLftrSRjVk3eTa2bes3WkPjbQUYaU2fC5Gy5D6cERqU6Xjsg/s1600/unsure.gif'/>:-SS
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHbv_SjyuT0ooI0jPTit2Az2tMdmqtwWTyuCkSy-5HpihhyphenhyphenO9LtgyTRoRLIjYYaw7XMAYOV-ZqYp2xUdb54V3yymPoPsmB-0u-lSJWQIGixR0w7mEfvLg4tkopugGnFXqd4rIkPMm9mr4/s1600/flowers1.gif'/>:-f
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGjAfi9HxpTMHWQhoWec1pPGiR8vgJnQqD8jR2HtUX1i7dVwBz64M3EOqxEkw7G_ijXljAKlsXb8ITly5iV_4ucDumqPGpnXED2xcjvDUmCGTWhNsMkT14t1Slr49NKZV1QGofPL5A9tE/s1600/doh.gif'/>d(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYAptlzwRfeIwhg2zwDECwE4TsscNevpRhJWLLnsoxnLaUxfiQ4fnIFATjG_JH1antT-3hn_A5Qxg7y46HIX5YCesqupXE-604qzEbJDaBf4kLZgnuxM6CX87FMCq2mZA4KPEApqcUP1g/s1600/air_kiss.gif'/>:-*
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaPnSGb4DDqi7PhpxXoXnjG-2AiVBgMrJFIJXgy1RY_r-AWXaA9seGyNTkVy01eaCVI4Nyx2A4w1lqCnXuubeIyAOlWTVlAgcodgMozOhrFTf9PIMPzezQzqDkgdKEi2ZwF9j1k50WWIw/s1600/threaten.gif'/>b-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgoff1FBo6JSgF86dBKpvCMq4QVz8_4TKLQgQ2WIuCHPToZu7yfo84G4hFRz2RP9U-8BSJzHPVgn74h-FSWivWxkjoHhz5dfdxJPuEsKzMWqKJLovWkqHTZ-X_kSNbDCIpqgbL7ZZxz7s/s1600/help.gif'/>h-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxNnImQvIfeRCa1y_Yfx5FlEtsw7TIKJ54-BFeu7xCYCDUnBzXWyx3Bz1OPIdXN-83ciB0qiTURVM9waqLREMhDng9BZgVIigVygacGZzBjSQ2_Xzs7vOcXVl7c_bxNqV25lRY15T46mk/s1600/good.gif'/>g-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghOw3lhuaKU_blHubYmg5z3y0cYNvMlyrnBeiNsNKcIJCyDY7b-SiXAOx8ZTgLdXVf46cG2MfKQtl8opRFhEMiqZeH5nt1v5yl1PIQgmv5P2Ci2nCjg6Kc79Prxo1_7C_MpCThXPRhgmo/s1600/beee.gif'/>5-p
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbObOyhFcJx79JA_ZNGrh5d-ARZjJyXLpnUAIAPCMvX6-yLk9u0NWdDWHw1Xwb5m81p9mbWZHnb_DckZ22h8pHzXoRB4cM7rMMpa0qzzwZHTsiz1vtRXRmot2o-pz80-LZ2nRlOYTCCaw/s1600/yahoo.gif'/>y-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC1I4cJxB5LTcaFOtW_AE-Fp6Hg95USZ8L8CnBsAG29w3Y6NaTvXHILvJno1_hdgFyExMI0MB6gay4Pjp1LYlT5jsA2rUtuQL7PFNWThqxPKgOCHE4UKFMFDnMIpK1R027L5eDl0cf4tI/s1600/crazy.gif'/>c-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBBKrHfOmwob-YaxtkHER4r6E2NxcUKjBallZcdg3sFnMdTR2zwzGI0SJHSKfeTbBg-N8bydK6BKO8CCGtmgv8OKUwhB9sUnbnxmcxGOQYey-i5bw0l3AmygnrxFsIaIqxeaEwCYaM4bA/s1600/spiteful.gif'/>s-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAE1jEFHGWvEufs8YSTPqqu5ojhfWlwsZBwrHa2XtfJhlMB43WGB10qhURokGBBubYsqv5BUqQvnldpkmKjkFjhnEXGF18uyMwU83Iq0hMo-bs-ctT5YBV2KzClz0FMnerojASIBvuSRs/s1600/drinks.gif'/>d-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKJMgx6Ewp36PzNxJKlrXHpK7uUut_SH2HID3YlkU1k9OBfTaygVsWw4nRi7FwQoRkw87OqBjmAGFciEDG4nw9qoBNsHJUxx17DfrSGp6Atb-5HlazcgxkQumadpcmdKbRbts29c1Qgoc/s1600/cheer.gif'/>w-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMHroi7btPe6SdRKkwnAFsf0cZEkDx30O5LPT5YHw2RY3CCtute-A98r9Qa7GBw2M3upBtY5UVFHB_-BFZuF9NYDWG-BhUYa1Vu3j8AKlApi58Kzuety8f3jiUhHVq53-5DSi2v2BKi0A/s1600/hi+2.gif'/>:-h
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiELK_wIUzaN5y8hzWwowQ8LQdyct2R3R7sjBmJhuWBlYr1jBryrnLiOw5h8Vk_nhbWbdnp4xwADyR5k2ylVzTNCSqveMuzBRuWAH3J9_3s_33x07rxu23-gpMIZvNXaC2vM0hUHH6PC1M/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/AVvXsEiyhxeDrz71mq1yUPkhwtl_-Hq5gD1Mljdvbt_tuFpZpF8iYslDmTNOau92au8rVc_Oil2ZLxbf7IJX_qtLiOprCpMR_l0zjAA_tQG-9aTWNsesAPpJ457YyiAtygYghatKfcTJqNwE14Q/s1600/smile3.gif'/></div></a></span>
</div></b:if>
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;}Note: if you want to change the size of the emoticon container, edit the red code.
.emoticons a, .emoticons a:hover {margin-left: 20px;text-decoration:none;}
Step 13. Save the Template and you're done. Enjoy!
No comments:
Post a Comment