jMar"s Blog DevSmash Developer Portal

Wednesday, February 27, 2008

Blogger Trick: Style Author Comments Differently with jQuery

No doubt you've encountered a blog at one time and noticed the custom styling applied to comments left by the author. It certainly adds a nice touch - and I wanted to be able to do the same here on Blogger. My first step towards finding a solution was to examine the comment markup generated by blogger. Unfortunately, however, it seems that Blogger doesn't indicate author comments in any way that can be accessed through a CSS rule. Well, I'm not that easily deterred, and eventually I came up with the following approach.

Before I explain how to implement this solution, let me briefly explain how it works. If you have ever looked inside your template's html, you have likely noticed some custom tags being used. In our case, we're concerned with the data tag. If this already sounds unfamiliar to you, I would advice you look at this page on using the data tag.

The particular piece of data that we want to access is the data.userUrl member. This member is only made available within the Profile widget, which unfortunately means that if you have disabled the profile on your blog, you're out of luck. This member is also not available if you have a team blog (sorry). For the rest of you bloggers (which is still the vast majority of you) this solution will work just great.

So now, with the preliminaries out of the way, we're going to tell the script to loop through all of the comments on the page. If the member link on the current comment matches the member link in the profile, then it must be an author comment. The script will then apply an additional class to the comment, allowing you to style it separately. All clear?

Step 1: Import the jQuery Library

In order for this script to work, you will have to import the jQuery library. Since jQuery let's you directly link to the source, this step is quite trivial. From your blog's dashboard, you will want to go to the layout tab, and then click "Edit HTML". Search for the <head> tag, and insert the following line directly below it:

<script src='' type='text/javascript'/>

Click "Save Template". Leave this page open because we'll be needing it in the following steps.

Step 2: Insert the Script

Now click the check box that says "Expand Widget Templates". Since the data.userUrl member is only available within the Profile widget, that is where we need to insert the script.

If are the only author of your blog, do this:

Search for the following tag:

<b:widget id='Profile1' locked='false' title='xxx' type='Profile'>.

Inside of this tag you will find the following line:

<b:else/> <!-- normal blog profile -->

Directly below this line, insert the following script:

