Display Emoticons in Comments Area

With the emoticons in the comment box will make the blog more lively. The commentator could express their feelings more through icon2 (emoticon). If this feature in Wordpress probably already available. But we have to blogspot and find the way  in order to display the emoticons in the comments area. How we can do it ?

Emoticon Yahoo sample :

Here is how to do it :

1. First log into blogger, then to the “Layout (layout) -> Edit HTML”
2. Check the box “expand widget templates”
3. Then place the following script code before the </ body>
4. Find this code:

<p class=’comment-footer’>
<b:if cond=’data:post.embedCommentForm’>
<b:include data=’post’ name=’comment-form’/>
<b:else/>
<b:if cond=’data:post.allowComments’>
<a expr:href=’data:post.addCommentUrl’ expr:onclick=’data:post.addCommentOnclick’><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>

5. Place this following code before <p class=’comment-footer’>:

<b><img border=’0′ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif’/>
)
<img border=’0′ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif’/>
]
<img border=’0′ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif’/>
)
<img border=’0′ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif’/>
;;)
<img border=’0′ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif’/>

<img border=’0′ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif’/>

<img border=’0′ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif’/>
:p
<img border=’0′ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif’/>
(
<img border=’0′ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif’/>

<img border=’0′ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif’/>

<img border=’0′ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif’/>
:X
<img border=’0′ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif’/>
=((
<img border=’0′ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif’/>

<img border=’0′ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif’/>
:-/
<img border=’0′ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif’/>
:-*
<img border=’0′ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif’/>

<img border=’0′ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif’/>
8-}
<img border=’0′ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif’/>
~x(
<img border=’0′ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif’/>
:-t
<img border=’0′ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif’/>
b-(
<img border=’0′ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif’/>
:-L
<img border=’0′ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif’/>
x(
<img border=’0′ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif’/>
=))
</b>

Related posts:

1. Highlight The Script / Code in Posts
2. Display Status Yahoo Messenger
3. Post Thumbnails Using CSS
4. Optimize Images For Web Using RIOT
5. 10 Ways To Protect Children in Virtual World

Tags: home page design, hosting web site, seo web design, tips design, Web Design, web design tips, Web Hosting

This entry was posted on July 19, 2010 at July 19, 2010 and is filed under Recent News. You can follow any responses to this entry through the RSS 2.0 feed.