Knowledge is good only if it is shared. As a new blogger, I had learned to change the Web template, and found out the tips, tricks, hacks, and tweaks of altering the Blogger template, customizing CSS, widgets, layout, blog design, inserting JavaScripts, HTML codes, Google AdSense, and other settings the hard way, through many trials and errors. For the purposes of this guide, I had started with the old Blogger “Minima” template. As I made the changes or learned something new, I had documented them. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change. Hope this guide will help those who are finding the way around, just like me.

Search Tips for New Bloggers

We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Sep 29, 2007

Digg This Story

Author Comments - Different Styles

Bloggers generally welcome constructive comments and feedback on their posts. Among the ways to encourage comments are to remove the “nofollow” tag and to add a Recent Comments widget into the template. Comments highlight issues that readers might have faced, and the author's reply to these comments may be useful to other readers as well. If you have many comments posted in your blog, it would be nice to add different styles to the author's comments to make them stand out from the rest. Readers with questions on commonly asked issues may easily find their answers in previous posted comments. This tutorial shall explain how the author comment styles can be added to the template.

After 7 months of blogging, we have today hit the 300,000 visitors mark. It is not a big deal to many bloggers but it means a lot to us, knowing that whatever leisure time we had given up to write these articles was worth the while. Thanks to all! While we were reviewing our articles earlier, we realized that there were so many comments in several of them that we had a hard time finding our own comments. We have therefore decided to highlight our comments to make it easy for our readers to sieve through and check if their issues have been addressed. An important point to note is that some of the answers we posted may have been superseded by events and you are still free to post the questions again.

Modify Template

Since this article is about setting a style for the comments that appear after a post, we assume that you have configured your Blog to display the comments. Check Settings -> Comments and select “Show” Comments.

Before you begin to do anything, remember to backup your template. Go to Template -> Edit HTML. Click the “Download Full Template” link to save a copy of your template.

Author Comments - Different Styles

Click the check-box next to “Expand Widget Templates”.

Press Ctrl+F and search for the word “comments-block”. You should come to these lines. Insert the code (shown in red):-

<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>
<data:commentPostedByMsg/>
</dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='blog-author-comment'>
<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>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>


Comment Styles

After you have inserted the above code, scroll upwards in the template and Ctrl+F to search for the word “comment-body”. In the Minima template, you should have this code:-

#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}


According to our Poll, the second most commonly used template is the Rounders template. In Rounders, this is what you will find:-

.comment-body {
margin:0 0 1.25em;
padding:0 0 0 20px;
}
.comment-body p {
margin:0 0 .5em;
}


In other templates, you should see “comment-body” classes similar to the above. This is the current style for the display of all comments after the posts. To have a different comment style for the author, copy what you have in your template, paste and rename the class. For example, in the Minima template, we shall add the code (shown in red):-

#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.blog-author-comment {
margin:.25em 0 0;
}
.blog-author-comment p {
margin:0 0 .75em;
padding:5px 10px;
border:1px dotted #254117;
background:#C3FDB8;
}


