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='http://code.jquery.com/jquery-latest.min.js' 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/>') {
   $(this).parent('dt').addClass('author-comment').next('dd.comment-body').addClass('author-comment').next('dd.comment-footer').addClass('author-comment');
  }
 });
});
</script>

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();
</script>

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/>';
</script>

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'))) {
   $(this).parent('dt').addClass('author-comment').next('dd.comment-body').addClass('author-comment').next('dd.comment-footer').addClass('author-comment');
  }
 });
});
</script>

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 dt.author-comment {
  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 dd.comment-body.author-comment {
  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 dd.comment-footer.author-comment {
  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.



66 comments:

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

@Boffill
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.. http://ficospeaks.blogspot.com

thanks!

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

@Nitos
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...

thanks..
but it didnt solved the problem

Jeremy Martin said...

@Nitos
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...

@Nitos
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='data:post.author == "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...

@elPadawan
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...

@elPadawan

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: http://matteogallinucci.blogspot.com/2008/01/conflicts-using-jquery-prototype-and.html
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?
Ioffersearch.com Blogs - Just another Ioffersearch.com 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

Thanks
~TidyMom

محمد طارق راحیل 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?

THANKS!


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

Anonymous said...

gfhgfjhfjhvn

Anonymous said...

hey good work man!!!

Anonymous said...

Hey good work man

Anonymous said...

This is an example

Anonymous said...

deepti.sajane@gmail.com

Anonymous said...

blablabla test

çiçekçi said...

Hello sir. Ver thanks but it didnt solved the problem

Anonymous said...

Test

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

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

http://www.bloggerbuster.com/2008/05/how-to-highlight-author-comments.html

#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: http://envimatix.com/blog.html
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: contact@envimatix.com
Arun

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 .

www.n8fan.net

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

http://bantalsilikon01.blogspot.com/
http://bantalsilikon01.blogdetik.com/bantal-silikon-bantal-silikon-murah-bantal-silikon-malang-bantal/
http://bantalkekabumurah.blogspot.com/
http://bumbupecel1.blogspot.com/
http://bantalaaa.blogspot.com/2014/04/bantal-silikon-bantal-silikon-murah.html
http://bantalsilikon1-23.blogspot.com/2014/04/bantal-silikon-bantal-silikon-murah.html
http://bantalgood.blogspot.com/2014/04/bantal-silikon-3-tahan-tahun.html
http://bantalsilikonmalang1.blogspot.com/2014/04/bantal-original-silikon-malang.html
http://bantalsilikonmurah.blogspot.com/2014/04/bantal-silikon-original-085-635-945-40.html

http://www.bantalsilikon01.blogspot.com/2014/04/bantal-silikon-original-merek-lutuye.html

http://marinirseo.blogspot.com/
http://marinirseo.blogspot.com/
http://marinirseo.blogspot.com/


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.
home
click
Wholesale Halloween Costumes
Wholesale Sexy Costumes
Bulk Costumes
bulk
Wholesale Costumes China
here
Fancy Dress Manufacturers
wholesale
Costumes Manufacturers
Costumes Factory
here
Wholesale Fancy Dress
Halloween Costumes
Sexy Costumes
site
Costumes China Suppliers
China Suppliers
costumesroad.com
costumesroad
there
this