When you read the recent comments in the right-hand sidebar in this blog, you may find sometimes people write me comments with smiley emoticons. For those who can't read Chinese, the recent comments that I'm talking about is the piece of white paper in the rightmost column in this blog, below the yellow post-it and above the Google ads bar.
Actually I'm not the first one who works on this kind of hack. When I find this funny idea I tried to google for some readymade code and implement in my blog. However, some of the codes that I found do not support IE6, and some codes loop heavily and result in very unstable webpage loading. After a few unsuccessful trails, I decided to use my own way to code this hack. I tested the current hack in Firefox 3, IE6, IE8 and Google Chrome, and so far did not find any problem. In this article I'll show you how to make your blogger comments smile.
As different blogger template has different layout, and you may place you comment form as full page, pop-up or embedded below post, the codes in your template can look very different from mine. In this post I'll explain the hack base on the standard 'Rounders 4' template that you can find under Layout => Pick New Template in the blogger's control panel, and I'll setup the comment form as 'embedded below post'. If you can't find the code segments in my explanation, you may try to test the implementation with a test blog base on the standard Rounders 4 template. Once you workout the hack successfully you may compare the codes in your test template against your live template and try to figure out where to place the codes.
So here is the step-by-step explanation.
Step 3 and Step 4 is a bit tricky. The tag that you are looking for in Step 3 may have different variation, like:
<dl class='comments-block' id='comments-block'> or,
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
What you needs to find is a <dl> tag with id='comments-block', and that <dl> tag represent the start of the comment list in your blog. Before that open <dl> tag you add the code segment in Step 3, and after the immediate closing </dl> tag you add the code segment in Step 4.
However, the comment list in some template does not start from any tag with id='comments-block', and in such situation you won't find anything in your template with the code phrase id='comments-block'>. For example, the comment list in one template that I studied before start from a <div class='commentlist'> tag. Since the comment list already display between a <div> tag, you may simply add an id to that <div> tag, by changing the tag as <div class='commentlist' id='emocomment'>. As that <div> tag already has its own closing </div> tag, you don't need to perform Step 4 in such circumstance.
One more example, the comment list of the Desktop Chaos template that you see in this blog start from a tag likes that:
<ol class='commentlist'>
In such case, once you identify that <ol> tag, insert the code segment in Step 3 before it, find the immediate closing </ol> tag, and insert the code segment in Step 4 after it. Sometimes it needs some trail and error for you to figure out exactly which block of code that you should enclose with the <div id='emocomment'></div> tag.
Okay, after you find your way to complete Step 3 and 4, you can test by writing a comment and insert smiley codes like :) or :D. The codes should turn to emoticons in your comment posts. The next step you'll tell your visitors what smiley codes are available to them. You may scroll to the bottom of this post, just above the comment form, to see how this list of emoticons look like.
In some template the tag <b:if cond='data:post.allowNewComments'> may not be exist. In such case if you find the tag <b:if cond='data:post.embedCommentForm'>, you may put the code segment below that tag instead. Other template may have variation in its coding structure and you need to figure out the best place you want to put this emoticon list in your own template.
You may change the background color of this emoticon list by changing the hexadecimal numbers behind the background parameter in the first <div> tag in the code segment:
<div style='text-align: center; border: 1px dotted #cccccc; border-width:1px 0; padding: 5px; background: #557777;'>
#557777 means I applied 55 red, 77 green and 77 blue to create the background color. Each hexadecimal number can start from 00 to ff. You can alter the 3 numbers to match the background color with your blog design.
In case you have a recent comment list like this blog, you may also want the emoticons show up in your recent comments. You can follow the tutorial in the website below to create recent comments in your sidebar:
http://www.eblogtemplates.com/setup-recent-posts-recent-comments/
As you create the recent comments through the RSS Feed gadget, remember the title that you specified.
Check your blog if the smiley codes in your recent comments turn to emoticons, and if yes, congratulation! Now you got a blog that people can comment you with a smile.
Regarding the post content in your blog, I don't recommend to implement similar hack. Changing the innerHTML of the post content with this kind of hack may create many problems, especially if you have other javascript function enhancement in your blog. If I need a smiley icon in my post, I'll simply copy and paste an image tag like this <img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif" style="border-width: 0px; padding: 0pt; vertical-align: middle; display:inline;" /> in my post.
One last point, recently I found many people leave me comments with just emoticons. I really appreciate your responses; however, too much such kind of comments will empty the Recent Comment Box and leave that piece of perforated paper on the right hand side of this blog nothing but five smiley icons. So in case you wish to leave a comment in this blog, please at least write a few words in your language. Comments with emoticon only will be rejected in this blog. Personally I don't like my blog looks like a testing platform
, so please also don't add words like "testing" or "測試" in your comments. Thanks for the cooperation.
Actually I'm not the first one who works on this kind of hack. When I find this funny idea I tried to google for some readymade code and implement in my blog. However, some of the codes that I found do not support IE6, and some codes loop heavily and result in very unstable webpage loading. After a few unsuccessful trails, I decided to use my own way to code this hack. I tested the current hack in Firefox 3, IE6, IE8 and Google Chrome, and so far did not find any problem. In this article I'll show you how to make your blogger comments smile.
As different blogger template has different layout, and you may place you comment form as full page, pop-up or embedded below post, the codes in your template can look very different from mine. In this post I'll explain the hack base on the standard 'Rounders 4' template that you can find under Layout => Pick New Template in the blogger's control panel, and I'll setup the comment form as 'embedded below post'. If you can't find the code segments in my explanation, you may try to test the implementation with a test blog base on the standard Rounders 4 template. Once you workout the hack successfully you may compare the codes in your test template against your live template and try to figure out where to place the codes.
So here is the step-by-step explanation.
Step 1: Login to blogger, and from the control panel, go to Layout => Edit HTML, and put a tick in the Expand Widget Templates checkbox. Search in the Edit Template Box for the tag <head>. Under the <head> tag add the following codes (only the red lines):
...<head>
<!--emoticon START-->
<script src='http://chiwawah.web.fc2.com/smiley/emotion.js' type='text/javascript'/>
<!--emoticon END-->
<b:include data='blog' name='all-head-content'/>...
<!--emoticon START-->
<script src='http://chiwawah.web.fc2.com/smiley/emotion.js' type='text/javascript'/>
<!--emoticon END-->
<b:include data='blog' name='all-head-content'/>...
Step 2: Search for the tag <body>, and replace the <body> tag as follow (only the red lines):
...]]></b:skin>
</head>
<!--emoticon START-->
<body onload='replaceText();'>
<!--emoticon END-->
<div id='outer-wrapper'>...
</head>
<!--emoticon START-->
<body onload='replaceText();'>
<!--emoticon END-->
<div id='outer-wrapper'>...
Step 3: Search for the code id='comments-block'>, and above the tag that you find, insert the codes as follow (only the red lines):
...<b:if cond='data:post.numBacklinks != 0'>
<!--emoticon START-->
<div id='emocomment'>
<!--emoticon END-->
<dl class='comments-block' id='comments-block'>...
<!--emoticon START-->
<div id='emocomment'>
<!--emoticon END-->
<dl class='comments-block' id='comments-block'>...
Step 4: Start from the position that you just place the tag <div id='emocomment'> in Step 3, scroll down and find the first </dl> tag, and below that tag insert the following codes (only the red lines):
...</b:loop>
</dl>
<!--emoticon START-->
</div>
<!--emoticon END-->
</b:if>
<p class='comment-footer'>...
</dl>
<!--emoticon START-->
</div>
<!--emoticon END-->
</b:if>
<p class='comment-footer'>...
Step 3 and Step 4 is a bit tricky. The tag that you are looking for in Step 3 may have different variation, like:
<dl class='comments-block' id='comments-block'> or,
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
What you needs to find is a <dl> tag with id='comments-block', and that <dl> tag represent the start of the comment list in your blog. Before that open <dl> tag you add the code segment in Step 3, and after the immediate closing </dl> tag you add the code segment in Step 4.
However, the comment list in some template does not start from any tag with id='comments-block', and in such situation you won't find anything in your template with the code phrase id='comments-block'>. For example, the comment list in one template that I studied before start from a <div class='commentlist'> tag. Since the comment list already display between a <div> tag, you may simply add an id to that <div> tag, by changing the tag as <div class='commentlist' id='emocomment'>. As that <div> tag already has its own closing </div> tag, you don't need to perform Step 4 in such circumstance.
One more example, the comment list of the Desktop Chaos template that you see in this blog start from a tag likes that:
<ol class='commentlist'>
In such case, once you identify that <ol> tag, insert the code segment in Step 3 before it, find the immediate closing </ol> tag, and insert the code segment in Step 4 after it. Sometimes it needs some trail and error for you to figure out exactly which block of code that you should enclose with the <div id='emocomment'></div> tag.
Okay, after you find your way to complete Step 3 and 4, you can test by writing a comment and insert smiley codes like :) or :D. The codes should turn to emoticons in your comment posts. The next step you'll tell your visitors what smiley codes are available to them. You may scroll to the bottom of this post, just above the comment form, to see how this list of emoticons look like.
Step 5: Go back to the Edit HTML panel, tick the Expand Widget Templates checkbox, find the tag <b:if cond='data:post.allowNewComments'>, and insert the following codes (again, only the red lines):
...<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<!--emoticon START-->
<div style='text-align: center; border: 1px dotted #cccccc; border-width:1px 0; padding: 5px; background: #557777;'>
<b>
<img alt=':)' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :)
<img alt=';)' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> ;)
<img alt=':D' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :D
<img alt='8=)' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> 8=)
<img alt='~:V~' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/6.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> ~:V~
<img alt=':-?' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :-?
<img alt=':^o' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/44.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :^o
<img alt='~:-P' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/36.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> ~:-P
<br/>
<img alt=':(' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :(
<img alt=':x' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :x
<img alt=':R~' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/9.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :R~
<img alt=':P' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :P
<img alt=':-*' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :-*
<img alt='=((' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> =((
<img alt=':-O' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :-O
<img alt='X(' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> X(
<img alt=':-w' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/45.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :-w
<br/>
<img alt=':~' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/15.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :~
<img alt='B-)' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> B-)
<img alt=':-S' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/17.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :-S
<img alt='S:-#' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/18.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> S:-#
<img alt='~:v' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/19.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> ~:v
<img alt=':{(' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :{(
<img alt=':#' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :#
<img alt=':-~' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/46.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :-~
<br/>
<img alt=':|' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :|
<img alt=':-k' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/23.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :-k
<img alt='=))' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> =))
<img alt='O:-' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/25.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> O:-
<img alt=':-B' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/26.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :-B
<img alt='=;' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/27.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> =;
<img alt=':-c' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/101.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :-c
<img alt='~:=p' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/47.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> ~:=p
<br/>
<img alt=':-]' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :-]
<img alt=':-{(' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :-{(
<img alt=':-h' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/103.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :-h
<img alt=':-t' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :-t
<img alt='I-|' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> I-|
<img alt='8-|' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/29.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> 8-|
<img alt='~):=)' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/48.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> ~):=)
<br/>
<img alt='L-)' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/30.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> L-)
<img alt=':-@' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/31.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :-@
<img alt=':-U' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/32.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :-U
<img alt='[-(' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/33.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> [-(
<img alt='8-~' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/105.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> 8-~
<img alt=':O)' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/34.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :O)
<img alt='8-}' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> 8-}
<br/>
<img alt='(:=|' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/37.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> (:=|
<img alt='=P~' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/38.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> =P~
<img alt=':=q' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/39.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :=q
<img alt='#-o' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/40.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> #-o
<img alt='=D~' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> =D~
<img alt=':=SS' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/42.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :=SS
<img alt='@-)' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/43.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> @-)
</b>
</div>
<div align='center'><span style='font-size: small;'>Enter emoticon code (eg. <b>:)</b>) in your comments, and codes will turn into emoticons once your comments posted.</span></div>
<br/><br/><br/>
<!--emoticon END-->
<b:include data='post' name='comment-form'/>...
<b:if cond='data:post.allowNewComments'>
<!--emoticon START-->
<div style='text-align: center; border: 1px dotted #cccccc; border-width:1px 0; padding: 5px; background: #557777;'>
<b>
<img alt=':)' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :)
<img alt=';)' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> ;)
<img alt=':D' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :D
<img alt='8=)' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> 8=)
<img alt='~:V~' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/6.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> ~:V~
<img alt=':-?' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :-?
<img alt=':^o' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/44.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :^o
<img alt='~:-P' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/36.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> ~:-P
<br/>
<img alt=':(' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :(
<img alt=':x' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :x
<img alt=':R~' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/9.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :R~
<img alt=':P' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :P
<img alt=':-*' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :-*
<img alt='=((' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> =((
<img alt=':-O' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :-O
<img alt='X(' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> X(
<img alt=':-w' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/45.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :-w
<br/>
<img alt=':~' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/15.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :~
<img alt='B-)' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> B-)
<img alt=':-S' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/17.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :-S
<img alt='S:-#' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/18.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> S:-#
<img alt='~:v' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/19.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> ~:v
<img alt=':{(' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :{(
<img alt=':#' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :#
<img alt=':-~' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/46.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :-~
<br/>
<img alt=':|' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :|
<img alt=':-k' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/23.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :-k
<img alt='=))' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> =))
<img alt='O:-' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/25.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> O:-
<img alt=':-B' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/26.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :-B
<img alt='=;' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/27.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> =;
<img alt=':-c' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/101.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :-c
<img alt='~:=p' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/47.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> ~:=p
<br/>
<img alt=':-]' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :-]
<img alt=':-{(' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :-{(
<img alt=':-h' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/103.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :-h
<img alt=':-t' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :-t
<img alt='I-|' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> I-|
<img alt='8-|' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/29.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> 8-|
<img alt='~):=)' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/48.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> ~):=)
<br/>
<img alt='L-)' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/30.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> L-)
<img alt=':-@' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/31.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :-@
<img alt=':-U' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/32.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :-U
<img alt='[-(' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/33.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> [-(
<img alt='8-~' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/105.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> 8-~
<img alt=':O)' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/34.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :O)
<img alt='8-}' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> 8-}
<br/>
<img alt='(:=|' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/37.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> (:=|
<img alt='=P~' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/38.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> =P~
<img alt=':=q' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/39.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :=q
<img alt='#-o' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/40.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> #-o
<img alt='=D~' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> =D~
<img alt=':=SS' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/42.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> :=SS
<img alt='@-)' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/43.gif' style='border-width: 0px; padding: 0pt; vertical-align: middle;'/> @-)
</b>
</div>
<div align='center'><span style='font-size: small;'>Enter emoticon code (eg. <b>:)</b>) in your comments, and codes will turn into emoticons once your comments posted.</span></div>
<br/><br/><br/>
<!--emoticon END-->
<b:include data='post' name='comment-form'/>...
In some template the tag <b:if cond='data:post.allowNewComments'> may not be exist. In such case if you find the tag <b:if cond='data:post.embedCommentForm'>, you may put the code segment below that tag instead. Other template may have variation in its coding structure and you need to figure out the best place you want to put this emoticon list in your own template.
You may change the background color of this emoticon list by changing the hexadecimal numbers behind the background parameter in the first <div> tag in the code segment:
<div style='text-align: center; border: 1px dotted #cccccc; border-width:1px 0; padding: 5px; background: #557777;'>
#557777 means I applied 55 red, 77 green and 77 blue to create the background color. Each hexadecimal number can start from 00 to ff. You can alter the 3 numbers to match the background color with your blog design.
In case you have a recent comment list like this blog, you may also want the emoticons show up in your recent comments. You can follow the tutorial in the website below to create recent comments in your sidebar:
http://www.eblogtemplates.com/setup-recent-posts-recent-comments/
As you create the recent comments through the RSS Feed gadget, remember the title that you specified.
Step 6: After the recent comments show up in your sidebar, go back to the Edit HTML panel, tick the Expand Widget Templates checkbox, and search the title text that you specified for your recent comments. In my example, I search with the text 'Comment List Blog in Test' and find the following block of code. Add the red lines below the <h2><data:title/></h2>, and above the <b:include name='quickedit'/> tag, as follow:
<b:widget id='Feed1' locked='false' title='Comment List Blog in Test' type='Feed'>
<b:includable id='main'>
<h2><data:title/></h2>
<!--emoticon START-->
<div id='emocommentls'>
<!--emoticon END-->
<div class='widget-content' expr:id='data:widget.instanceId + "_feedItemListDisplay"'>
<span style='filter: alpha(25); opacity: 0.25;'>
<a expr:href='data:feedUrl'><data:loadingMsg/></a>
</span>
</div>
<!--emoticon START-->
</div>
<!--emoticon END-->
<b:include name='quickedit'/>
</b:includable>
</b:widget>
<b:includable id='main'>
<h2><data:title/></h2>
<!--emoticon START-->
<div id='emocommentls'>
<!--emoticon END-->
<div class='widget-content' expr:id='data:widget.instanceId + "_feedItemListDisplay"'>
<span style='filter: alpha(25); opacity: 0.25;'>
<a expr:href='data:feedUrl'><data:loadingMsg/></a>
</span>
</div>
<!--emoticon START-->
</div>
<!--emoticon END-->
<b:include name='quickedit'/>
</b:includable>
</b:widget>
Check your blog if the smiley codes in your recent comments turn to emoticons, and if yes, congratulation! Now you got a blog that people can comment you with a smile.
Regarding the post content in your blog, I don't recommend to implement similar hack. Changing the innerHTML of the post content with this kind of hack may create many problems, especially if you have other javascript function enhancement in your blog. If I need a smiley icon in my post, I'll simply copy and paste an image tag like this <img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif" style="border-width: 0px; padding: 0pt; vertical-align: middle; display:inline;" /> in my post.
One last point, recently I found many people leave me comments with just emoticons. I really appreciate your responses; however, too much such kind of comments will empty the Recent Comment Box and leave that piece of perforated paper on the right hand side of this blog nothing but five smiley icons. So in case you wish to leave a comment in this blog, please at least write a few words in your language. Comments with emoticon only will be rejected in this blog. Personally I don't like my blog looks like a testing platform
, so please also don't add words like "testing" or "測試" in your comments. Thanks for the cooperation. 
nice emoticon.. B-)
回覆刪除Hey, Thanks for the codem Have you noticed that it's not working on author comments?? Here is a solved problem :) ~:V~
回覆刪除Cheers,
Anup kayastha
let's see it works. :)
回覆刪除Cool, thanks =D~
回覆刪除makasih tipsnya brother
回覆刪除;) Thank you. This worked for me! Now, I can \:D/
回覆刪除thanks :)
回覆刪除