Wednesday, April 18, 2012

How to Add Emoticons/Smileys in Blogger Comments

Emoticons or smiley faces are a great way to make comments more interesting and fun, so it's a pity that Blogger doesn't support them. In this tutorial, we will go through some simple steps to add these cool emoticons called Kolobok in 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!
emoticons in blogger, kolobok smileys, threaded comments



Adding Kolobok Emoticons or Smileys in Blogger Comments

Step 1. Log in to your Blogger account and go to 'Template', then click the 'Edit HTML' button:


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. Now pay attention which code you should use. If your comments have no reply button, then you are using the previous commenting system, otherwise look for the threaded comments codes:

a) Use this script for previous commenting system with comments that have no reply function:
<!--kolobok-smileys-->
<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("smileys");
theText = bodyText.innerHTML;
theText = theText.replace(/:\)\)/gi, "<img src='http://2.bp.blogspot.com/-Ph2wxEvy2mc/UTIr8-fdHjI/AAAAAAAABAo/3use2PsPhMA/s1600/taunt.gif'/>");
theText = theText.replace(/=d&gt;/gi, "<img src='http://1.bp.blogspot.com/-8C5UH12mxf0/UTIzmsxczDI/AAAAAAAABDA/2seHdqLVQ6Q/s1600/suicide.gif'/>");
theText = theText.replace(/:d/gi, "<img src='http://4.bp.blogspot.com/-lhTywmMZ58E/UTI04kjJ3WI/AAAAAAAABDY/qNgtijEr_E8/s1600/biggrin.gif'/>");
theText = theText.replace(/:p/gi, "<img src='http://1.bp.blogspot.com/-gG_Wn6D6Ux4/UTIyqFyfKbI/AAAAAAAABCo/qEmU8s8ndVI/s1600/tongue.gif'/>");
theText = theText.replace(/:\(\(/gi, "<img src='http://3.bp.blogspot.com/-pcE-4ot-gjk/UTIsLRff6SI/AAAAAAAABAw/LYvZ8__88Ak/s1600/cry2.gif'/>");
theText = theText.replace(/:\)/gi, "<img src='http://4.bp.blogspot.com/-k4ujC23cSgI/UTIq7eUkmuI/AAAAAAAABAQ/YUNL9_RhDB0/s1600/smile3.gif'/>");
theText = theText.replace(/:\(/gi, "<img src='http://2.bp.blogspot.com/-XSBJ7zBZKZs/UTIrT-hMYyI/AAAAAAAABAY/6B26_8Ttwj4/s1600/sad.gif'/>");
theText = theText.replace(/:-\?/gi, "<img src='http://1.bp.blogspot.com/-TSIzPWeGBwk/UTI0S-nw5tI/AAAAAAAABDQ/xyHPCFZH4fI/s1600/think.gif'/>");
theText = theText.replace(/d\(/gi, "<img src='http://3.bp.blogspot.com/-qlyn_deOhFw/UTIzY8aRgqI/AAAAAAAABC4/pfSojMdD33s/s1600/doh.gif'/>");
theText = theText.replace(/:-o/gi, "<img src='http://3.bp.blogspot.com/-Zb5g0OWHx4c/UTIsuPLt90I/AAAAAAAABA4/cmP1ltBmVF0/s1600/shock.gif'/>");
theText = theText.replace(/:-f/gi, "<img src='http://4.bp.blogspot.com/-SpvC8mHHwhg/UTIzQMUVGKI/AAAAAAAABCw/_NKKVyQtulk/s1600/flowers1.gif'/>");
theText = theText.replace(/:-ss/gi, "<img src='http://1.bp.blogspot.com/-qpnD1BYon5w/UTI0AIeKX6I/AAAAAAAABDI/HsllV7NYTqk/s1600/unsure.gif'/>");
theText = theText.replace(/b-\(/gi, "<img src='http://3.bp.blogspot.com/-h4yNmhdKUVU/UTIwUKpvVOI/AAAAAAAABCY/B0FEZVRGHe4/s1600/threaten.gif'/>");
theText = theText.replace(/h-\(/gi, "<img src='http://4.bp.blogspot.com/-veVoDPEc7I4/UTIv9wCS0jI/AAAAAAAABCQ/4c5FgCHAiU4/s1600/help.gif'/>");
theText = theText.replace(/g-\)/gi, "<img src='http://2.bp.blogspot.com/-_ttAcnBbAaw/UTIvKtxfWvI/AAAAAAAABCA/X2JLEShhOQU/s1600/good.gif'/>");
theText = theText.replace(/5-\p/gi, "<img src='http://2.bp.blogspot.com/--o9jZ1nMcec/UTIuyCBgS_I/AAAAAAAABB4/Jf03oz5yKrU/s1600/beee.gif'/>");
theText = theText.replace(/y-\)/gi, "<img src='http://2.bp.blogspot.com/-6-BTJcVpwY0/UTIvhF_PL-I/AAAAAAAABCI/SS-LDADTSls/s1600/yahoo.gif'/>");
theText = theText.replace(/c-\)/gi, "<img src='http://3.bp.blogspot.com/-khAwhIYbgvQ/UTItD_PfNyI/AAAAAAAABBI/HMpRMQh5Uak/s1600/crazy.gif'/>");
theText = theText.replace(/s-\)/gi, "<img src='http://2.bp.blogspot.com/-fsTXhXl10Gg/UTIs7Ll01AI/AAAAAAAABBA/QkWgWAAFG3g/s1600/spiteful.gif'/>");
theText = theText.replace(/d-\)/gi, "<img src='http://2.bp.blogspot.com/-CIuUuJeuyGI/UTIueHgTxOI/AAAAAAAABBo/BzXkTEEDlhw/s1600/drinks.gif'/>");
theText = theText.replace(/w-\)/gi, "<img src='http://2.bp.blogspot.com/-Mc5ed3Ymk7s/UTI1GIXMAMI/AAAAAAAABDg/PyDOfoXgsl0/s1600/cheer.gif'/>");
theText = theText.replace(/:-\h/gi, "<img src='http://2.bp.blogspot.com/-JOgaMRI61Jk/UTItsGc5KdI/AAAAAAAABBY/6UDCabfZQbg/s1600/hi+2.gif'/>");
theText = theText.replace(/:X/gi, "<img src='http://2.bp.blogspot.com/-wmOB_Z6LPp4/UTIt9FhZiwI/AAAAAAAABBg/7VoefgIQjEs/s1600/give_heart.gif'/>");
theText = theText.replace(/:\-\*/gi, "<img src='http://2.bp.blogspot.com/-H4e_O5BFVP8/UTIumwhVmKI/AAAAAAAABBw/SKhY4DDxKkk/s1600/air_kiss.gif'/>");
theText = theText.replace(/=\)\)/gi, "<img src='http://1.bp.blogspot.com/-lNNTReQVc0A/UTIrjDhVLAI/AAAAAAAABAg/BsVMYnr54pI/s1600/rofl.gif'/>");
bodyText.innerHTML = theText;
}
replaceText();
//]]>
</script>
<!--kolobok-smileys-->
b) Script for threaded commenting system with comments that have the reply function:
<script type='text/javascript'>
//<![CDATA[
a=document.getElementById('comment-holder');if(a){b=a.getElementsByTagName("p");for(i=0;i<b.length;i++){if(b.item(i).getAttribute('CLASS')=='comment-content'){_str=b.item(i).innerHTML.replace(/:\)\)/gi,"<img src='http://2.bp.blogspot.com/-Ph2wxEvy2mc/UTIr8-fdHjI/AAAAAAAABAo/3use2PsPhMA/s1600/taunt.gif' alt='' class='smiley'/>");_str=_str.replace(/=d&gt;/gi,"<img src='http://1.bp.blogspot.com/-8C5UH12mxf0/UTIzmsxczDI/AAAAAAAABDA/2seHdqLVQ6Q/s1600/suicide.gif' alt='' class='smiley'/>");_str=_str.replace(/:d/gi,"<img src='http://4.bp.blogspot.com/-lhTywmMZ58E/UTI04kjJ3WI/AAAAAAAABDY/qNgtijEr_E8/s1600/biggrin.gif' alt='' class='smiley'/>");_str=_str.replace(/:p/gi,"<img src='http://1.bp.blogspot.com/-gG_Wn6D6Ux4/UTIyqFyfKbI/AAAAAAAABCo/qEmU8s8ndVI/s1600/tongue.gif' alt='' class='smiley'/>");_str=_str.replace(/:\(\(/gi,"<img src='http://3.bp.blogspot.com/-pcE-4ot-gjk/UTIsLRff6SI/AAAAAAAABAw/LYvZ8__88Ak/s1600/cry2.gif' alt='' class='smiley'/>");_str=_str.replace(/:\)/gi,"<img src='http://4.bp.blogspot.com/-k4ujC23cSgI/UTIq7eUkmuI/AAAAAAAABAQ/YUNL9_RhDB0/s1600/smile3.gif' alt='' class='smiley'/>");_str=_str.replace(/:\(/gi,"<img src='http://2.bp.blogspot.com/-XSBJ7zBZKZs/UTIrT-hMYyI/AAAAAAAABAY/6B26_8Ttwj4/s1600/sad.gif' alt='' class='smiley'/>");_str=_str.replace(/:-\?/gi,"<img src='http://1.bp.blogspot.com/-TSIzPWeGBwk/UTI0S-nw5tI/AAAAAAAABDQ/xyHPCFZH4fI/s1600/think.gif' alt='' class='smiley'/>");_str=_str.replace(/d\(/gi,"<img src='http://3.bp.blogspot.com/-qlyn_deOhFw/UTIzY8aRgqI/AAAAAAAABC4/pfSojMdD33s/s1600/doh.gif' alt='' class='smiley'/>");_str=_str.replace(/:-o/gi,"<img src='http://3.bp.blogspot.com/-Zb5g0OWHx4c/UTIsuPLt90I/AAAAAAAABA4/cmP1ltBmVF0/s1600/shock.gif' alt='' class='smiley'/>");_str=_str.replace(/:-f/gi,"<img src='http://4.bp.blogspot.com/-SpvC8mHHwhg/UTIzQMUVGKI/AAAAAAAABCw/_NKKVyQtulk/s1600/flowers1.gif' alt='' class='smiley'/>");_str=_str.replace(/:-ss/gi,"<img src='http://1.bp.blogspot.com/-qpnD1BYon5w/UTI0AIeKX6I/AAAAAAAABDI/HsllV7NYTqk/s1600/unsure.gif' alt='' class='smiley'/>");_str=_str.replace(/b-\(/gi,"<img src='http://3.bp.blogspot.com/-h4yNmhdKUVU/UTIwUKpvVOI/AAAAAAAABCY/B0FEZVRGHe4/s1600/threaten.gif' alt='' class='smiley'/>");_str=_str.replace(/h-\(/gi,"<img src='http://4.bp.blogspot.com/-veVoDPEc7I4/UTIv9wCS0jI/AAAAAAAABCQ/4c5FgCHAiU4/s1600/help.gif' alt='' class='smiley'/>");_str=_str.replace(/g-\)/gi,"<img src='http://2.bp.blogspot.com/-_ttAcnBbAaw/UTIvKtxfWvI/AAAAAAAABCA/X2JLEShhOQU/s1600/good.gif' alt='' class='smiley'/>");_str=_str.replace(/5-\p/gi,"<img src='http://2.bp.blogspot.com/--o9jZ1nMcec/UTIuyCBgS_I/AAAAAAAABB4/Jf03oz5yKrU/s1600/beee.gif' alt='' class='smiley'/>");_str=_str.replace(/y-\)/gi,"<img src='http://2.bp.blogspot.com/-6-BTJcVpwY0/UTIvhF_PL-I/AAAAAAAABCI/SS-LDADTSls/s1600/yahoo.gif' alt='' class='smiley'/>");_str=_str.replace(/c-\)/gi,"<img src='http://3.bp.blogspot.com/-khAwhIYbgvQ/UTItD_PfNyI/AAAAAAAABBI/HMpRMQh5Uak/s1600/crazy.gif' alt='' class='smiley'/>");_str=_str.replace(/s-\)/gi,"<img src='http://2.bp.blogspot.com/-fsTXhXl10Gg/UTIs7Ll01AI/AAAAAAAABBA/QkWgWAAFG3g/s1600/spiteful.gif' alt='' class='smiley'/>");_str=_str.replace(/d-\)/gi,"<img src='http://2.bp.blogspot.com/-CIuUuJeuyGI/UTIueHgTxOI/AAAAAAAABBo/BzXkTEEDlhw/s1600/drinks.gif' alt='' class='smiley'/>");_str=_str.replace(/w-\)/gi,"<img src='http://2.bp.blogspot.com/-Mc5ed3Ymk7s/UTI1GIXMAMI/AAAAAAAABDg/PyDOfoXgsl0/s1600/cheer.gif' alt='' class='smiley'/>");_str=_str.replace(/:-\h/gi,"<img src='http://2.bp.blogspot.com/-JOgaMRI61Jk/UTItsGc5KdI/AAAAAAAABBY/6UDCabfZQbg/s1600/hi+2.gif' alt='' class='smiley'/>");_str=_str.replace(/:X/gi,"<img src='http://2.bp.blogspot.com/-wmOB_Z6LPp4/UTIt9FhZiwI/AAAAAAAABBg/7VoefgIQjEs/s1600/give_heart.gif' alt='' class='smiley'/>");_str=_str.replace(/:\-\*/gi,"<img src='http://2.bp.blogspot.com/-H4e_O5BFVP8/UTIumwhVmKI/AAAAAAAABBw/SKhY4DDxKkk/s1600/air_kiss.gif' alt='' class='smiley'/>");_str=_str.replace(/=\)\)/gi,"<img src='http://1.bp.blogspot.com/-lNNTReQVc0A/UTIrjDhVLAI/AAAAAAAABAg/BsVMYnr54pI/s1600/rofl.gif' alt='' class='smiley'/>");b.item(i).innerHTML=_str;}}}
//]]>
</script>
Note: ignore the next 5-8 steps if you have threaded comments!

