Yahoo Smileys in both Author and Readers Comment ~Solved!

If you are using yahoo smiley emoticons in your blogger comments, I think you have notice that's not working on the author comments. It just works on the readers comments only. Those who are using author comment highlighting tricks only has this kinds of problem, else it is clear. But now you can use both trick at once highlight author comment and use emotions in your each & every comments as you wants.

Note: If you are using comment highlighting trick and want to show yahoo smiley in all comments, than use the follow tricks.  

You can see the yahoo smiley emoticons in both readers and my comment with highlighting author comment. If you want to do these tricks at once. Then let's see how to

Highlighting Author Comments

Highlighting author comment will make some different from other blog readers and it will let know to other you are the blog owner. You just have to make some changes in before code.

Find this code:

<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
 <b:else/>
<data:comment.author/>
 </b:if>
            <data:commentPostedByMsg/><br/>
             <span class='commentdate' style=''>
              <a expr:href='data:comment.url' title='comment permalink'>
                <data:comment.timestamp/>
              </a>
              <b:include data='comment' name='commentDeleteIcon'/>
              </span>
               </dt>


<b:if cond='data:comment.author == data:post.author'>
<dd class='owner-Body'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<br/>
          <dd class='comment-body'>
            <b:if cond='data:comment.isDeleted'>
              <span class='deleted-comment'><data:comment.body/></span>
            <b:else/>
              <p><data:comment.body/></p>
            </b:if>
          </dd>
</b:if>
          <dd class='comment-footer'>

Place these red colored code as shown above position. Now, find ]]></b:skin> and place the below CSS code just above ]]></b:skin>.

.owner-Body {
background: #EBF0FF;
color: #000;
border-top: 1px solid #ebf0ff;
margin:0;
padding:0 0 0 20px;
}

Now you have understand? What we have make some change into? Yes we just change the code .comment-body-author to .owner-Body. Because the tag .comment-body-author is already terminated by other tags. This change will help you to show smiley in all comments including your readers and author.

Add Smiley To The Comments

Now, let's try to add smiley in comments. First, Go to Blogger.com-> Layout->Edit Html. Find this line of code:

<b:if cond='data:post.embedCommentForm'>

Now,  below <b:if cond='data:post.embedCommentForm'>, add these all codes:

<div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 369; text-align: left; padding: 5px; 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>

Now, find </body> in your template. And add the following code just before </body>

<script src='http://www.mydatanest.com/files/kayastha/48099_h8tb0/smiley.js' type='text/javascript'/>

Now you can see the smiley in both in author and reader comment :)

Add Your The Hidden Emoticons Yourself

You can use the yahoo smiley hidden emotions yourself. You just have to edit the number containing in this url:

http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif

Try to replace the red colored number with 56:

http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/56.gif

Increase number from 56 to 57, 57 to 58...and copy the URL to address bar & hit enter. Choose the emoticons whichever you like.

Then follow the steps:

1. Download this smiley.js file.( You have to unzip this file)
2. Edit it with Notepad.
3. Replace the URL which you don't like with URL which you have choosen.

That's it!!! Thanks to Divya for helping me to show the smiley in both author and readers comments.