<script type='text/javascript'>
$().ready(function() {
 $('dl#comments-block dt a').each(function(i) {
  if($(this).attr('href') == '<data:userUrl/>') {

If you have co-authors on your blog, do this:

Search for the following tag:

<b:widget id='Profile1' locked='false' title='xxx' type='Profile'>.

Inside this tag, you will find the following tag:

<b:if cond='data:team == "true"'>.

Immediately beneath this tag, insert the following code:

<script type="text/javascript">
 var author_urls = new Array();

Next, find the following line: <b:loop values='data:authors' var='i'>

Immediately below this line, insert the following code:

<script type="text/javascript">
 author_urls[author_urls.length] = '<data:i.userUrl/>';

Next, insert the following code right below the closing ul tag.

<script type='text/javascript'>
$().ready(function() {
 var urlsReg = new RegExp(author_urls.join("|"));
 $('dl#comments-block dt a').each(function(i) {
  if(urlsReg.test($(this).attr('href'))) {

That takes care of all the JavaScript parts. Now all that's left to do is to style it.

Step 3: Update your CSS

If you look at the markup that Blogger generates, you will notice that each comment is made up of a dt tag followed by two dd tags. At the time of writing this, I am using the following additional CSS:

dl#comments-block {
  background-image: none;
  background-color: #EDE5BE;
  margin-bottom: 0px;
  padding: 6px 0 6px 10px;
  border: 1px solid #ccc;
  border-bottom: 1px solid #FFF7CF;

dl#comments-block {
  color: #593622;
  background-color: #EDE5BE;
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 10px;
  border: 1px solid#ccc;
  border-top: 1px solid #CBC4AC;

dl#comments-block {
  font-size: .8em;
  background-color: #CBC39C;
  padding: 3px;
  margin-top: 0px;
  float: right;
  border: 1px solid #ccc;
  border-top: none;

To add these styles, simply paste them right above the </style> tag.

You're Done!

That's it! Just hit "Save Template" and view your blog. To see the script in action, view my comment below this post.


Jeremy Martin said...

Hey everyone! This is an author comment. If this worked correctly, it should look different than all the other ones.

Anonymous said...

This is an example of a non-author comment.

Barbara said...

Thank you for the instructions! I just wanted a simple way to distinguish my comments and this worked great

Boffill said...

b:widget id='Profile1' locked='false' title='xxx' type='Profile'.

I can't find that line.. it's not working on me. i am using tictac templates

Jeremy Martin said...

I just switched my test blog over to Tictac and was able to locate the line. Please note that you should not search for the entire string exactly as I provided, as there may be minor variations from template to template. Also, the title will almost certainly not be 'xxx' in your template (unless you're one of THOSE sites...). Oh, naughty.

For example, in my test blog, the title is actually "About Me".

To help you troubleshoot, I would first insure that you have the profile widget enabled (go to Layout > Page Elements).

Secondly, make sure you checked "Expand Widget Templates".

And finally, try just using your browser's search function to look for "profile" and increment through the results until you find something that looks correct.

Hope that helps!

Boffill said...

huwaw.. that was fast.. so the only thing that i'm going to do is to enable my profile widget first? so that i can find that profile1 line? :) thank you sir... :) i'll try it out and post here for developments!

Jeremy Martin said...

That sounds right. It's unfortunate that the profile widget must be enabled, but that's the only widget that blogger lets you access data:userUrl from.

Boffill said...

now it's doing great on my blog.. hmm.. the only problem is the color combination.. the background of the author's comment is yellow and my blog's theme is like black and white. :D

Jeremy Martin said...

Somewhere the design gods have been offended... :p

Boffill said...

it's ok.. i will just open my profile.. :D it doesn't matter anyways.. hehe.. thanks for this trick sir! :)

try to visit my blog..


Nitos said...

Done with my site..
but I have co-authors.. how can I make them look similar to that..??
I've changed my color! but I want the co-authors as well.. thanks!

Jeremy Martin said...

If you look inside your template (with widgets expanded), you should be able to find a loop that goes through all the values in data:authors. I'm sure there's a more elegant/efficient solution, but you should be able to just put the script inside that loop, and then replace "data:userUrl" in the script with "data:i.userUrl".

Nitos said...

but it didnt solved the problem

Jeremy Martin said...

Darn... on Monday I'll try and make some time to set my test account up for co-authors and then I can find something that will definitely work.

Nitos said...

thanks man you ROCK!

Jeremy Martin said...

Please check out the post again. I included a special section for co-authored blogs. Let me know if it works for you!

Is said...

Hi Jeremy,

Here, I cant used the html tags to show you what exactly how the script works for the co-author comment but it's much easier as you described above. Just add this line into post-body-entry content:-

b:if cond=' == "you need to specify the co-author's name"'

and few more lines to accomplish.

elPadawan said...

Hmmm... I actually implemented this without using javascript, only modifying the blogger template and using "blogger code". Create a style for the author comment, but in the loop displaying the comments, conditionnally apply the "author-comment" CSS class to the comment.

It was pretty complex to find out, though, and hasn't been thought out for multiple authors (though it might actually be easier).

Perhaps I should blog about it and explain how I did it Feel free to contact me if you want more details (Pasting HTML code in a comment is a real pain.).

Jeremy Martin said...

That would be a very useful topic to post on. My first attempt at this was to simply use the "blogger code", but I couldn't find any data variables that were available in the comment section that revealed whether it was the author or not. What logic did you use to determine if it was an author comment?

elPadawan said...

when displaying a comment, you have two things that are helpful. First, the "icon-comment", second the comment's author url.

The only way for you to make sure you are the author is if the author URL of the comment is your blogger profile URL *AND* the icon-comment is "blogger". If you don't use the "icon" criterion on top of the URL, anyone can spoof your identity using the "Name/URL" option when posting a comment.

My solution required some hardcoding (for the profile URL), though :(.

მარი said...

doesnt work on my blog.
neither on me nor on my co-authors :(

Jeremy Martin said...

Hmmm... which one of your blogs did you try and use it on? I see that you have several. I'll take a peek and see if I can figure out the problem....

jeremy martin said...


So this would Spoof the Author, and give me the special formatting?

elPadawan said...

I wouldn't say it would Spoof the Author. It would recognize the Author, without any possibility of Spoofing. Well, if someone *really* spoofs your blogger account, there's nothing you can do, but that's another issue ;).

What I meant by "spoofing" is that it avoids the issue of a spoofing attempt using the "Name/URL" option and providing your blogger profile URL

Jeremy Martin said...

@Elpadawan, evil imposter
That last comment isn't me!! lol... my system is broken! I'd take the time to fool proof it, but I plan on porting this whole thing over to Drupal in the not too distant future, so I can live with it for now.

elPadawan said...

@jeremy martin

Hmm... that's where the use of the "icon-comment-type" check comes in handy ;)

Jeremy Martin said...

*ahem* ... indeed...

Soulberry said...

I was looking for something like this. Thanks, but I have a peculiar problem - the customization as suggested by you, works well in Linux/Firefox (any version, 1 to 3) but not in XP SP2/IE7 or XP SP2/Firefox 3.0. I checked out the linux/firefox combo at a friend's place for that's his operational system.

My blog's URL is here for your perusal to check-see if I have done things right.

Thanks again, and I wonder why it is so in different operating systems?

Simon SC said...

Works for me. Although I wanted to remove the ugly profile widget immediately so I wrote the following simple one-liner:

#Profile1{ display:none }

You should include that you have to have the "Share this profile" checkbox ticked - as it didn't originally work for me.

Sarachan said...

I used your script on my blog and it was fantastic! But I've just added a co-author, modified the script and... it doesn't work :(
Could you help me please?

Sarachan said...

There's no error in your script, I've found a conflict with the Prototype library I use in my blog. Here the solution:
Thanks a lot!

terminals-blocks said...

Secondly, make sure you checked "Expand Widget Templates".

MissandMisterKinkY said...
This comment has been removed by the author.
ioffersearch said...

That would be a very useful topic to post on. My first attempt at this was to simply use the "blogger code", but I couldn't find any data variables that were available in the comment section that revealed whether it was the author or not. What logic did you use to determine if it was an author comment? Blogs - Just another weblog

tidymom said...

I have this feature on my new blog makeover and love it!

I was wondering if you can tell me how to put a box around each comment left by my readers? they are all running together - it's easy to find mine by the different color, but I can't find a tutorial that shows you how to separate the reader comments


محمد طارق راحیل said...

thanks so much....

Вячеслав said...

Thank you!!! This is good!

Andreea said...

Thanks for the tip, worked just fine. One comment though: I don't know why, but the footer had a problem and overlapped with the following comment. I solved it by copying the normal comment footer settings and adding the background color.

william said...

this was brilliant friend, very clever THANK YOU :)

Utah Mommy said...

So, why oh why don't I have a style tag??? Neither one, an "open" or a "close" tag.

I'm using the Minima Stretch template...

I was able to do everything up until the very last step.

Can I just put the last step inside my own style tags? Will I need something else? Where would I put it?


[Off topic, but my word verification was INDBUF and it made me laugh: In The Buff]

Anonymous said...


Anonymous said...

hey good work man!!!

Anonymous said...

Hey good work man

Anonymous said...

This is an example

Anonymous said...

Anonymous said...

blablabla test

çiçekçi said...

Hello sir. Ver thanks but it didnt solved the problem

Anonymous said...


Ishan .... said...

One of the main feature of using third party comment system is Reply option to comments which blogger lack.
I recently saw this tutorial on How to add reply option to blogger comments and thought to share with you

TanjaJ. said...

I want to say to jeremy martins blog...

thank a lot for that "how to insert a comment function" template.
it works."

all the best from germany
you made my day! =)

Harish said...

The only defect of this Hack i Found

Thanks for your hack

bb said...

this looks just like i have been looking for... hope it works.

Pojie said...

why not use this? what a different?

#MK said...

Pojie, they are basically the same thing.
But this is a really good option for those who don't want to modify the blog default comment template, and in case they just want to remove it they can simply remove the jQuery instruction to insert the classes to author comments.
Much simpler than doing the otherwise, removing it in the template itself.

You choose which one fits you best, if you don't mind editing your template then do the other way, otherwise, use this.

Such a simple script, yet, so useful!
Merci Jeremy.

vishal said...

Hey your rss feed doesn't seem to work. Can you please have a look at it and fix it. I like to read your posts as you put them up because I really enjoy your content!

Agnostinia said...

the only problem I issued is since I use a custom template, I don't find the /style tag in my script. any other possibilities to put the css in else part other than above /style tag?

Anonymous said...

Hi Jeremy, nice comment design! One of the best and simplest I have seen so far! I use a Disqus one on my blog:
But I like your styling better. Do you think I can use some of your CSS code to re-design my custom CSS code for Disqus? That would be awesome. Can you help me? I'm not an expert in CSS. Thanks very much.
My email:

Rohit Pandey said...

Pleasant article. Think so new type of elements have incorporated into your article. Sitting tight for your next article.


Syaniezt Barbie said...

The Article is very interesting and I like it. Agen jual fiforlif Balikpapan , Harga Fiforlif di Balikpapan , Jual Fiforlif Murah di Balikpapan , Manfaat Fiforlif , Distributor Fiforlif di Balikpapan

Anonymous said...

I and my friends were reading the great helpful tips on the blog and so immediately developed a horrible feeling I had not thanked the website owner for those secrets. All of the people were definitely as a result very interested to study all of them and have really been having fun with these things. Many thanks for turning out to be well accommodating and for getting these kinds of tremendous subject areas millions of individuals are really desirous to learn about.
I hope I will see again..
Formula 1 live stream 2017
F1 live stream
Formula 1 live streaming 2017

Cleaning services said...

شركه مكافحه حشرات و رش مبيدات
الحشرات تسبب العديد من المشاكل الازعاج نحنو نسعى على حل هذه المشكله
مع شركة مكافحة حشرات بالرياض نقضى على الحشرات تماما من خلل المكافحه عن طريق الرش داخل البيت
وحقن الاماكن التى توجد بها الحشرات ؟
رش #المطابخ يتم بواسطة ( الإبر الألمانية ) و هي عبارة عن سائل جل يوضع في سفوح الأدراج و الأبواب و بلا رائحة
شركة مكافحة حشرات شرق الرياض
شركة مكافحة حشرات شمال الرياض
شركة مكافحة حشرات غرب الرياض
شركة مكافحة حشرات جنوب الرياض
فالمبيدات التى تعتمد عليها شركة رش مبيدات بالرياض لا تسبب أى روائح كريهه ؛فالهدف الأساسى من شركتنا هواعطاءنتائج مبهرة للعملاء ؛ فنحن نحرص على اعطاء الجودة والضمان والامان لخدماتنا شركة رش مبيدات حشرية
شركة رش مبيدات شمال الرياض
شركة رش مبيدات شرق الرياض
شركة رش مبيدات غرب الرياض
شركة رش مبيدات جنوب الرياض

Harry Smith said...

Cartoon HD is a very popular app as you know. we can watch animated videos, movies on your smartphone.
If you are a android user then you can easily download this app.
You can also use this app if you are a iOS user. For more details check the process of download Cartoon HD for Mac

Vinod Vinu said...

This will be the perfect blog for anyone who desires to discover about this topic and I feel pleasure to view your website. Thanks for sharing such an informative information in a gentle manner! Keep it up and all the best.

Case Study Solution said...

This was a great and interesting article to read. I have really enjoyed all of this very cool information

Case Studies Solutions said...

I’m really impressed with your article, such great & usefull knowledge you mentioned here

Electrical Project Help said...

Such a nice post, keep providing good resources.

Case Studies Solutions said...

This is really great work. Thank you for sharing such a useful information here in the blog.

Online Economics Homework Help said...

I loved the way you discuss the topic great work thanks for the share.

Electronics Homework Help said...

Well thanks for posting such an outstanding idea. I like this blog & I like the topic and thinking of making it right.

hari krishna said...

for posting such an outstanding idea. I like this blog & I like the topic and thinking of making it right.

April 27, 2017 at 5:00 AM

jennahoagland said...

Film streaming app for Android. If you want to keep showboxdownloadz can make your jump as well as delight in favored.

best movies download sites said...

Thank you very much for sharing post with all needed stuff.keep more updates like this

starfall said...

This is a wonderful post. I enjoyed the information lot. I will bookmark this page. Thanks for sharing this information.
abcya | brainpop | abcya 7

friv game said...

I enjoyed over read your blog post. Your blog have nice information, I got good ideas from this amazing blog. I am always searching like this type blog post. I hope I will see again
jogos friv 2
juegos kizi 8
juegos yepi 2
friv 5
juegos y8
juegos 5