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 {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.
background: #EBF0FF;
color: #000;
border-top: 1px solid #ebf0ff;
margin:0;
padding:0 0 0 20px;
}
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.gifTry to replace the red colored number with 56:
http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/56.gifIncrease 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.
Post a Comment