Step 5. Find this code snippet:
<b:loop values='data:post.comments' var='comment'>
Step 6. Paste the following line just above it:
<div id='smileys'>
Step 7. Find the following tag and look carefully, it should be somewhere below the code from step 5:
</b:loop>
Step 8. Paste the below div 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 at the second one (press Enter 2 times).

b) For threaded commenting system find the second (2nd) and fourth (4th) occurrence of the line below:
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
Step 10. Just AFTER the line above, add this code:
<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()">Hide Emoticons</a>';
}
function lessSmilies() {
    document.getElementById('smiley-more').style.display = 'none';
    document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:moreSmilies()">Show Emoticons</a>';
}
//]]>
</script>
<div class='emoticons'>
<span id='smiley-more' style='display: none;'>
<div class="itemo"><img src='http://4.bp.blogspot.com/-k4ujC23cSgI/UTIq7eUkmuI/AAAAAAAABAQ/YUNL9_RhDB0/s1600/smile3.gif'/><div class="emos">:)</div></div>
<div class="itemo"><img src='http://2.bp.blogspot.com/-XSBJ7zBZKZs/UTIrT-hMYyI/AAAAAAAABAY/6B26_8Ttwj4/s1600/sad.gif'/><div class="emos">:(</div></div>
<div class="itemo"><img src='http://2.bp.blogspot.com/-Ph2wxEvy2mc/UTIr8-fdHjI/AAAAAAAABAo/3use2PsPhMA/s1600/taunt.gif'/><div class="emos">:))</div></div>
<div class="itemo"><img src='http://3.bp.blogspot.com/-pcE-4ot-gjk/UTIsLRff6SI/AAAAAAAABAw/LYvZ8__88Ak/s1600/cry2.gif'/><div class="emos">:((</div></div>
<div class="itemo"><img src='http://1.bp.blogspot.com/-lNNTReQVc0A/UTIrjDhVLAI/AAAAAAAABAg/BsVMYnr54pI/s1600/rofl.gif'/><div class="emos">=))</div></div>
<div class="itemo"><img src='http://1.bp.blogspot.com/-8C5UH12mxf0/UTIzmsxczDI/AAAAAAAABDA/2seHdqLVQ6Q/s1600/suicide.gif'/><div class="emos">=D&gt;</div></div>
<div class="itemo"><img src='http://4.bp.blogspot.com/-lhTywmMZ58E/UTI04kjJ3WI/AAAAAAAABDY/qNgtijEr_E8/s1600/biggrin.gif'/><div class="emos">:D</div></div>
<div class="itemo"><img src='http://1.bp.blogspot.com/-gG_Wn6D6Ux4/UTIyqFyfKbI/AAAAAAAABCo/qEmU8s8ndVI/s1600/tongue.gif'/><div class="emos">:P</div></div>
<div class="itemo"><img src='http://3.bp.blogspot.com/-Zb5g0OWHx4c/UTIsuPLt90I/AAAAAAAABA4/cmP1ltBmVF0/s1600/shock.gif'/><div class="emos">:-O</div></div>
<div class="itemo"><img src='http://1.bp.blogspot.com/-TSIzPWeGBwk/UTI0S-nw5tI/AAAAAAAABDQ/xyHPCFZH4fI/s1600/think.gif'/><div class="emos">:-?</div></div>
<div class="itemo"><img src='http://1.bp.blogspot.com/-qpnD1BYon5w/UTI0AIeKX6I/AAAAAAAABDI/HsllV7NYTqk/s1600/unsure.gif'/><div class="emos">:-SS</div></div>
<div class="itemo"><img src='http://4.bp.blogspot.com/-SpvC8mHHwhg/UTIzQMUVGKI/AAAAAAAABCw/_NKKVyQtulk/s1600/flowers1.gif'/><div class="emos">:-f</div></div>
<div class="itemo"><img src='http://3.bp.blogspot.com/-qlyn_deOhFw/UTIzY8aRgqI/AAAAAAAABC4/pfSojMdD33s/s1600/doh.gif'/><div class="emos">d(</div></div>
<div class="itemo"><img src='http://2.bp.blogspot.com/-H4e_O5BFVP8/UTIumwhVmKI/AAAAAAAABBw/SKhY4DDxKkk/s1600/air_kiss.gif'/><div class="emos">:-*</div></div>
<div class="itemo"><img src='http://3.bp.blogspot.com/-h4yNmhdKUVU/UTIwUKpvVOI/AAAAAAAABCY/B0FEZVRGHe4/s1600/threaten.gif'/><div class="emos">b-(</div></div>
<div class="itemo"><img src='http://4.bp.blogspot.com/-veVoDPEc7I4/UTIv9wCS0jI/AAAAAAAABCQ/4c5FgCHAiU4/s1600/help.gif'/><div class="emos">h-(</div></div>
<div class="itemo"><img src='http://2.bp.blogspot.com/-_ttAcnBbAaw/UTIvKtxfWvI/AAAAAAAABCA/X2JLEShhOQU/s1600/good.gif'/><div class="emos">g-)</div></div>
<div class="itemo"><img src='http://2.bp.blogspot.com/--o9jZ1nMcec/UTIuyCBgS_I/AAAAAAAABB4/Jf03oz5yKrU/s1600/beee.gif'/><div class="emos">5-p</div></div>
<div class="itemo"><img src='http://2.bp.blogspot.com/-6-BTJcVpwY0/UTIvhF_PL-I/AAAAAAAABCI/SS-LDADTSls/s1600/yahoo.gif'/><div class="emos">y-)</div></div>
<div class="itemo"><img src='http://3.bp.blogspot.com/-khAwhIYbgvQ/UTItD_PfNyI/AAAAAAAABBI/HMpRMQh5Uak/s1600/crazy.gif'/><div class="emos">c-)</div></div>
<div class="itemo"><img src='http://2.bp.blogspot.com/-fsTXhXl10Gg/UTIs7Ll01AI/AAAAAAAABBA/QkWgWAAFG3g/s1600/spiteful.gif'/><div class="emos">s-)</div></div>
<div class="itemo"><img src='http://2.bp.blogspot.com/-CIuUuJeuyGI/UTIueHgTxOI/AAAAAAAABBo/BzXkTEEDlhw/s1600/drinks.gif'/><div class="emos">d-)</div></div>
<div class="itemo"><img src='http://2.bp.blogspot.com/-Mc5ed3Ymk7s/UTI1GIXMAMI/AAAAAAAABDg/PyDOfoXgsl0/s1600/cheer.gif'/><div class="emos">w-)</div></div>
<div class="itemo"><img src='http://2.bp.blogspot.com/-JOgaMRI61Jk/UTItsGc5KdI/AAAAAAAABBY/6UDCabfZQbg/s1600/hi+2.gif'/><div class="emos">:-h</div></div>
<div class="itemo"><img src='http://2.bp.blogspot.com/-wmOB_Z6LPp4/UTIt9FhZiwI/AAAAAAAABBg/7VoefgIQjEs/s1600/give_heart.gif'/><div class="emos">:X</div></div>
</span>
<span id='smiley-toggle'><a href='javascript:moreSmilies()'>Show Emoticons <img src='http://4.bp.blogspot.com/-k4ujC23cSgI/UTIq7eUkmuI/AAAAAAAABAQ/YUNL9_RhDB0/s1600/smile3.gif'/></a></span>
</div></b:if>
Step 11. Finally, find this tag:
]]></b:skin>
Step 12. Add the CSS code just above ]]></b:skin>
.itemo{float:left;font-size:11px;height:30px;line-height:1.2;padding:10px 0;text-align:center;width:85px;}
span#smiley-toggle{clear:both;padding:15px 10px;float:left;font:bold 14px 'Oswald', sans-serif;}
span#smiley-toggle a{text-decoration:none;}
#smiley-toggle img{vertical-align:bottom;}
img.smiley{vertical-align:bottom;}
Step 13. Save the changes by clicking the 'Save Template' and you're done adding emoticons in Blogger comments. Enjoy!

No comments:

Post a Comment

Search This Blog

Recent Post

Recent Posts Widget

Blog Archive

Popular Posts