Southern Listeners

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

Friday, December 24, 2010

Highlight Blogger Author Comments

It has been awhile. This time, I'm going to show you a quick and easy way to make your comments (author comments) look different. In a thread full of comments, one might feel the need to isolate the author's comments from readers' comments, probably by highlighting it or making it look different.


UPDATE: THIS TWEAK WILL NOT WORK WITH THE NEW BLOGGER REPLY COMMENT SYSTEM. CLICK ON 'REVERT WIDGET TEMPLATES TO DEFAULT' TO UNDO THIS TWEAK. I'VE PUBLISHED A NEW WAY OF HIGHLIGHTING AUTHOR COMMENTS FOR THE NEW THREADED SYSTEM, CHECK IT OUT.

This tweak works with both Layout (Minima, Harbor, Denim, Rounders, etc) and Designer (Simple, Picture Window, Awesome Inc, etc) templates. Basically, it'll work with all Blogger 'built-in' templates, probably third party templates as well. Consider this my Christmas gift.

Step 1:

If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Back Up (Download Full Template) - Check the box next to 'Expand Widget Templates'

If you're using the new Blogger interface:
Go to Dashboard - Template - Backup/Restore - Download Full Template - Close - Edit HTML - Proceed - Check the box next to 'Expand Widget Templates'

Find and delete the following lines:
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
          <b:loop values='data:post.comments' var='comment'>
            <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
              <b:if cond='data:comment.favicon'>
                <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
              </b:if>
              <a expr:name='data:comment.anchorName'/>
              <b:if cond='data:blog.enabledCommentProfileImages'>
                <data:comment.authorAvatarImage/>
              </b:if>
              <b:if cond='data:comment.authorUrl'>
                <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
              <b:else/>
                <data:comment.author/>
              </b:if>
              <data:commentPostedByMsg/>
            </dt>
            <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
              <b:if cond='data:comment.isDeleted'>
                <span class='deleted-comment'><data:comment.body/></span>
              <b:else/>
                <p>
                  <data:comment.body/>
                </p>
              </b:if>
            </dd>
            <dd class='comment-footer'>
              <span class='comment-timestamp'>
                <a expr:href='data:comment.url' title='comment permalink'>
                  <data:comment.timestamp/>
                </a>
                <b:include data='comment' name='commentDeleteIcon'/>
              </span>
            </dd>
          </b:loop>
        </dl>
The code before being deleted (starting portion):


The code before being deleted (ending portion):


Step 2:

Place this modified line in place of the deleted lines.
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.author == data:post.author'>
&lt;div id=&quot;authorcomment&quot;&gt;
<b:else/>
&lt;div id=&quot;readercomment&quot;&gt;
</b:if>
      <dl expr:class='data:post.avatarIndentClass' id='comments-block'>  
            <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
              <b:if cond='data:comment.favicon'>
                <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
              </b:if>
              <a expr:name='data:comment.anchorName'/>
              <b:if cond='data:blog.enabledCommentProfileImages'>
                <data:comment.authorAvatarImage/>
              </b:if>
              <b:if cond='data:comment.authorUrl'>
                <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
              <b:else/>
                <data:comment.author/>
              </b:if>
              <data:commentPostedByMsg/>
            </dt>
            <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
              <b:if cond='data:comment.isDeleted'>
                <span class='deleted-comment'><data:comment.body/></span>
              <b:else/>
                <p>
                  <data:comment.body/>
                </p>
              </b:if>
            </dd>
            <dd class='comment-footer'>
              <span class='comment-timestamp'>
                <a expr:href='data:comment.url' title='comment permalink'>
                  <data:comment.timestamp/>
                </a>
                <b:include data='comment' name='commentDeleteIcon'/>
              </span>
            </dd>
        </dl>
&lt;/div&gt;
</b:loop>
The modified code in place (starting portion):


The modified code in place (ending portion):


Step 3:

If you're using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

If you're using the new Blogger interface:
Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
#authorcomment{
background: yellow url("http://www.blogblog.com/1kt/transparent/white80.png");
border: 10px double orange;
padding: 4px;
color: black;
}
You should be able to see your highlighted comments already. If you want to customize this style further, refer to the following step.

