Showing posts with label Comments. Show all posts
Showing posts with label Comments. Show all posts

August 13, 2011

How To Add Recent Comments Widget For Blogger Blog

 How To Add Recent Comments Widget For Blogger Blog
Dear friends, today i'm gonna show you how to add recent comments widget to blogger. this widget similar to recent posts widget! this widget show you your blog recent comments in sidebar. i hope you like this cool widget. and please share this post with your friends..we will meet with next post...thank you.

1.Log in to your dashboard--> layout- ->Page Elements

2.Click on Add a Gadget. Select HTML/Javascript.

3.Select the whole code given below and paste it in the widget box you have just opened above.












<script style="text/javascript">
function showrecentcomments(json) {
var numcomments = 5;
var showcommentdate = true;
var showposttitle = true;
var numchars = 100;
for (var i = 0; i < numcomments; i++) {
var entry = json.feed.entry[i];
var alturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
alturl = alturl.replace("#", "#comment-");
var postlink = alturl.split("#");
postlink = postlink[0];
var linktext = postlink.split("/");
linktext = linktext[5];
linktext = linktext.split(".html");
linktext = linktext[0];
var posttitle = linktext.replace(/-/g," ");
posttitle = posttitle.link(postlink);
var commentdate = entry.published.$t;
var cdyear = commentdate.substring(0,4);
var cdmonth = commentdate.substring(5,7);
var cdday = commentdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";
if ("content" in entry) {
var comment = entry.content.$t;}
else
if ("summary" in entry) {
var comment = entry.summary.$t;}
else var comment = "";
var re = /<S[^>]*>/g;
comment = comment.replace(re, "");
document.write('<br/>');
if (showcommentdate == true) document.write('On ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday + ' ');
document.write('<a href="' + alturl + '">' + entry.author[0].name.$t + '</a> commented');
if (showposttitle == true) document.write(' on ' + posttitle);
document.write('<br/>');
if (comment.length < numchars) {
document.write('<i>');
document.write(comment);
document.write('</i>');}
else
{
document.write('<i>');
comment = comment.substring(0, numchars);
var quoteEnd = comment.lastIndexOf(" ");
comment = comment.substring(0, quoteEnd);
document.write(comment + '...<a href="' + alturl + '">(more)</a>');
document.write('</i>');}
document.write('<br/>');
}
document.write('<br/>');
}
</script>
<script src="http://YOURBLOG.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
</script>




Note : Replace "http://YOURBLOG.blogspot.com" with Your blogspot URL.


4. Now Click Save and Refresh Your site.

How To Add Top Commentators Widget for Blogger


Hi! dear visitors here is cool gadget! this post similer to how to add top blog authors widget. so this post explain you how to add top commenters widget to your blog sidebar. i think you really like this gadget! you can organize a sport on your blog using this gadget! so you like add this top commentators eidget for your blogge, please follow the simple steps below to do it and share this post with your friends using social bookmarking! Thank you.

1.Log in to your dashboard--> Design- ->Page Elements

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the code given below and click save.












<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol>');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
if(obj.value.items[i].link == "")
var item ="<li>" + obj.value.items[i].title + "</li>";
else
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=2f414149ab66e0892a6a179016f93019&url=http%3A%2F%2Fyourblog.blogspot.com&num=10&filter=" type="text/javascript"></script>



Note : Remember to replace yourblog with your blog name.Do not include http://

You are done.

Picture From: http://www.online-money-maker.org/backlink-heaven-with-top-commentators-plug-in.html

How to Change Width Of The Blogger Comment Form


How to Change Width Of The Blogger Comment Form


Hi friends Here is another cool blogger hack. "HOW TO CHANGE WIDTH OF BLOGGER COMMENT FORM" i think this is very cool hack for bloggers. because this is very importanat to add big comments.blogger gave us a small comment form. so now we can change width of blogger comment form using this cool hack. i hope you really like this hack. Thank you..

Now Follow the simple steps below to do it:

1.Login to your blogger dashboard--> Desing- -> Edit HTML

2.Scroll down to where you see this code












<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='600px'/>


3.To change the code height and width as you like.  ( width='600px height='410')

4. Save template..your are done

How To Add Total Posts And Comments Widget For Blogger


How To Add Total Posts And Comments Widget For Blogger


Every bloggers like to know how many comments in their blogs.. but it's very hard to count comments. so today i'm gonna give you  cool total comments & total posts reader to your blog. You can use this widget to promote your blog in other blogs too. Simply follow the steps given below. it’s too easy to add it and it takes less than 1 minute, i hope you like this gadget! read below steps to add this gadget!!!..

1.Login to your blogger Dashboard and go to Desing --> Page Elements.

2.Click on 'Add a Gadget' on the sidebar.

3.Copy and past below code to your javascript.






<script style="text/javascript"> 
function totalPosts(json) { 
document.write('Total Posts: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>'); 
} 
function totalComments(json) { 
document.write('Total Comments: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>'); 
} 
</script> 
<script src=" /feeds/posts/default?alt=json-in-script&callback=totalPosts"></script> 
<script src=" /feeds/comments/default?alt=json-in-script&callback=totalComments"></script>


4.Now Click on "Save Java Script" You are done..

How To Add DISQUS Comments System in Blogger


Hi` friends, today im gonna show you How To Add DISQUS Comments System in Blogger,this is very famous Comments System' it help us realtime posting and updating. By offering a faster, more intuitive experience,and disqus is everyone's favorite way to comment system, powerful and easy to use.

Notification and reply system

The notification system lets people know when they've received a response. Best of all, they can continue the conversation straight from the email.

Inline media embedding

Full integration with media services such as Youtube, Flickr, and more. Attach media such as photos and videos right within the comments.

Mobile commenting

Fully compatible with mobile websites for commenting while on the go. The default mobile theme is formatted with smartphones, like the iPhone or Android phones, in mind.






So below is a Step by step tutorial on How to install Disqus comment box for Blogger Users.


1. Go to Disqus website and click get started button.
2. Add your Blogger blog details like: URL, website name and short name.
3. Then click done button and select Blogger platform on next page.
4. Download your exisiting blogger blog template on the computer. For this, login into your Blogger account and goto template > edit HTML
5. Don't miss this - Now Check the box of Expand Widget Templates code,













6. Now give path to your template and click on Upload and Continue,











7. After that you will get the message like: Your Blogger template was successfully patched.

8. On the same Blogger page, make sure Expand Widget Templates is checked. Paste the below patched template into the Edit Template area.










9. After pasting the code in you template you need to do one last things is: Go to Settings > Comments and change Comments Default for Posts to -> New Posts Do Not Have Comments

Look at the example below:











Congratulation !! see your post and  DISQUS comments system now ready...


Info From : http://disqus.com
Picture From : http://disqus.com

How To Remove Commentators profiles sites URL in Blogger


How To Remove Commentators profiles sites URL in Blogger

1.Login to your blogger dashboard--> Desing- -> Edit HTML

2.Click on "Expand Widget Templates".

3.Scroll down to where you see below 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>

4.Now replace above code with below code:

<data:comment.author/>

5.Save your template.. you are done.

How To Add Reply Option to Blogger Comments Using Image

How To Add Reply Option to Blogger Comments Using Image



1.Log in to your dashboard--> Desing- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this <data:commentPostedByMsg/> 

4.Copy below code and paste it just after above code.

<span><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=YOUR-BLOG-ID&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;); return false;'><img alt='Reply To This Comment' src='Your Reply Button Image Here'/></a></span>

NOTE : Replace YOUR-BLOG-ID with your blog ID.

Look at the example given below:

<span><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=5653009345002937003&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;); return false;'><img alt='Reply To This Comment' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLcBbInXeT2Wwav4ve0MWP0wKID3Wxs-jy_EMm9dfZ5-sMA-yIdTzU6aJb5StpPHvQqFgJ3VWGPvewA6nl8ggg2FmZiU_CfkWkfcG8xS4aV8LZhn8LdGdK-pZgZ9jPGc20AWptxdgNvVc/'/></a></span>

How To find your blog Id..

Login to your dashboard and click on "Settings" link of your blog

Now look at address bar of your browser.




Now Replace YOUR-BLOG-ID

Use this reply button images 











5.Save your template you are done.

How To Add Example Comment Box to Your Blogger


How To Add Example Comment Box to Your Blogger

1.Login to your Bogger Dashboard and go to Design >> & Page Elements.

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below

<form action="Your Post URLHere" method="post">
  Comments:<br />
  <textarea name="comments" id="comments">
  Hello... How Are You!
  </textarea><br />
  <input type="submit" value="Submit" />
</form></p>

Note: Replace Your Post URLHere with your post url,

Look at the example below:

Comments:




4. Now Click on Save "Html Java Script" and You are done..

How To Add Comment Feeds For Individual Blogger Posts


How To Add Comment Feeds For Individual Blogger Posts

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this: <data:post.body/> Tag.

4.Copy below code and paste it immediately after <data:post.body/> tag.

<p style='background-color:#ffffc6;'><a expr:href='"http://YOURBLOG.blogspot.com/feeds/" + data:post.id + "/comments/default?alt=rss"'>Comments Feed For This Post</a></p>

Note: Replace YOURBLOG with your blog url name.

5.Now save your template and you are done.

Cheers.

Add Comment Feeds For Individual Blogger Posts




How To Add Comment Feeds For Individual Blogger Posts

1.Log in to your dashboard--> Desing- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this: &lt;data:post.body/&gt;

4.Copy below code and paste it immediately after the line <data:post.body/>

<p style='background-color:#ffffc6;'><a expr:href='"http://YOURBLOG.blogspot.com/feeds/" + data:post.id + "/comments/default?alt=rss"'>Comments Feed For This Post</a></p>

Note:Replace YOURBLOG with your blog url name.

5.Now save your template. you are done.

August 12, 2011

How To Add Bubble Comments Count in Blogger Post Title


This bubble comments count near your each of you post title can make make your blog more attractive to your visitors.so let's go ahead and add a small bubble comment count in front of your blogger post area.

How To Add Bubble Comments Count in Blogger Post Title


1.Log in to your dashboard--> Desing- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see ]]></b:skin> tag.

4.Copy below code and paste immediately before it ]]></b:skin>













.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi11IIgKNqSJo1olyxyAS_turYNcg7rhVA5fh3MDZ6Q8SXKuwsP9xx38Q2br_a6ikg1s2q9hxdR5SqgO1tKTHCaKLQUbGNa2aGSnIXeRdmSa3Nu6nuoyAaR-T11nsYDwgDqbweO_uyaUn7Y/s1600/Comment+Bubble+%2815%29.png) no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
position:float;
}

5.Now find this code: <b:if cond='data:post.link'>

and replace it with the bellow code

<b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>
<b:if cond='data:post.link'>


Note: To use below images Right Click and "Copy Image Address/Location






6. Click on "Save Template" You are Done.

Cheers

How To Add Yahoo Smiley Emoticons for Blogger Comments V2


How To Add Yahoo Smiley Emoticons for Blogger Comments V2

1.Login to your blogger dashboard--> Design- -> Edit HTML

2.Scroll down to where you see ]]></b:skin> tag.

3.Copy below code and paste it just before ]]></b:skin> tag.



.bloggertricksandtoolzsmly {
    background: none repeat scroll 0 0 #EFF5FB !important;
    border: 1px dashed green !important;
    font-size: medium !important;
    padding: 5px !important;
    text-align: left !important;
    font-weight:bold !important;
    width:100% !important;
    -moz-background-clip: -moz-initial;
    -moz-background-origin: -moz-initial;
    -moz-background-inline-policy: -moz-initial;
}
img.Bttsmly {
    height: auto !important;
    vertical-align: middle !important;
    width: auto !important;
    border:0px !important;
}

3.Now Scroll down to where you see

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

4.Now add below code before

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

<div class="bloggertricksandtoolzsmly">
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif" alt="" class="Bttsmly"/> :)  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif" alt="" class="Bttsmly"/> :(  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif" alt="" class="Bttsmly"/> ;)  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif" alt="" class="Bttsmly"/> :D  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif" alt="" class="Bttsmly"/> ;;-)  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif" alt="" class="Bttsmly"/> :-/  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif" alt="" class="Bttsmly"/> :x  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif" alt="" class="Bttsmly"/> :P  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif" alt="" class="Bttsmly"/> :-*  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif" alt="" class="Bttsmly"/> =((  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif" alt="" class="Bttsmly"/> :-O  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif" alt="" class="Bttsmly"/> X(  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/15.gif" alt="" class="Bttsmly"/> :7  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif" alt="" class="Bttsmly"/> B-)  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/17.gif" alt="" class="Bttsmly"/> :-S  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/18.gif" alt="" class="Bttsmly"/> #:-S  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/19.gif" alt="" class="Bttsmly"/> 7:)  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif" alt="" class="Bttsmly"/> :((  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif" alt="" class="Bttsmly"/> :))  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif" alt="" class="Bttsmly"/> :|  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/23.gif" alt="" class="Bttsmly"/> /:)  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif" alt="" class="Bttsmly"/> =))  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/25.gif" alt="" class="Bttsmly"/> O:-)  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/26.gif" alt="" class="Bttsmly"/> :-B  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/27.gif" alt="" class="Bttsmly"/> =;  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/101.gif" alt="" class="Bttsmly"/> :-c  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif" alt="" class="Bttsmly"/> :)]  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif" alt="" class="Bttsmly"/> ~X(  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/103.gif" alt="" class="Bttsmly"/> :-h  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif" alt="" class="Bttsmly"/> :-t  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/105.gif" alt="" class="Bttsmly"/> 8-7  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif" alt="" class="Bttsmly"/> I-)  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/29.gif" alt="" class="Bttsmly"/> 8-|  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/29.gif" alt="" class="Bttsmly"/> L-)  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/31.gif" alt="" class="Bttsmly"/> :-a  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/32.gif" alt="" class="Bttsmly"/> :-$  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/33.gif" alt="" class="Bttsmly"/> [-(  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/34.gif" alt="" class="Bttsmly"/> :O)  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif" alt="" class="Bttsmly"/> 8-}  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/36.gif" alt="" class="Bttsmly"/> 2:-P  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/37.gif" alt="" class="Bttsmly"/> (:|  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/38.gif" alt="" class="Bttsmly"/> =P~  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/39.gif" alt="" class="Bttsmly"/> :-?  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/40.gif" alt="" class="Bttsmly"/> #-o  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif" alt="" class="Bttsmly"/> =D7  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/42.gif" alt="" class="Bttsmly"/> :-SS  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/43.gif" alt="" class="Bttsmly"/> @-)  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/44.gif" alt="" class="Bttsmly"/> :^o  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/45.gif" alt="" class="Bttsmly"/> :-w  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/47.gif" alt="" class="Bttsmly"/> 7:P  
<img src="http://l.yimg.com/us.yimg.co

5.Scroll down to where you see </body> tag.

6.Now add below code before </body> tag.

<script src='http://bloggertrickandtoolz.googlecode.com/files/www.bloggertricksandtoolz.com-yahoo-smileys.js' type='text/javascript'></script>

7.Now click on "Save Template" you are done..

Cheers.!


How To Highlight Author Comment in Blogger


How To Highlight Author Comment in Blogger

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this: ]]></b:skin> Tag.

4.Copy below code and put it before ]]></b:skin>

.comment-body-author {
background: #E6E6E6; /* Background color*/
color: #000; /* Text color*/
border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;
margin:0;
padding:0 0 0 20px; /* Posotion*/
}

5.Now Scroll down to where you see this:

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<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>
said...
</dt>

<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>

6.Replace above code with below code.

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<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>
said...
</dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>

<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>

Note : Change "Background color" , "Text color" and "Posotion" of above codes.

7.Click on "Save Templates" and you are done.

Cheers.!


Result: