Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Saturday, January 21, 2012

Highlight Author Comments in Blogger's New Threaded Comment System


Still psyched about Blogger's new threaded comment system? Not really? Well, here's something to boost your spirit. In the old system, I used to have a way to highlight author's comments - you know, so that my comments stand out from my readers' comments. Unfortunately, with the release of the new threaded comment system, that tutorial got obsolete. So I dug further, and came up with a way to do the same in the threaded system. As a bonus, this tweak automatically highlights non-threaded old author comments as well! This is a response to blog readers Blaine and magda.

Go to Dashboard --> Template --> Backup/Restore --> Download Full Template --> Close --> Edit HTML --> Proceed --> Find for </body> --> Paste the following code directly above </body>.
<script src='http://code.jquery.com/jquery-latest.js'/>
<!-- ss highlight author starts -->
<script>
$(function() {
function highlight(){
$('.user.blog-author,.ssyby').closest('.comment-block')
.css('border', 'dashed blue 1px')
.css('background','#F0A2A2 url("http://www.blogblog.com/1kt/transparent/white80.png")')
.css('padding', '10px');
}
$(document).bind('ready scroll click', highlight);
});
</script>
<!-- ss highlight author ends -->
The code in place:


You're basically done. If you want to personalize the highlight's design, see some of the options I've included below. If you have a specific design in mind, and you can't achieve it with the options I've given below, feel free to leave a comment and I'll let you know if and how it can be done.

Personalization:

BorderTo adjust your border, modify Line 7 in the code above:
.css('border', 'dashed blue 1px')
1) You can change the style of your border. I have used a dashed border. Other options are (simply replace 'dashed' with one of the following words): solid, dotted, dashed, groove, ridge, inset, outset

2) You can change the color to a different plain color. I've used blue in the code above. You can also use hex code for a specific color.

3) You can change the thickness of your border by adjusting the value 1px. If you want no border at all, you can set it to 0px.
BackgroundYou can either use a plain color or an image as your background. I've used a combination of both (white transparent image with light pink plain color).

For plain colors without any image, replace Line 8 in the code above with this:
.css('background','red')
If you want more choices of plain colors, use HEX code instead. I've used a HEX code in the code above. You can get the hex code for a given color from this useful site:
.css('background','#F0A2A2')
If you want to use only a background image, replace Line 8 in the code above with this (also replace IMAGEURLHERE with the URL of your image):
.css('background','url("IMAGEURLHERE")')
PaddingI've included a padding in my code because I think without a padding, the border is too close to my comments. You can set the padding's value to 0 to see what I mean.
Comment Font Color, Size and TypeTo adjust comment font color, size and type, refer to my previous tutorial.

Change Blogger Comment Font, Size and Color