Customization:

There are lots of ways to customize the look of your highlighted author comments. I'll list some of the common ones here. If you have something specific in mind, you can leave a comment and I'll try to reply you with a solution.

This is the code that you've added to your template in Step 3:
#authorcomment{
background: yellow url("http://www.blogblog.com/1kt/transparent/white80.png");
border: 10px double orange;
padding: 4px;
color: black;
}

BackgroundYou can either use a plain color or an image as your background. I've used a combination of both (white transparent image with yellow plain color).

If you want to use a background image only, declare your background as such (replace IMAGEURLHERE with the URL of your image):
background: url(IMAGEURLHERE);
For plain colors, use this:
background: white;
If you want more choices of plain colors, use HEX code instead:
background: #121212;
You can get the hex code for a given color from this useful site.
BorderThe syntax for CSS border is:
border: 10px double orange;
  • You can change the thickness of your border by adjusting the value 10. If you want no border at all, you can set it to 0.
  • You can change the color to a different plain color. You can also use hex code for a specific color.
  • You can change the style of your border. I have used a double border. Other options are: solid, dotted, dashed, groove, ridge, inset, outset
PaddingI've included a padding in my code because I think without a padding, the author's profile image is too close to the border. You can set the padding's value to 0 to see what I mean.
Comment Text ColorFor plain colors, use this:
color: white;
If you want more choices of plain colors, use HEX code instead:
color: #121212;
Author's Name ColorYou can change the color of the author's name by going to Template Designer - Advanced - Add CSS - paste the following code (leave a space between codes, if you already have existing codes in your 'Add CSS' box) - press enter after the last character of the last line } - Apply to Blog:
#authorcomment dt a{
color: red;
}
Comment Action MessageI don't know what else to call it. I'm referring to the word 'said' in my comments. You can change its color by going to Template Designer - Advanced - Add CSS - paste the following code (leave a space between codes, if you already have existing codes in your 'Add CSS' box) - press enter after the last character of the last line } - Apply to Blog:
#authorcomment dt{
color: red;
}
Comment TimestampYou can change its color by going to Template Designer - Advanced - Add CSS - paste the following code (leave a space between codes, if you already have existing codes in your 'Add CSS' box) - press enter after the last character of the last line } - Apply to Blog:
#authorcomment dd a{
color: red;
}
Bold Author's NameI did not include this in the example above (for simplicity), but I've used it in my template. You can make your Author's name bold by going to Template Designer - Advanced - Add CSS - paste the following code (leave a space between codes, if you already have existing codes in your 'Add CSS' box) - press enter after the last character of the last line } - Apply to Blog:
#authorcomment dt, #authorcomment dt a{
font-weight: 900;
}
Style Reader's CommentsIf you're wondering how you can defeat the purpose of this entire tutorial by giving your readers' comments a unique style as well, I'm gonna show you how. Just change the ID that is being addressed. The ID for readers' comments is 'readercomment'. Here's a quick example on how you can make use of this:
#readercomment{
background: white;
border: 2px solid yellow;
padding: 4px;
color: black;
}

It took me really long to write this one, not to mention the time spent to figure out how to do it in the first place. I hope it will be helpful for all of you. Merry Christmas and Happy New Year, to all of you, my readers.

