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:

Wholesale crystals said...

Is their any flash version that can be integrate with blog

aislinn said...

i must thank you for the efforts you've put in penning this blog. excellent blog post .

mysql services said...

Awesome post

click here said...

Nice post

Roger M. Lloyd said...

Your post are wonderful. I like your post very much. Thanks for sharing a nice post.
clipping path

bantal silikon said...

andthis is good post...

i like this...

please can you visit here..

tengs very much...

Naat said...

Hi, I do think this is an excellent blog. I stumbledupon it ;) I will come back yet again since I book marked it. Money and freedom is the best way to change, may you be rich and continue to guide others.

Jeen said...

Thank you for the auspicious writeup. It in fact was a amusement account it. Look advanced to more added agreeable from you! By the way, how could we communicate? Discount Uggs

wholesale costumes said...

Looking for a Wholesale new costume for 2014? Something that isn't a re-tread and hasn't been around for years? Well, Costumesroad has hundreds of brand new costumes just for this year in every category you could want, every size from infant to adult, and for men, women, and children! There are too many costumes to possibly list all of them, or even most of them, but here is a general guide as to what the new movies, shows, internet memes, and themes you can find.
Wholesale Halloween Costumes
Wholesale Sexy Costumes
Bulk Costumes
Wholesale Costumes China
Fancy Dress Manufacturers
Costumes Manufacturers
Costumes Factory
Wholesale Fancy Dress
Halloween Costumes
Sexy Costumes
Costumes China Suppliers
China Suppliers

Bunty Ramawat said...
This comment has been removed by the author.
Bunty Ramawat said...
This comment has been removed by the author.
Bunty Ramawat said...

hey good work man!!!

Der Vögele-Shoes Online Shop bietet Ihnen für jeden Anlass den passenden Schuh. Mit wenigen Klicks finden Sie hochwertige Trekking-Sandalen für ausgiebige Wandertouren, wasserdichte Stiefel für Wind und Wetter, komfortable Ballerina für den nächsten Städtetrip und vieles mehr.Sportschuhe. Doch eine grosse Auswahl ist bei Vögele-Shoes noch längst nicht alles: Bei uns können Sie sicher, einfach und rund um die Uhr Ihr Wunschmodell bestellen.

Thanks a lot for sharing such a wonderful post, it is a very nice site i really enjoyed to visit this site,

vijay kumar said...

Center Mass Media, a Denver Metro based Marketing Team. Contact us now at 720.336.9266 to discuss your next project!


Denver SEO Denver website design Denver marketing agency Denver branding company
CENTER MASS MEDIA Center Mass Media | A Denver Metro Marketing Team

andrea chiu said...

There are times that we encounter fear and disappointments in life yet we still manage to stand up straight and face it rather that being silent. That was a very good example of being a brave person. Well, I would like to thank you for sharing a very good article it is very much appreciated, good job! You can visit my site too if you want. Have a great day!

Playkix Games said... is a great place to play the best free online PlayKix, juegos PlayKix, jogos PlayKix, jeux de PlayKix from the top game developers all over the world. Play free online at

Games Online said...

Doraemon Games : Play the best Doraemon Games online free for everyone! We update Nobita games, Doraemon Dress Up games, Doraemon Fisshing games, all Doraemon games online. Go now

Cindy Dy said...

You are an awesome blogger. This is one of the best blog I had visited so far. Hope to read more post from you in the future. Keep it up. God bless.


Phim Hoạt Hình 3D TuBe said...

ozov games
Jao Games is a free online cartoon flash games site where you can find games from all your favorite cartoons such as Ben10, Dora, Tom and Jerry, Spongebob and many more.

happy wheels said...

A great possibility for me and it was a superb knowledge to view this site. Very difficult to uncover these beneficial web page or web site. I have many devices and achieving proper picture of these worked well and energy continues to be seeing about this weblog. Often my own intend to make my personal site as well as my own enjoyment is growing due to this page. I we do hope you may well be more effective.
happy wheels| cool math games| 8 ball pool| sudoku| yoob| friv| monster high
tetris| shooting games| barbie games| friv4school|

adi india said...

nice articles. visit my site too, check here Automotive Repair Manual Download

heru said...

thanks for sharing , nice
2016 Specs and Price

Live Streaming said...

Thanks for sharing this admin.
I hope it will be more helpful for others also.

PRDP Box Office Collection

Rick Guerio said...

happy wheels game
happy wheels

Thanks dear!!

thị hậu nguyễn said...

Hello my family member! I want to say that this article is awesome, nice written and come with approximately all significant infos. I would like to see more posts like this .
plants vs zombies
happy wheels
car games

Badan Singh said...

Technic desk Publish Blogging tips, Seo tips, Adsense tips, Computer technique. If you need those tips or other's information then visit technic desk. ​Technic

Badan Singh said...

escorts in delhi This is a website for all delhi escorts for pleasure and fun for time pass getting a girlfriend for sometime etc etc... this website provides all services in all delhi escorts in delhi escort in delhi and other areas like gurgoan faridabad noida etc etc...

Badan Singh said...

Toronto Russian Escorts Toronto Escorts Agency Euro Dolls Escorts. Premier Toronto Russian Escort Service.

matrimonial website said...

thank you sir! your post helps me a lot to olve my thanks again with the hope of more posts.
Matrimonial Website

Badan Singh said...

ייעוצים לעסקים ייעוץ עיסקי, ייעוץ עסקי, יעוץ עיסקי , יעוץ עסקי .EXPAND הוקמה כחברה ליעוץ עסקי וארגוני במטרה לתת כלים ניהוליים יישומיים למנהלים ובעלי עסקים קטנים ובינוניים.

lân Mai said...

I just want to say : why you do not click to play
puzzle games | mario games | brain games | tetris | happy wheels | agario | super mario

Emily Trần said...

This article is very interesting. Thank you for sharing it with everyone. I think that your blog will be much loved and they will visit it often. descargar facebook gratis , baixar whatsapp gratis , download whatsapp messenger , baixar mobogenie gratis , baixar mobogenie gratis

papas games said...

I wanted to thank you for this excellent read!! I definitely loved every little bit of it.Cheers for the info!!!! & This is the perfect blog for anyone who wants to know about this topic. I like play games Piano Tiles 2 game online, Score Hero game, Dream League Soccer, b612 and descargar b612 gratis. How about you?

Trần Linh said...

Thank you very much. I'm really impressed with this article, it is very professional. facebook movel , whatsapp gratis , click.jogos