You can name the new class anything you want by changing the “.blog-author-comment” to something else. (Don't omit the full-stop in front.) Just remember to rename that bit of code discussed in our earlier section. In our example, we have used the same margin settings but added a padding (space around the text) of 5px at the top and bottom, and 10px on the left and right. We introduced a thin border surrounding the text and added a background color. For more color codes you can refer to our Color Code Chart. The author's comments block will look like this:-

Author Comments - Different Styles

If you are using the Rounders template, follow the same steps as above, copy the “comment-body” styles and add the new classes. For example, the code can look like this:-

.comment-body {
margin:0 0 1.25em;
padding:0 0 0 20px;
}
.comment-body p {
margin:0 0 .5em;
}
.blog-author-comment {
margin:0 0 1.25em;
padding:0 0 0 20px;
}
.blog-author-comment p {
margin:0 0 .5em;
padding:0 0 0 20px;
color:#F6358A;
font-style: italic;
}


Did you notice that we have not changed the margins and padding? The author's comments will be different though as there is now a text color and the font-style is in italics. This is what you will see:-

Author Comments - Different Styles

If you are using other templates, do the same by copying the current “comment-body” styles and inserting the new classes and new styles. Experiment with the different style options and colors. If you need more ideas, you can refer to the list of properties in our article Links - Hover and Rollover Effects.

You can even insert a background image to the author's comments and change the font to a larger font or a different font typeface. The code will look like this:-

.blog-author-comment p {
margin:0 0 .75em;
padding:5px 10px;
font-size:120%
font-family:courier;
background: url("URL OF IMAGE");
}


Try out different blog author comment styles and settle on the one that best suits you. Refresh the blog every time you make the change. You will notice that there is a “Post a Comment” link at the Comment footer. Should you want to rename it and change the words, read our short guide on Change the Post a Comment Link.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

45 comments:

Yonga said...

Wow, this is really great! I just checked on of your previous posts that has a lot of comments and read only your answers. I immediately found something that was useful.
Very good that you implemented this function here.
Since almost nobody reads my blog (let alone comment on it) I won't really need it myself.. :-)
Cheers,
Yonga

Peter said...

Congradulations on having 300,000 hits to your site. That's fantastic considering it has only been 7 months. Just goes to show hard work and posting great tips does pay off in the end. I will be back! Regards Peter

The Beading Gem said...

Congratulations! Your resources as well as your approachability are the keys to your success. Keep it up.

Tuki said...

Thank you for this useful tutorial!
I tried to follow your directions but something doesn't work.. please, can you help me?

Bone MD said...

Your site is really great and helpful, especially for us newbies. Finding this blog is like finding a gem out of the confusion (of tweaking blogger)...
I need help though, im using a rounders template for one of my blog, The Orthopedic Logbook, and the template is so different and the steps you gave us here seem to be not working. Any great suggestion? Thanks

bizwhiz said...

Hi Bone MD

Did you - Click the check-box next to “Expand Widget Templates”?

If you have done that, you should be able to find the relevant codes in the template.

Eann, Daddy & Mummy said...

This is great! Since my blog is in Mandarin, my post title doesn't shows as what it is. Can I just show the commentator name instead of both commentator and post title.
Please let me know which code to change.

Thanks!

Danie said...

Terrific website! I made an attempt creating a custom template but ti didn't work out. Instead, I've been having a ball changing little things here and there. I seem to be having a problem with this particular hack. I've expanded the widget templates but the "comment" codes are different. I've tried inserting, testing, deleting, re-inserting the code but haven't any luck. It's time to turn to the pro. If I were to email you a copy of that little comment section. Would you be able to tell me where to insert the second lot of code?

Kind regards,

Danie

Curious said...

Am sorry if this sounds stupid but where should I find the "expand widgets templates"?

something seems wrong.. I still see it the old way! thx

Curious said...

Btw.. your blog has been my ultimate tutor with blogger templates... >:D< thank u so much guys!

bizwhiz said...

Hi Curious

You can see a screen capture of the "Expand Widget Templates" checkbox in our Add Digg Button article.

bizwhiz said...

Hi Danie

How different are the codes? Do you see id='comments-block'? Have you previously amended, deleted or modified this part of the template? If it is difficult to locate, do a Ctrl+F to search for the code.

Curious said...

Finally figured out the comment style ...thanks loads...

Will I be able to add these coloured boxes for general comments too? In that case what do i need to do?

bizwhiz said...

Hi Curious

General Comments, as in comments by any other reader? If you are using Minima template, add the styles under:-

#comments-block .comment-body {

#comments-block .comment-body p {

pearlie said...

Hi! This will be a great site for me as I slowly try to make the switch over.

For a start, how do I get the comments footer to show the names of the people who commented. Is there a way? Like in my current classic template:

5 comments from: aaa, bbb, ccc, ddd, eee

Can it be done?
Many thanks!

bizwhiz said...

Hi pearlie

Since you already have it in your template, the answer as to whether it can be done has to be a yes. We'll probably try it out some day.

pearlie said...

lol ... I must be asking the wrong question then. I will now have to pay a visit often enough to catch it when you've done it.
Thanks :)

bizwhiz said...

Hi Eann, Daddy & Mummy

If you have noticed, only the comment authors' names are shown here and not the post titles. Maybe your Mandarin blog is different, but I doubt it. In any event, we don't have a blog in that language to try that out.

steups said...

