Highlight Blog Owners/Authors Comments In BlogSpot Blogs


If you want to display your own comments, with a different background or text color or in any other customized way, then here's a simple hack for doing that.
After doing the coding work, all the comments made by you on your blog will get highlighted.

To do this;
Log in to Blogger, go to Layout -> Click on "Edit HTML" tab.
Then click on "Expand Template Widgets"

Now search for this line:
</head>

Immediately above this, add these lines:
<!--Blog-Owners-Comment-STARTS-->
<style>
.comment-body-author {
background: #F5EDE3; /* Background color*/
color: #000000; /* Text color*/
border-top:2px solid #002F66;border-bottom:1.2px dotted #002F66 ;border-left:1.2px dotted #002F66;border-right:2px solid #002F66;
line-height: 2.4em;
margin:0;
padding:0 0 0 20px; /* Posotion*/
}
</style>
<!--Blog-Owners-Comments-STOPS-->
The code in red are just comments, accordingly you can change the BLUE values. You can even use pictures as background images for your comments, for adding an image as background use this code:

background: url(http://DIRECT_LINK_OF_THE_IMAGE.jpg) ;


Border has two attributes one thickness ( in above example its 1.2 px u can change accordingly), another is border line ( in above example its solid u can change it to dotted accordingly). Line-hieght is width , increasing this can increase it width . Margin and padding define the position of comment withing comment box.

Now once this is done, see the code below:
<data:commentPostedByMsg/>
</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>
The code in RED is what you have to add.

Now save the template and tell everybody that you are the Admin of the blog :)

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

48 comments

Write comments
February 18, 2009 9:08 PM delete

This didn't work :( any suggestion on what I could have done wrong?

and is there a way to change how all the comments look instead of just the owners? The comments page is so ugly, lol.

Reply
avatar
February 19, 2009 2:36 AM delete

In your template, serarch for something similar to this:

/* ----- COMMENT ----- */
#comments {
margin: 0px 0px 0px 0px;
padding: 15px 20px 15px 20px;
text-align: left;
color: #4c4c4c;
font: $commentTextFont;
border: 1px solid #ccc;
background:#fff;

}

/* comment-header */
#comments h4 {
margin: 10px 0px 0px 0px;
padding: 3px 0px 3px 0px;
color: #1C4991;
font: $commentTitleFont;
}

.deleted-comment {
font-style:italic;
color:gray;
margin: 3px 0px 3px 0px;
}
..........
..........
..........


You can edit them to custmize your comments section !

Reply
avatar
March 07, 2009 5:24 PM delete

You only provided a way to change the body of the author's comments. What about a way to change the author's comment head?

Reply
avatar
March 17, 2009 11:01 AM delete

Hatur Thank Q U!
Banyak nge-Bantu nich..!!

Reply
avatar
April 25, 2009 11:09 AM delete

Thank you. This really helped me. Everything else that I found didn't work. After adjusting the colors, it's perfect. Again, thanks!!

Reply
avatar
May 27, 2009 4:17 AM delete

it doesn't work for me, i try to do what u say and nothing is working.


i also try ur hack to show comment autor image and it's not working!

i don't understand why ! i found nearly the same codes. driss chraibi

Reply
avatar
May 27, 2009 6:54 AM delete

As we have already discussed i think your comments section are quite modified....anyways comment-author is not working due to some changes at blogger.com and not due to any error in the hack.

Tell me what exactly is the problem you are facing in this hack.

Reply
avatar
May 27, 2009 1:32 PM delete

i made it!!! thanks for sharing!

Reply
avatar
May 31, 2009 6:38 PM delete

well, i don't have the same code so i placed the code in the wrong place, but i tried many times ~x( and it's fine now thank u

Reply
avatar
ELLA
July 04, 2009 12:36 PM delete

hi,

I made and now i can't add smiley to my comments????

But other visitors can, what can i do ?

Reply
avatar
July 04, 2009 1:06 PM delete

Give me your blog's address Ella, I know the solution but I have to check your code first !

Reply
avatar
September 12, 2009 10:26 AM delete

Hi Sai,
Thanks again for this hack tip. It's so great! :))

Reply
avatar
Wez
September 24, 2009 6:01 PM delete

It worked for me!! Thanks!

Reply
avatar
November 29, 2009 12:22 AM delete

This is what I've been looking for! Now my blog can finally become complete.

Tnx for this tip.

Reply
avatar
February 22, 2010 3:03 AM delete

I have inserted but some error shows up, can you please check my blog and lemme know.

Kattrine

Reply
avatar
February 22, 2010 8:52 AM delete

What's the url of the post where you have tried it?

Reply
avatar
March 01, 2010 11:41 AM delete