31 comments:

  1. Its sooooooooooooo cool baby.... My baby is the BEST!!!! Thanks for the info dear. XOXOXO =)

    ReplyDelete
  2. ) Love you too darling. A special Merry Christmas to my sweetheart.

    ReplyDelete
  3. Omg!!!!!!! Its awesome!!!!!! Thanks again for the tutorial dear!!!!!! bwahahahahahaha!!! im soooo excited!!!! Check my blog!!! X.O.X.O

    ReplyDelete
  4. Yeah, finally you managed to do it on your own! Looking good babe! :D

    ReplyDelete
  5. thanks. after days and days I solved the problem thanks to you ... see you soon

    this is my blog, come and visit anytime...

    http://wblognico.blogspot.com

    ReplyDelete
  6. Glad you find it useful. Nice looking site you got there. I see you have added google translator gadget too, good choice!

    ReplyDelete
  7. thanks...your tutorial helps me a lot...thanks!!
    =)

    ReplyDelete
  8. @Aziz Syaidahtul: Glad you find it helpful. Enjoy your stay here. Regards.

    ReplyDelete
  9. Yoboy: Thank you very much. Already did it.

    ReplyDelete
  10. @Rinah: Glad you like the tweak.

    Cheers and God bless.

    ReplyDelete
  11. Thanks for your awesome code YoboY. It looks like this doesn't work on an old-style template, though. I've followed the instructions exactly as written but it produces no change on my comments, whether old or now. I'm using an old-style Scribe template, modified for 3-columns.

    Soon as I migrate to one of the newer templates I'll be sure to use this!

    ReplyDelete
  12. @Skeptical Believer: Actually, it does work with old templates as well. It works with any template that uses the default Blogger comment system. I quickly tried it on a Scribe template just to be sure, and it does work.Click here for a screenshot.

    In fact, this page (southernspeakers.net) uses one of the old templates as well (Minima).

    ReplyDelete
  13. Thanks Yoboy. It work for me...

    ReplyDelete
  14. @Anon: Roger that! Glad it worked. Cheers and God bless.

    ReplyDelete
  15. referring to thousands of websites, god!!! finally, you have done it........ thankx for this tutorial....... I really appreciate it....... check it on my blog, www.thebloggingtutorial.blogspot.com I have added something of my own, once again thankx for the tutorial.......

    ReplyDelete
  16. @Wasif: Glad you've found. You're very much welcome. Enjoy your stay here Wasif.

    Cheers and God bless.

    ReplyDelete
  17. Thank you very much!!
    You are a great help.

    I have only one problem - for some reason I could not make my name (author name) - bold.

    And I'd like also to have my comments - bold.
    Is there a way?

    Thanks, Winnie (winnish.blogspot.com)

    ReplyDelete
  18. @Winnie: Your author name (your name) is already bold. Try changing your code to the one below to see the difference:

    #authorcomment dt, #authorcomment dt a{
    font-weight: 100;
    }

    To make your entire comment bold, add the following to your CSS:

    #authorcomment{
    font-weight: 900;
    }

    Good luck and happy blogging. Cheers and God bless.

    ReplyDelete
  19. Thanks !!!!!!
    I really appreciate your tutorial and your answer.
    I wanted my comments to be bold and now it's done! Thanks to you :)

    If you have tutorial regarding tabs - I'd love to know where, because when I try to put tabs beneath the header it doesn't work (at the moment it on top right side-bar)

    Thanks again!
    Winnie

    ReplyDelete
  20. @Winnie: You're welcome. As for your tabs, I've taken over the discussion that you've started in Blogger Help Forum. I'll assist you there.

    ReplyDelete
  21. Does anyone have a fix for this so that it will work with the new threaded comments system?

    ReplyDelete
  22. Yo boy , I just wanted to know why does my reply comment box has a background color ? How do I remove it ? so that I can highlight only authors comment. I hope you understood what I mean .
    http://glittery-dreams.blogspot.com/2014/01/kadai-chicken.html
    check this out I hope you understand what I mean.
    Thank you

    ReplyDelete
    Replies
    1. Hi Dazzle,

      I see you (the author) left a reply comment - naturally the script will highlight this comment as well. Or am I getting you wrong? *screenshots might help*

      Delete
  23. Ho fatto qualche piccola modifica al mio blog;tutto bene, ma ora mi sono bloccato nella ricerca della stringa che individua la data.
    Sarò più chiaro.No la data di pubblicazione del post, ma la data che appare quando una persona pubblica un commento (quella vicino al cestino, quella dove da la possibilitàdi eliminare il commento ). Penso si debba modificare il codice che riguarda il comment permalink
    Il mio intento è quello di modificarne la grandezza. Spero in un Tuo aiuto.

    Ciao
    CSJ

    ReplyDelete
  24. I want to change the size of the data; the one depicted in the image at the beginning of the post.

    ReplyDelete
    Replies
    1. Hi there. I'm not sure if I'm following. Could you submit an annotated screenshot please?

      Delete
  25. How do I bring up the picture like my blog
    http://idtutorplus.blogspot.com/

    ReplyDelete

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