IS IT POSSIBLE TO HAVE A DIFFERENT COLOR FOR EACH AUTHOR ON A MULTIPLE AUTHOR BLOG?

bizwhiz said...

Hi steups

If we find it possible, we'll update the article.

THXjay said...

I,ve used this fantastic blog to customize my own.

I've added many little additions but this background color for the comments section has beat me!

I've copied EXACTLY everything in red very carefully but nothing changes at all?

First I changed the bottom code in the expanded widgets, then the earlier code in comments body but I can't get it to do ANYTHING, it doesn't even "spoil" the original layout?

Am I missing something simple here or is there a problem in the code?

Thanks

Jason

bizwhiz said...

Hi THXjay

If you see a different background color for our comments, it clearly means that the code works. And we are using a Minima template like yours. Copy and paste the code in red.

THXjay said...

BizWhiz,

I'm not having any luck at all with changing the background of comments :(

I've tried this about 20 times :(

Where you say "you should see this"

#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}

I have this extra section in between

#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}

Is this correct, I didn't put it there, am I understanding the instructions correctly?

I simply cut & paste what you have in red under the line ending with .75em;

Any advice would be really appreciated, it's driving me crazy.

Jason

Matt said...

Hey Bizwhiz, first I want to apologize for posting this comment here as I'm not completey sure where to post this question. It is related to comments though. Basically, in my blog, I did a lot of tweaks to the template, most of which I found on here. My problem is, I've enabled the "comments" button when you go to your blogger layout, and click on edit "blog posts" page element. But once I publish, the comments link doesn't show up at the bottom of each post. I just can't figure out what the problem is. Did I maybe mess up some of the template code? Here's my blog: http://latinlobo.blogspot.com
As you can see, it's a video game blog, so having the comments link show is very important to me. Anyway bizwhiz, I appreciate all the work you've done, and congrats on your traffic! Responding to this comment is not necessary, but if you do, again, thanks a bunch man. Absolutely love this site! :)

Michael5000 said...

Others might have had the same problem as me.... I was frustrated that comments were not altered in the comment pop-up window or comment page. It took me a loooong time to realize that this code only alters author comments when comments are displayed after an individual article. Hope this helps.

Lila said...

Hi,
This is really helpful and great blog. I have done so many changes reading your blog and also will be reading in future.I have one problem with my blog and hope for your help.

I am unable to stay all the time on the internet and see who will comment on my blog. I want to reply some comment immediately below the one rather than many others. I want to change the html. Please, help me if you know.I appreciate your answer.
My blog is http://positivensuccess.blogspot.com

Thanks

Joel said...

I too have the same problem as Thxjay! It looks like the color is prominent only when the comments are viewed along with the post. Your comment appears similar to the others in the comment page.

Maybe it has to do with the openID commenting, or I'll have to change the color of the padding

twinklemom said...

I would love to do this but was wondering...as with the post a comment, is there a way I can tweak this on the "classic" template?

Seasons said...

dl id='comments-block'
I cannot find this code in my blog :( could you please help me with that.

-Seasons
http://seasonsinmusic.blogspot.com

g said...

hey bizwhiz !how are yu!

wen i click on Expand Widget Templates i cnt find the following code in my template..I m using SCRIBE TEMPlate...

#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}


What shud i do now ??? Can yu Plz help me !!

putra banua said...

Thank you very much for your nice articles. I have a little problem. Could you explain to me, how to remove or change blogger author icon/image ? I have tried and nothing happen. Please, I hope it so much.

Melissa said...

This is a great tutorial. Thank you for posting it!

HOWEVER...

There's a problem with it. (But I fixed it :) )

The code you've written will compare the NAME of the poster with the NAME of the person leaving the comments. If they have the same name (like "Melissa") the comments will be highlighted, even if the "Melissa" leaving the comment isn't the "Melissa" that wrote the post. It could just be a visitor named Melissa.

A better (but not foolproof) workaround that I wrote today is to substitute this line of code:

<b:if cond='data:comment.author == data:post.author'>

with this line of code:
<b:if cond='data:comment.authorUrl == &quot;INSERT THE URL FOR YOUR BLOGGER PROFILE HERE&quot;'>

Again this isn't 100% foolproof because someone could still input your blogger profile url as their own when leaving a comment, but that's far less likely to happen than someone having the same name as the author (unless they have a cool name like you ;) )