Thank you very much! It worked beautifully!

Reply
avatar
April 02, 2010 1:46 PM delete

thank you for this! very nice.

Reply
avatar
June 21, 2010 4:17 PM delete

सफलोऽयमपि प्रयासः।

Reply
avatar
Werk
July 03, 2010 8:39 AM delete

It worked... but it make my emoticons from comments not work (just my admin comments). How can I fix it? Hope you have a solution.

Reply
avatar
July 03, 2010 10:57 AM delete

Hi there,
In your smiley.js file, edit this:

'owner-Body'

to this:

'comment-body-author'

then upload it to mdn.fm and re-link it in your template.

Reply
avatar
August 29, 2010 3:10 AM delete

Sorry for digging up this old topic but I'm facing some problem with the code.

Whenever I comment, my comment seems to be repeating, one in the box and the other one outside it. How should I remove the one outside?

Reply
avatar
August 29, 2010 4:01 AM delete

Hi Johnson,

Send me your template from my contact page.

Reply
avatar
October 05, 2010 10:42 AM delete

Doesnt work for me:(( Any you help me pls...

Thanks
Roopa
www.puttiprapancha.blogspot.com

Reply
avatar
Katie
October 11, 2010 2:20 PM delete

I have a question to ask and I really hope you can help.
Is there a way to put the datestamp on the same line as the comment author like this one --> http://www.bloggerbuster.com/2007/08/translate-your-blog-using-google.html#comments , and
http://i56.tinypic.com/29embnb.png

I've searched and searched on google but I can't seem to find any tutorial for it. Thanks!

Reply
avatar
October 11, 2010 10:58 PM delete

To your .comment-sitemap add a float:right attribute.

That means, it should look like this:

.comment-timestamp {
float: right;
}


You may also have to adjust the margin and padding code, but I need your blog address for that.

Reply
avatar
October 12, 2010 11:04 AM delete This comment has been removed by the author.
avatar
Katie
October 12, 2010 11:13 AM delete

Thank you for replying back. The code works but it's a little wonky --> http://i1185.photobucket.com/albums/z342/octopusluck/Picture2.png

I put the code right below "#comments-block .comment-author". That is where I'm suppose to put it, right?

Reply
avatar
Anonymous
October 14, 2010 2:59 AM delete

Enjoy using your blog but some of your advertisers are causing my anti-virus to go crazy by having to stop all trojans that they are throwing up. I believe in advertisement but you should truly pick them carefully because advertisements want gain you any money whey everyone's afraid of visiting your site.

Reply
avatar
October 14, 2010 6:08 AM delete

Hi there,

Can you please re check it, I have recently removed a suspicious ad from my blog. And thanks for informing me about this issue :)

Reply
avatar
Katie
October 16, 2010 10:04 AM delete

Hello again. I've tried everything (margin, padding) but it still comes out like this http://img840.imageshack.us/img840/1404/picture3am.png . I'd be really grateful if you could help me out. Thank you :)

Reply
avatar
October 30, 2010 3:40 AM delete

thanks! work perfectly! Im soo editing the bground after this :)

Reply
avatar
October 30, 2010 9:10 AM delete

dude u didnt say we should put the code for custom background image

Reply
avatar
December 13, 2010 5:10 AM delete

itz not working on my blog..plz help....
http://nayabasera.blogspot.com/

Reply
avatar
February 19, 2011 1:08 AM delete

Hello,
thank you so much for this tricks.

Reply
avatar
March 14, 2011 2:04 PM delete

Pretty good tutorial.

It works for me but I can't match a good design for my template in http://yoyepunto.blogspot.com. Any help would be appreciated.

Thanks in advance and keep up the good work!

Reply
avatar
April 15, 2011 5:24 PM delete

Hi,

I hope you can help me. This isn't working in my blog. I can't seem to find similar codes to insert the codes in red. http://kristinabiog.blogspot.com

Thanks in advance :)

Reply
avatar
May 14, 2011 6:07 AM delete

It says the tag is not closed properly ... i copied the properly.. but... :(

Reply
avatar
August 01, 2011 1:58 PM delete

wow. super thanks to this. This is the fifth post that I tried working out with the highlighting. Only your codes worked for my site. :))

Reply
avatar
September 27, 2011 2:53 AM delete

this is great great great... thanks a lot a lot a lot...
this really worked...wow

SEO Company Montreal

Reply
avatar
November 18, 2011 2:42 PM delete

Thank You so much. Useful information. I already applied to my blog. How I can design other comments. How can add serial nos for each comments. My blog is Here.

Reply
avatar

Comments are moderated on this blog

Allowed HTML tags: <b>, <i> and <a>

Comment Like This! and Optimize your blog EmoticonEmoticon