How to add Smileys to Blogger Posts Comment

In this post I will show you how to allow readers to add Smileys to the comments and make the comment section more interactive.


To add the smileys option to your comments you must add two extra pieces of code to your template.So make sure to Back up your template first before start the next step.

How to add Smileys to Blogger Post Comment

STEP

1. Login to you Blogger account. Then go to Dashboard > Design > Edit HTML and tick the "Expand Widget Templates" checkbox.

2.Press CTRL+F and search below code:

<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>

3.Paste the following code in-between those two lines :

<div style='-moz-background-clip: -moz-initial;-moz-background-origin: -moz-initial;-moz-background-inline-policy: -moz-initial;width: 369;text-align: left;border: 1px solid #cccccc;padding: 5px;background: #eeeeee;height:86'><b><img border='0' height='18'src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'width='18'/> :))<img border='0' height='18'src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'width='18'/> ;))<img border='0' height='18'src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'width='18'/> ;;)<img border='0' height='18'src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'width='18'/> :D<img border='0' height='18'src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'width='18'/> ;)<img border='0' height='18'src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'width='18'/> :p<img border='0' height='18'src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'width='22'/> :((<img border='0' height='18'src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'width='18'/> :)<img border='0' height='18'src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'width='18'/> :(<img border='0' height='18'src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'width='18'/> :X<img border='0' height='18'src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'width='18'/> =((<img border='0' height='18'src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'width='18'/> :-o<img border='0' height='18'src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'width='20'/> :-/<img border='0' height='18'src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'width='18'/> :-*<img border='0' height='18'src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'width='18'/> :|<img border='0' height='18'src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'width='24'/> 8-}<img border='0' height='18'src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'width='31'/> :)]<img border='0' height='18'src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'width='44'/> ~x(<img border='0' height='18'src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'width='30'/> :-t<img border='0' height='18'src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'width='18'/> b-(<img border='0' height='18'src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'width='18'/> :-L<img border='0' height='18'src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'width='34'/> x(<img border='0' height='18'src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'width='30'/> =))</b></div>

4.Press CTRL+F and search below code : 

</body>

5. Paste the following code just above/before it.

<script src='http://blogger-tabbed-widget.googlecode.com/files/Yahoo%20Smileys%20to%20Blogger%20Posts.js' type='text/javascript'/>

6.Done.Save the templates