188 comments:

  1. Brilliant !
    Thanks so much for doing this, the one thing I didn't like about the new system was losing my highlights.
    Genius as ever :)

    ReplyDelete
    Replies
    1. That was fast! You're welcome DCG, and thanks for the feedback.

      Happy experimenting...

      Delete
    2. That's something I was waiting to hear. Yay! :)

      Delete
  2. Yay! Will give it a try first thing tomorrow morning. Thank you so much! :)

    ReplyDelete
  3. Thanks so much for your awesome blog, it has helped me so many times!

    xx Nicole
    www.caninethespian.com

    ReplyDelete
  4. Check out my Blog??It is showing in Blockquote How do I remove.

    ReplyDelete
  5. Hello Yoboy I found one error.As you are Top contributer i am saying that comments are showing in form of Block quote.I found you have also same problem.Can You reply me.

    ReplyDelete
  6. I have found another problem in Threded comment that the comment form message will appear below the comment form

    ReplyDelete
  7. @Green: I'm not exactly sure what you mean, but I don't have any blockquote problem. And I don't see any blockqoute in your blog either. I see some in your posts, but not in your comments. Edit your post, and delete <blockquote> and </blockquote>. That should get rid of it.

    As for other problems, it'll be best if you could start a new discussion thread in the help forum here:
    Blogger Help Forum

    Cheers.

    ReplyDelete
    Replies
    1. Oh ! Yoboy
      Thanks For Replying

      You donot encountered a problem of blockquote because you have not styled it with css.

      But if you inspect Setting in the chrome hovering near the comment you may find blockquote instead of paragraph.

      Lets see this image.

      Image here

      If you had add the css styling like this:

      blockquote{styling code here}

      Then probably you may face problem.

      Can you reply soon.

      Lets go for another problem look at the comment form message

      The comment message add comment in below of the place where we write a comments.

      and message "If you have a question nothing ....."

      it's more than place where we write comment.

      I have disable threaded comment so you might have not seen it.I have not encountering the problem in post(By Blockquote)

      I have already summitted in Blogger Help forum this is the link.

      http://www.google.com/support/forum/p/blogger/thread?tid=63657df65ec398aa&hl=en

      Although this is related to blockquote i will shoot the question at there.

      Regard.
      Thanks to Your.
      Green Bajgain

      Delete
    2. Hello Yoboy

      Can i Recommend you something.

      As the comment is shown in only item pages.Can you enclose the those script with conditional tag. i.e making java script to appear only in post(item) Pages.

      But why??
      To reduce the size of javascript in home,label,archive pages.

      Bye!You are really a great contribute in BloggerLand

      Delete
    3. Hello Yobey! See its not working althogh i strictly followed your suggestion.

      Thats was the good idea to hide background using blockquote.But it is not working.

      What to do.

      Although the question is answered but no things happen to me.

      I think threaded comment is much more buggy as i expected.

      Can you give more suggestions here!

      Bye.

      You are awesome!i have only found you who want to help other selflessly.

      Regards
      Green Bajgain

      Delete
    4. Although I am new to Blogger.You had made it easy.

      I am financially weak i appreciate you very much that's why i have added you as friends Yoboy.

      Bye

      Delete
    5. Hey Green,

      Let's keep it in the forum.

      Cheers.

      Delete
    6. By the way, no, wrapping your script with conditional tag isn't gonna help your page load faster. In fact, it'll be slower. You script will get loaded anyhow, just that it won't integrated to the conditioned page. And in addition, you're gonna waste extra speed for checking that condition. Not a good idea.

      Delete
  8. how if i want to add hover effect to the background?

    ReplyDelete
    Replies
    1. Good question. There are two additional steps to it:

      1) First, attempt the tutorial above and make sure your comments are highlighted.
      2) Next, add this line directly above </body>

      <script>
      $('.user.blog-author,.ssyby').closest('.comment-block').hover(function() {
      $(this).addClass('commenthover');
      },
      function() {
      $(this).removeClass('commenthover');
      })
      </script>

      3) Finally, add this to your CSS via Template Designer - Advanced - Add CSS:

      .commenthover{
      background: yellow !important;
      }

      Change the color yellow to other color or image as you like. Cheers.

      Delete
    2. wow...thanks a lot for your kind reply!

      Delete
  9. Dear Yogaratnam N.
    Thanks! it works like a charm :)
    (but I'm not surprised)

    I have a question though -
    My blog is in Hebrew and we write from right to left, however my name is in English, so it appears on the left side of the line (and so do all other names which are in English)
    Is there anyway to change is so the name will appear on the right side?
    at the moment it appear like this
    "Winnie Jan 26, 2012 04:07 AM"

    I'd like it to be like this:
    "Jan 26, 2012 04:07 AM Winnie"

    but still keep it on the right side of the page as it is now (again, as we write from right to left)

    This is the address of my blog - winnish.blogspot.com

    Thanks in advance,
    Winnie

    ReplyDelete
    Replies
    1. Just call me Yoga.

      This is what I'm seeing now:
      http://i.imgur.com/2adsq.png

      Isn't this what you were going for? Have you gotten it fixed?

      Delete
    2. Hi Yoga :)

      It's not what I meant
      I'm referring to the line before each comment.
      http://i.imgur.com/Ou9CF.jpg
      you can see that when the name is in Hebrew it appears on the right side (as it should!) but my name appears on the left side and also the name of another follower as it is in English. I'd like them also to be on the right side - the beginning of the line (beginning for us) and not at the end.

      Thanks, Winnie

      Delete
    3. Right. I know a way. Add this to your css:

      .comments .comments-content .user{
      float: right !important;
      }

      That's it. Happy blogging :)

      Delete
    4. Thankssssssssssss Yoga :)
      It works!

      Do you also have a way to get rid of the line I marked (in above link). It appears after my replies

      Thanks again and good-night :)
      Winnie

      Delete
    5. You bet I do. Easy peasy, add this to your CSS:

      .comments .continue{
      border: 0px !important;
      }

      Cheers :)

      Delete
    6. Yoga - you are unbelievable !:)
      Thank you soooooo much for all your help now and before
      You are always so kind and helpful
      God bless you
      Winnie

      Delete
    7. You're most welcome. God bless you too :)

      Cheers.

      Delete
  10. Hey !

    You had a tutorial which described how to prevent people from copying text from your posts. Essentially you could not highlight any text on the page.

    It worked wonderfully in the old template. I would like to know how do I do the same for dynamic views.

    I tried to locate that tutorial to place the comment there but unfortunately could not get hold of it.

    http://mytradinghandbook.blogspot.com/

    ReplyDelete
    Replies
    1. Hmmm. I'm pretty sure I did not publish a post on that. Maybe I've left an answer in the help forum. In any case, you'd need some kind of script to prevent right-clicks on your blog. And the thing about dynamic view is, you can't enter any HTML/Javascript mods. Until these features become available, there's nothing practical we can do about it yet, except to wait.. Until then :)

      Delete
  11. How to highlight comment-content only? change ".comment-block" to ".comment-content" in your code doesn't works.

    $('.user.blog-author,.ssyby').closest('.comment-block')

    Thanks

    ReplyDelete
    Replies
    1. Hey Kholis. Use this:

      <script src='http://code.jquery.com/jquery-latest.js'/>
      <script>
      $('.user.blog-author,.ssyby').closest('.comment-block').children(".comment-content")
      .css('border', 'dashed blue 1px')
      .css('background','#F0A2A2 url("http://www.blogblog.com/1kt/transparent/white80.png")')
      .css('padding', '10px');
      </script>

      Cheers.

      Delete
    2. Thank you very much. Its work now :)

      Delete
  12. Hi I'm not sure why but for some reason I can't get it to work on my blog. Every time I save the code in my template, it gets somewhat distorted. I changed my comments to the new threaded comments using method 2 stated http://www.way2blogging.org/2012/01/official-blogger-threaded-comments-is-live.html. Would appreciate any help rendered, thanks so much!

    ReplyDelete
    Replies
    1. I couldnt deduce why it isn't working by inspecting your blog. I need to have a look at your template code to learn more. Here's what you can do. Go to Dashboard - Template - Backup/Restore - Download Full Template - Save the resulting xml file somewhere in your computer. Then go to www.rapidshare.com and upload your xml file there. You will be given a link. Come back to this thread and leave your link here.

      Delete
    2. Hi, I tried it again today and it could work! I guess I did it wrong previously. One qns, do you know why the pen icon that's supposed to show up beside author's name is not showing? there's just a blank space. thanks!

      Delete
    3. The QuickEdit icon will not load when the template goes idle. You can fix this by restoring your template's widgets to default. But I have to warn you that, by doing this, any direct template changes that you might have done in the past, will be undone (like the code that you added for tutorial above, it will be removed). It's kinda like 'restoring to factory settings'.

      What you can do it, first, backup your template (Dashboard - Template - backup/restore). Go to Layout - Post Body - Edit and make sure you quickedit icon is ticked. Next, click on Template - Edit HTML - Proceed - Restore widget templates to default. That should fix it.

      All the best :)

      Delete
  13. Thank you...super easy to implement and works great!

    ReplyDelete
  14. That was just quick and awesome, thanks for the post mate. It was so helpful as I put it here:
    http://www.socialcrunching.in/2012/02/twitter-new-brand-pages.html

    ReplyDelete
  15. Hey, this code is awesome, but I was wondering if I could do the same with CSS. Thats because I'm using numbered comments (CSS) but when I apply this script, the number of the author's comments disappear. This is the CSS Im using for numbering comments:

    .comments-content {
    counter-reset: contarcomentarios;
    }
    .comment-thread li:before {
    content: counter(contarcomentarios);
    counter-increment: contarcomentarios;
    float: right;
    font-size: 24px;
    color: #000;
    }

    Thank you for any help you can provide me =)

    ReplyDelete
    Replies
    1. Hi Brandon,

      The code above uses CSS as well. But CSS alone couldn't find the right handler, so I had to use a little bit of jQuery. But worry not, that isn't your problem. Change the second part of your existing CSS to this:

      .comment-thread li:before {
      content: counter(contarcomentarios);
      counter-increment: contarcomentarios;
      float: right;
      font-size: 24px;
      color: #000;
      position: relative;
      z-index: 10;
      }

      That should take care of it :)

      Delete
    2. Damn it, that was just perfect!!!!!
      It was so simple, just adding a relative position & z-index.
      Its perfect now!
      T H A N K Y O U !!!!!!!!!!!!!!!!!!

      Delete
  16. Thanks, bro =)

    It's really works!!!

    ReplyDelete
  17. Good day Sir Yogaratnam N.
    The codes you gave here for highlighting the author's comment didn't work in my blog, www.asiandramaportal.blogspot.com. Even changing the avatars for the comments also didn't work. Can you please check the codes of my template in order for these things to take effect. I don't know much about this though.

    Also,how should I let the featured content slider only appear at at the main page but not on the rest of the posts?

    Thank you so much for the time! I'll be waiting for your response. God Bless always.

    Here's the link of the template: http://www.mediafire.com/?i4v2iwel16u7m9p.

    -David-

    ReplyDelete
    Replies
    1. It probably has something to do with the fact that you're using a third party template. In any case, can I have a look at a post that has actual comments on it?

      By the way, I don't see a slider in your blog. And judging from the template code you sent me, it appears the author has set the slider to only appear in indexed pages (archive, label and homepage).

      Yoga

      Delete
    2. Here's the page where there's a comment.
      http://asiandramaportal.blogspot.com/2012/03/suzy-to-do-big-with-gong-yoo.html?showComment=1334954610352#c8145484607368625620

      Hope you can help me apply this feature in my blog.
      Thanks!

      Delete
    3. It appears that your blog is not using the new threaded comment system. To highlight author comments in the old comment system, please refer to this post:
      http://www.southernspeakers.net/2010/12/highlight-blogger-author-comments.html

      Cheers!

      Delete
  18. Hey, Yoga!

    It works in Dynamic Views? What should I do? I want to work also in Dynamic... but it doesn't. Any CSS?

    ReplyDelete
    Replies
    1. I'm sorry Reid,

      It won't work in DV at the moment.

      Delete
  19. Hello Yoga,

    I was wondering, on my proper blog, there are other moderators or admins, and if they comment on a post that is not theirs this the highlighting does not apply.

    Is their a way to allow every admin's comments work on any post on the blog?

    ReplyDelete
    Replies
    1. Hi Soggy,

      Use the following code if you wanna highlight Admin comments. One set of code for each admin, duplicate as many times as you want. But there's a downside to it. Say if I choose my nickname to be 'Soggy_Doggy' and decide to leave a comment on your blog, my comment will be highlighted too, even though I am not an admin in your blog. Just so that you know.

      <script src='http://code.jquery.com/jquery-latest.js'/>
      <!-- ss highlight author starts -->
      <script>
      $(function() {
      function highlight(){
      var author1 = $('.user:contains("yoga")');
      $(author1).closest('.comment-block')
      .css('border', 'dashed blue 1px')
      .css('background','#F0A2A2 url("http://www.blogblog.com/1kt/transparent/white80.png")')
      .css('padding', '10px');
      }
      $(document).bind('ready scroll click', highlight);
      });
      </script>
      <!-- ss highlight author ends -->

      Delete
    2. Forgot to tell you. Change the word 'yoga' in the code above to your admin's nick.

      Delete
  20. This was fantastic thank-you so much ^_^.

    ReplyDelete
  21. Thank you so much for this! I edited my template so much only to realise I was looking for the wrong kind of code and it was this simple!

    ReplyDelete
    Replies
    1. No problem at all. Glad you got this one sorted :)

      Delete
  22. Is there away to change the the url of the link when clicking on the authors name.

    i.e. clicking on your name takes me to https://plus.google.com/101008325552683429100/posts

    how could i change it to www.google.com for instance?

    James

    ReplyDelete
    Replies
    1. Hi James,

      Use this:
      <script src='http://code.jquery.com/jquery-latest.js'/>
      <script>
      $('.user.blog-author a').attr("href", "http://www.google.com/");
      </script>

      Cheers..

      Delete
    2. Brilliant, thanks for your help

      Delete
  23. @Yogaratnam N - Very useful trick.But it is highlighting only last author comment not all :( help needed.....

    ReplyDelete
    Replies
    1. It should highlight all authors comment. But note that though a blog can have more than 1 admin, a post can only have a single author - and this tweak highlights that author's msg. Can I have a look at your blog?

      Delete
  24. thanks for the hack, it's great!!

    ReplyDelete
  25. Hi, I do no know what I'm doing wrong but I can't click Edit HTML? I'm on the Template page, and while the "Customise" button is orange and clickable, the Edit HTML is greyed out and I can't click it, even though my cursor turns into a little hand when I hover over it!

    ReplyDelete
    Replies
    1. Hi Ella,

      You're using a Dynamic View template, whereas this tutorial is for non-dynamic-view templates only. Is there something in particular you'd like to do to your Dynamic View comments?

      Delete
  26. It's really a greate post,

    atozhackingtricks.blogspot.in

    ReplyDelete
  27. Thank you my brother, it's 100% works in my blog, once again, Thank You :)

    ReplyDelete
  28. wow, thank you so much for this. very simple!

    ReplyDelete
  29. I had to read all of the comments here to see if I could resolve some of my problems or get new ideas. You really work wonders. Great job!

    ReplyDelete
    Replies
    1. That's great. If you couldnt find answers to your questions in the comments, feel free to leave a comment on your own. Will try my best to resolve it :)

      Cheers!

      Delete
  30. I was so excited to find your post--I've been trying to change this using the old way and wondering why on earth it wasn't working.

    For some reason though, when I save my template all of the single quotation marks get changed to ' and it doesn't work on my blog. I have tried deleting the changed part and putting the marks in myself but it still gets changed when I save the template. Any thoughts?

    ReplyDelete
    Replies
    1. Hi Adriane,

      Don't worry about the symbols being changed. That is just Blogger's way of making the code more HTML friendly. Anyways, it seems to be working in your blog now:

      Screenshot from your blog.

      Can you see the same?

      Delete
    2. Yes, thank you! I copied to notepad , changed the quotes and then copied and pasted again. It still changed them in my code--but this time the comments worked!Thank you for your article and your help.

      Delete
  31. thank you so much for this great article

    ReplyDelete
  32. Hi !
    Thanks a lot for this article !
    However, it absolutely doesn't work on my blog :(
    I tried many times to highlight the background of my own comments and it never works... any ideas why it doesn't work at all ?
    This is what I see : http://universdemaclasse.blogspot.fr/2012/06/petit-bilan-des-ateliers-de-lecture-et.html#comment-form

    Thank you very much !

    ReplyDelete
    Replies
    1. Hi there,

      Your post was published by 'L'univers de ma classe'. Thus, in this case, 'L'univers de ma classe' is the author. But I can't find a single comment from 'L'univers de ma classe'. Whose comment were you expecting to be highlighted? In other words, the author comments were not highlighted because the author did not leave any comments at all..

      Delete
  33. Thank you for your quick answer !
    There are comments from "l'univers de ma classe" but I seem to have a problem with the apostrophe too, maybe that's why you didn't see them :)
    The very last comment of the page is a comment from "L'univers de ma classe" as an answer to another comment from "Anonyme" (this answer is slightly highlighted). Just above this other comment, there is another one from "L'univers de ma classe" (this one is not highlighted at all). I'm sorry, I'm not sure it is very clear !

    ReplyDelete
    Replies
    1. I think the apostrophe is causing the problem. Just out of curiousity, when you try to reply a comment, do you reply using Google profile or do your choose 'Name/URL'?

      Delete
    2. Thanks again for answering so quickly !
      When I reply, I use "L'univers de ma classe (google)". I've tried to get rid of this apostrophe problem, but it never seems to work...

      Delete
    3. The fact that 'L'univers de ma classe' is appearing as 'L'univers de ma classe' in comments is enough to indicate something is wrong here. Just for the sake of testing, if you have another Google account, could you add that account to your blog as an author? If you don't have any, you could create one -- keep it special-characters free (no apostrophe this time)..

      We'll run some experiments, if you're up for it :)

      Delete
  34. I'm in ! :)

    I tried to add my other account as an author for the blog, but it doesn't seem to work either. I manage to go to the main page, but then it tells me that I have no blog (under this account).
    Anyway, sorry to take your time with that ! It is so confusing and frustrating !

    ReplyDelete
    Replies
    1. I suppose 'Univers de ma classe' is your other/new account, yeah? That's a good start. To add an author, you need to use your 'L'univers de ma classe' account. The whole thing will be much easier if you have two different browsers open, one logged in as either account. You woulnd't have to sign in and out that way..

      Delete
  35. Right, I have added "Univers de ma classe" as an author for the blog. However, I seem to only be able to write a new message and reply to a comment.
    I've tried that (I can't reach the "conception" bit though) by replying to a comment and nothing has changed (except that I don't have the ' anymore !)
    I'm really sorry to bother you with all that and would understand if you would want me to stop asking you questions about that ! :)

    ReplyDelete
    Replies
    1. Please don't be :) I'm curious to find out what's wrong as well.. We'll get this fixed, as long as you don't give up..

      You've added 'Univers de ma classe' as an author - this account has limited privileges.. But it is fine for our test purposes.. Just so that you know, you could give admin privileges to this account now by going to Dashboard - Settings - Basic - Permission.. But that won't be necessary for our tests..

      What I'd like you to try is, publish your next post using 'Univers de ma classe', and try replying to a comment in that post. Let me know how it goes.. :)

      Delete
    2. WOW !!! I did exactly what you told me (I used my other account for my new article and tried to post a comment there) and it worked perfectly !!!
      However, when I tried to reply to a comment using the new account but on an article written by the old account, it didn't work at all...

      I've also realised that now that I have posted an article with the new account, I have access to everything on the blog !

      Delete
    3. Excellent! That makes perfect sense.. In a post written by the old account, the old account is the author, and the new account is just a regular comment.. Thus it will not get highlighted.. But when the new account replies a comment on a post published by itself, the comment gets highlighted since it sees itself as the author, you get what I mean?

      That means you've done your steps right, and the tweak is working as expected in your blog. Sadly, due to the apostrophe in your old account, Blogger does not see the comment as an author comment even though it is indeed an author comment. There's something broken at Blogger's side, and there's nothing much we could do about it..

      You have two options now:
      1) continue using your new account
      2) remove the apostrophe from your old account..

      All the best! :)

      Delete
  36. hi Yoga (i am bad speak english)
    when i save a xml template copy and then a uploaded back i see this error:
    http://i45.tinypic.com/riay2w.jpg (templ without changes)

    and how make in dynamic view just like ures replies (http://i50.tinypic.com/2n1evyq.jpg)

    ReplyDelete
    Replies
    1. Hi Mio,

      Remove the line that has the word 'Navbar1' from your template, and you shall not see the error message again..

      As for the highlighted comment, unfortunately, there isnt a way to do it in Dynamic Views as of yet..

      Cheers :)

      Delete
  37. Thank you so much !!! It works !!! I have just changed the name of the account, without the apostrophe, and it works !!!!

    However, I suppose it won't work for the old comments still called "L'univers de ma classe"... there's no way to change that is there ?

    Anyway, thank you, it looks so gorgeous now ! :)

    ReplyDelete
    Replies
    1. Excellent! As for the old comments, there isn't a way to make them work automatically.. However, you can delete them and re-comment with your new name, manually..

      All the best :)

      Delete
  38. Yeah, its perfect and easy to install. Thank you alot Yoga. :)

    ReplyDelete
  39. Hello Yoga!

    I just tested your small code and it really works perfectly. But I have a big problem now. I have a slider on my template and now doesnt work :/

    When I remove your code it works again. Been working in that template for months and I would like to keep the silder and also get threat comments with author highlighted. I hope you can give a hand in this, Im sure that only need a little modification but I am not an expert on this :/

    This is my test blog in case you can check:

    http://kitsunetest.blogspot.com

    Thanks in advanced and sorry for bothering you ;)

    ReplyDelete
    Replies
    1. Hi Kitsune Shan,

      I can give it a shot, but since I don't know how the slider works, I can guarantee compatibility between the gadgets.. Now, where can I get a copy of your template so that I can test things?

      Delete
    2. Is this one:

      http://www.premiumbloggertemplates.com/2012/01/igaming-premium-blogger-template.html/demo/

      Thanks for giving a look to it. I also noticed that the main top menu also dont work as usual (no drop down effect). I think I need to revert back the whole comment section of that template, I just dont know how. I think is kinda the easier solution if I want threaded comments with author highlight and being able to add stuff in a future :/

      Cheers, and thanks again!

      Delete
    3. Had to change a couple of handlers to ensure compatibility with your third party template, and everything works fine:

      <script src='http://code.jquery.com/jquery-latest.js'/>
      <!-- ss highlight author starts -->
      <script>
      $(function() {
      function highlight(){
      $('.blog-author,.ssyby').closest('#comment-header')
      .css('border', 'dashed blue 1px')
      .css('background','#F0A2A2 url("http://www.blogblog.com/1kt/transparent/white80.png")')
      .css('padding', '10px');
      }
      $(document).bind('ready scroll click', highlight);
      });
      </script>
      <!-- ss highlight author ends -->

      Use the exact same instruction as given in the post above. Slider and drop-down menu works just fine in my test blog:
      http://yoboy14.blogspot.com/

      Cheers :)

      Delete
    4. Oops, sorry but I just opened your test blog to test and seems that have the same problem than mine. Drop down works but without any effect and the slider doesnt work. It stuck always in the same image, doesnt change automatically and either can be change manually clicking the arrows. Am I missing something? Tried in firefox and chrome and both same result.

      Delete
    5. I'm not sure what's causing the problem, but if I had to guess, I'd say your slider will not work if you add any external script to your template. The code to highlight author comment is very basic, and it's definitely not interfering with your slider elements. But somehow your slider stops working when an external script is added. I can think of a temporary solution for now, but I suggest you run this by the slider maker to see if there's a better solution in the long run.

      Here's what you can do for now. Since we don't need the comment code where the slider is (homepage) and the slider where the comment is (post page), we can use conditional code to divide the two for now:

      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
      <script src='http://code.jquery.com/jquery-latest.js'/>
      <!-- ss highlight author starts -->
      <script>
      $(function() {
      function highlight(){
      $('.blog-author,.ssyby').closest('#comment-header')
      .css('border', 'dashed blue 1px')
      .css('background','#F0A2A2 url("http://www.blogblog.com/1kt/transparent/white80.png")')
      .css('padding', '10px');
      }
      $(document).bind('ready scroll click', highlight);
      });
      </script>
      <!-- ss highlight author ends -->
      </b:if>
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <script src='http://code.jquery.com/jquery-latest.js'/>
      <!-- ss highlight author starts -->
      <script>
      $(function() {
      function highlight(){
      $('.blog-author,.ssyby').closest('#comment-header')
      .css('border', 'dashed blue 1px')
      .css('background','#F0A2A2 url("http://www.blogblog.com/1kt/transparent/white80.png")')
      .css('padding', '10px');
      }
      $(document).bind('ready scroll click', highlight);
      });
      </script>
      <!-- ss highlight author ends -->
      </b:if>

      The drop down menu appears fine to me. What's wrong with it again?

      Delete
    6. The dropdown menu doesnt work because it doesnt show even wich link are child and either have the "smooth" effect. Anyway that script seens to not highlight comments at all.

      You may be right and it will be messed everytime I add an external script. But is fine, thanks for trying to help, I really apreciate :) I will try to contact someone experienced and pay him to add and fix all custom things I want.

      Again, thank you very much for your answer, Im sure they will be very helpfull for others with similars problems.

      Regards.-

      Delete
  40. Thanks so much for this eassssssssy solution! I really appreciate it!

    ReplyDelete
    Replies
    1. You're most welcome Chrysrawr, and thanks for the feedback! Appreciate it :)

      Delete
  41. Hi Yoga,
    I tried to implement you code but it did not work for me. after I add the code and save the template, the whole blog goes blank ( I see nothing but white screen!).
    I also noticed the after I save the template, the script changes to the following( Please see screenshot)

    http://2.bp.blogspot.com/-VtyyN6-RilA/UEc0Rb7DUqI/AAAAAAAAAas/SL3Lj6N1NCA/s1600/screenshot.jpg

    ReplyDelete
    Replies
    1. Don't worry about the character change - it is common. It is Blogger's way to safe proof the code..

      As for your page going blank, not sure what's causing that. Let me have a look. What's your blog's address?

      Delete
    2. Update: Found this link from your G+ page --> http://ttt0600.blogspot.com

      If this is your blog, it makes sense why the code isn't working: You're using a dynamic view template. HTML tweaks, or Javascript tweaks, will not work in DV template. This tutorial is meant for non-dynamic view templates only.

      Cheers :)

      Delete
  42. Hey Yoga,

    Does this work with dynamic views as well?

    Thanks

    ReplyDelete
    Replies
    1. Hi Kiara,

      Nope. For non-dynamic view templates only. I couldn't find the right handlers to make it possible in Dynamic View templates.

      Cheers :)

      Delete
  43. Amazing...simple and super useful. I will be coming back! :D

    ReplyDelete
  44. thanks~finally i make it already.

    thanks very much ya :)

    ReplyDelete
  45. It's not working for me.
    I am using picture window template .It's not working for me. my blog is vphotoshop.com ... Please help... waiting..

    ReplyDelete
    Replies
    1. I've looked into your blog, and it doesn't seem like the code above is anywhere to be found in your template. Check again if the code is saved.

      Delete
  46. Thank you so much! I've been wanting to distinguish the author comments for awhile without success. So glad I finally found one :)

    ~Sophia @ Bookwyrming Thoughts

    ReplyDelete
  47. Hello! I tried this on my blog but It did not work? could you please help me out!
    Thanks...your tutorials come in handy :)
    http://www.specadoc.com/2013/01/lo-que-va-quedando.html?showComment=1358618800716#c4500349537806987

    ReplyDelete
    Replies
    1. Hi Agus,

      You seem to be using a customized version of simple template, with an older version of the comment system.

      Try the following tutorial instead. I can't guarantee that it'll work, but do give it a try.

      http://www.southernspeakers.net/2010/12/highlight-blogger-author-comments.html

      If it doesn't work, please contact the maker of your customized template.

      Cheers :)

      Delete
  48. Hi,
    This worked. However, I still have a greyish background(default in blogger) behind the pink background for the author comments. How do I remove it?
    Also, how do I add an image before the comment starts(like u have your picture)?
    Thanks,
    Deepti.

    ReplyDelete
    Replies
    1. Hi Deepti,

      There isn't any comments in your blog. Do you have a link with an author comment that I can look into?

      As for the avatar, it comes with the system itself. Users who have setup their Blogger profile or Google profile will have their images next to their comments.

      Delete
  49. Sorry I had deleted the comments yesterday. I have replied to your comment. A couple of more questions pls:

    1. My no.of pageviews used to include my own pageviews as well. Though I've changed the setting now to not include my pageviews, how do I delete the ones that are already shown?

    2. There is a small Subscribe via email link at the end of the blog post page. How do I delete that?
    Thanks,
    Deepti.

    ReplyDelete
    Replies
    1. Hi Deepti,

      1. Blogger's page stat isn't exactly a state-of-the-art feature. You can't alter previously registered counts, and your current count will not be entirely accurate as well - but so is the case for most stat counters out there.

      2. This link is rendered with your comment form, and there isn't a way to individually address this element without restructuring the form (which is a crazy thing). There isn't much we can do about it.

      Cheers..

      Delete
    2. Thanks for the info. However, could you please tell me how do I remove the greyish color in the comment reply box? Also, in the post that has comments, the leave a comment icon has slipped to the end of the page, how do I get it above the comment box?

      Sorry to bother you.
      Thanks,
      Deepti.

      Delete
    3. Looks like you're gonna have to cut a lot of code and restructure your comment part, if you were to reposition the 'Leave a Comment' image. First of all, did you add this image on your own or was it included in your template?

      Use this to remove the greyish part:
      .comments .comment-thread.inline-thread{
      background: transparent !important;
      }

      Delete
    4. I had added this image on my own and this code worked..thank you so much

      Deepti.

      Delete
  50. This Tutorial is working 100% I was successfully. Thank You This step by step guide..!
    My blog: http://www.mybloggerblog.com

    ReplyDelete
    Replies
    1. I did not post this tutorial for you to reproduce in your blog as one of your own, nor do I understand the need for the same tutorial to appear twice in the Internet. Please get it removed ASAP. You're welcome to use this tweak in your blog, or review my post, or link to it - but I don't appreciate anyone posting my content as if it is their own hard work.

      Delete
  51. Hi Yoga,

    This worked perfectly in my latest post (like so) and will presumably work fine in future posts too.

    But I recently updated my Blogger profile to a slightly different name, and it doesn't seem to recognise my old comments as being by a blog author (even though if you click on those comments it takes you to the same, now updated, blogger profile). So those are not highlighted in pink. Here's an example.

    Is there a fix for this so that all my blog comments are highlighted pink, old and new?

    (It would be even better if there was a way to update old comments to show my new blogger picture and name, but that would just be a bonus.)

    ReplyDelete
    Replies
    1. Hi Kirsty,

      Here's how things work. When you leave a comment, your comment gets saved in the post's comment feed. Blogger will then run a query to find if any comment matches the name of the blog's author. Since older comments are saved with different names, they will not be recognized as author comments, as they don't match the current author's name in Google's server.

      That said, I think I could help you but it's gonna involve a number of big steps (yes, I've considered including a tweak to change your old comment picture and name as well). And I'd rather walk you through it, tweak by tweak, instead of giving you a bunch of experimental code. Obviously, this page isn't suitable for a discussion of that magnitude. Here's what I need you to do. Head over to Blogger's official help forum, and post a question there. Once you're done, let me know the link to your question by replying to this comment. Your question need not be comprehensive, as I'll take on it (that is if no-one else beats me to answering you).

      Cheers :)

      Delete
    2. Hi,
      thanks for sharing, this is exactly what I've been looking for for weeks! :)
      There's just one thing I'd like to ask you: I've been blogging for years with my blogger account name, which was "Getta". Now that I connected my blogger account to google+, my author name has changed to "Giulia C" (the one you see here).
      Is your script formatting both Getta's-comments-on-posts-written-as-Getta and GiuliaC's-comments-on-posts-written-as-GiuliaC?

      Thanks for the big work you're doing here
      Giulia

      Delete
    3. Hi Giulia,

      'Getta' was the official author in your blog in the past. Right now, 'Giulia C' is the official author - not 'Getta'. Blogger's has a static field for post authors, which can only accept one author name for a post - even if the names are from the same account.

      Long story short, the script above will only highlight the current author for each post - past author names will not count, as Blogger doesn't recognize them anymore.

      Delete
    4. Thanks for your fast reply, that's what I was afraid of.
      So do you think there might be any way to get blogger highlight both names?
      I was thinking of some kind of "or" operator which applies the function to .user.blog-author OR where user=="Getta"...

      Delete
    5. Yeap, we can get comments from a particular nick to be highlighted. See my reply here.

      Cheers..

      Delete
  52. Hi Yoga, how are you?

    I'm trying to put the code for this blog http://hd-hwld.blogspot.com/ but it doesn't work. Do you mind to have a look? Thanks!

    ReplyDelete
    Replies
    1. Hi Rose,

      I'm doing great. Hope you're doing well yourself..

      As for the blog, it looks like a customised template. Is this template based on one of Blogger's default template?

      If yes, could you leave a test comment so that I can inspect why it isn't working?

      Delete
    2. Good to know that you're fine. I'm doing great too, thanks. Thank you for your reply. You're helpful as always!

      I've left a test comment. The template is based on Minima. I just made little changes to the date format, additional code for Auto read more and the footer columns.

      Thank you in advance!

      Delete
    3. Oh right, Minima.. If your template has not gotten the "threaded comment" treatment, I think the following tweak will be more appropriate for now:
      http://www.southernspeakers.net/2010/12/highlight-blogger-author-comments.html

      Let me know how it goes..

      Delete
  53. Thanks Yoboy. It works! Thank you, thank you so much.
    I really appreciate your help.

    Now, another question, do you have a tutorial that teaches how to show 'Reply', just like your comment here :) Thank you.

    ReplyDelete
    Replies
    1. I have not tried to upgrade the old comment system to the threaded one manually before. But I believe this post of my buddy's should help:

      http://www.bloggersentral.com/2012/01/enable-threaded-comment-on-blogger.html

      Greenlava is a Malaysian as well. Feel free to leave him a shoutout. Cheers :)

      Delete
  54. not work my web site www.apparu.in

    ReplyDelete
    Replies
    1. I don't fine the code anywhere in your blog. You must have forgotten to save the code or something. Try giving it another go, from scratch.

      Delete
  55. Thank you for posting this code - it has been the only one to work for me thus far! However, I have a background image for my comments and when I scroll, the background image disappears. I'm assuming the background isn't "fixed." Is there any way that I could get it to stay visible while I scroll and not disappear (it reappears after I stop scrolling)?

    ReplyDelete
    Replies
    1. Hi Stephanie,

      Sorry for my ridiculously late reply. I need to have a look at your blog to come up with a possible fix. What's your blog's address?

      Delete
  56. Hi Yoga!

    The code worked perfectly on my Simple template. Yet the left border of the coment box is touching my avatar. Here you have A POST WITH COMMENTS so you can see what I mean.

    Is that something that can be fixed, or do I have to learn to live with it?

    Thanks!

    ReplyDelete
    Replies
    1. Hi Zaira,

      Give this a go. Change the padding of the box, by changing Line 9 of the code, from:

      .css('padding', '10px');

      to a smaller figure, say:

      .css('padding', '5px');

      Let me know how it goes.

      Delete
    2. Hi Yoga,

      Thanks for the suggestion. I tried it out, but it did not work on my blog. Well, it did make the characters closer to the right margin, but the box border still touches the avatar...

      It there is any other trick that I can use, I'm all ears. If not, thank you anyway.

      Delete
    3. I've still got few more tricks up my sleeves. Try adding this to your CSS, and let me know how it goes:

      .comment-block{
      margin-left: 70px !important;
      }

      Cheers :)

      Delete
    4. Hi Yoga,

      With that last piece of code, the border around my comment completely dissapered, so I removed it. Anything else I could try?

      Thanks!

      Delete
    5. That's strange. Could you leave the last code in your 'Add CSS' box and get back to me so that I can inspect your page on what's failing?

      Delete
    6. Hi Yoga,

      As you may understand, I'm absolutely code illiterate. Do you want me to copy all the portion of this hack from my template to the "Add CSS" box? Includinng that last piece of code that you gave, but I deleted after noticing it didn't work? I just want to make sure I'm doing what you need me to do...

      Thanks.

      Delete
    7. Hi Zaira,

      That won't be of much use. What I'd like to see is your page, with the non-functional code on. I need the code to be there. Only then I can figure out why it isn't working. Just re-add the code to your 'Add CSS' box, and leave it there. Give me a nudge once this is done so that I can inspect your blog. Here's the code again:

      .comment-block{
      margin-left: 70px !important;
      }

      Delete
    8. Hi Yoga,

      I did as you told me... and now it looks perfect! It's fixed! No idea what I did different this time (as far as I recall, I did exactly the same the prior time), but it is beatiful. Thanks a lot!!!

      Delete
    9. That's excellent Zaira! Could have been a browser cache issue that you were issue, but glad you got it sorted! :)

      Cheers!

      Delete
  57. Hi Yoga,

    I am trying to change the color of the background for the blockquotes in the posts in my blog, but I don't think blogger includes options for these in their template settings adjustments. Is there a CSS command that could help me out? Thanks! Here is my page: http://www.lineaeneldesierto.blogspot.com

    ReplyDelete
    Replies
    1. Hi Fabio,

      Here, this should work for you:

      blockquote{
      background: yellow !important;
      }

      Cheers :)

      Delete
  58. It didn't work for me :(
    http://glittery-dreams.blogspot.com

    ReplyDelete
    Replies
    1. I can see your comment highlighted. Have you got it sorted?

      http://i.imgur.com/a8Giz5J.png

      Delete
    2. No its not. My comment is not highlighted, its anyone who replies, its appears in the highlighted box , how can I undo that n just highlight my comments http://glittery-dreams.blogspot.com/2014/01/kadai-chicken.html#comment-form

      Delete
    3. I have just tested this on my test blog and it is still working as intended:
      http://i.imgur.com/Lb5OLoi.png

      Were there any changes made to the code in your blog?
      I couldn't see the script in your blog as it is already rendered.

      Delete
  59. Thank you so much for this. I've tried several different tutorials which didn't work but this one did! Looks fabulous!

    ReplyDelete
  60. This is exactly what I am looking for! The code worked perfectly on my Simple template.Tiny Serval

    ReplyDelete
  61. Thanks for that, man! I've tried several others, but this one works perfectly! :D

    ReplyDelete
  62. Hi,

    Thanks a lot Yoboy.
    I've just discovered your blog and this tutorial : it works perfectly on my comments, the other tutorials I've tried didn't work at all.

    Best regards from France.

    ReplyDelete
  63. Works like a charm mate, thank you.

    ReplyDelete
  64. what if i want ALL authors comments to be hightlighted in my blog
    (i mean not only post author but the other authors in my blog as well)

    ReplyDelete
    Replies
    1. See my reply here:
      http://www.southernspeakers.net/2012/01/highlight-author-comment-in-bloggers.html?showComment=1331415035362#c6531509372359175214

      Delete
  65. I finally completed this high light stuff ever since I saw your post. thanks, extremely helpful and easy!

    ReplyDelete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.