For multiple blog authors, you can have multiple "if" statements, each checking the data:comment.authorUrl against a different blogger profile URL. Each "if" statement could correlate to a different class style (one for each author).

Now... Having said all that:

I'd love for there to be a way to pass a variable into that widget instead of having to hard-code the profile URL into the widget itself. Do you know any way to do this?

Jean Chia aka Ms.Yummy~licious said...

hi! i need yr help. i did everyhting u said above, but my comments remain the same. Where did i go wrong?

Daniel R Cox said...

I tried the hack in the Fastway 2 2.0 by Antbag for WordPress. However, I could not find the comment-body reference in the comment or single post template. (I got a bit lost on this). Is the hack pretty universal or am I just missing something?

Alyssa said...

This is great! I added a third column last night thanks to you.

Now I am working on this comment function.

Where do I stick the code in my "Thisaway" template? The code looks different.

Suman Subramonian said...

I am using K2 template. I can't find 'comments-block' in my template. I searched the whole template for it but i can't find it. What should i do?

lareine said...

first, i'd like to thank you for making this very helpful and informative blog... i use it whenever i have questions regarding layout/html codes...

however i'm having the same problem as thxjay... i did exactly everything written in red, but still i didn't see any change in my comment sections (i even "copy and paste" the code you gave in case i made a mistake in copying it)... can you give me any idea?... i would really appreciate it... thanks in advance and more power to you!

One Guru said...

Hey,
I did as the instruction. But it's not working :(

any suggestions plz...

blog address is --> http://orkut-guide.blogspot.com

JoVie said...

Oopz!!..I've translated this this article in "Indonesian language",

that's my link has added here ( Komentar Pemilik Blog Beda Style)

thanks for your tips...

JoVie said...

I never think that I'm the first.. who was translated in "Indonesian language" this useful tutorial...

Thank U very Much

JoVie said...

It's Work..

Hi..I've translated to indonesian Language..

Thank's

M.Mustafa Ahmedzai said...

hi bizwhiz,

My blog is now worth visiting just because of you, thks bro. But this method of highlighting authors comment isn't working here...whats wrong..I follwed each and every step..I use Rounders 3..plz help. This is how my code looks
.comment-body {
margin:0 0 1.25em;
padding-top:0;
padding-$endSide:0;
padding-bottom:0;
padding-$startSide:20px;
}
.comment-body p {
margin:0 0 .5em;
}



This is how I altered it,
.comment-body {
margin:0 0 1.25em;
padding-top:0;
padding-$endSide:0;
padding-bottom:0;
padding-$startSide:20px;
}
.comment-body p {
margin:0 0 .5em;
}
.TECfun-author-comment {
margin:0 0 1.25em;
padding-top:0;
padding-$endSide:0;
padding-bottom:0;
padding-$startSide:20px;
}
.TECfun-author-comment p {
margin:0 0 .5em;
padding-top:0;
padding-$endSide:0;
padding-bottom:0;
padding-$startSide:20px;
font-size:120%
font-family:courier;
color:#F6358A;
font-style: italic;
}

Plz create the correct code for my case. I will love to copy/past it. :)


TECfun, A blog of 18 O level Classmates

Plz visit my blog if you have time.

Shiloah Baker said...

Thank you for your wonderful site!

I am trying to do this code in the lefty stretch minima and its not doing anything. I'm kind of confused because I have a "comments-block .comment-author" above the comments block. Should I use that? And the two comments blocks are separated by a "comments-block .comment-footer"

Thank you again!

Sid said...

I have to say... Your blog with all the various tips are incredible. Yes, I know there are many out there with the same tips, but for myself I find it almost like "Blogging Tips for Dummies" Me being the dummy.

Thanks for a great site!

HIDOuLIKEMYDISPLAYNAME said...

This is prolly irrevelant to this post and i already asked for this on your chat thing but anyway uhh...how I can highlight the words that people search for in my search box at the top of my blogsite.I was wondering if you know how I can do that and send the codes to only let the word be highlighted when people search in the search box on my site and not from google or anything else.Anyway man, many thanks if you are able to answer my question...take care :)