Dec 1, 2015

Add Different Background For Author Comments in Blogger

data:blog.title
In this tutorial we will be adding a different background color to author comments in blogger comments to highlight the author comments.so that they will have a different background color, border, or anything that makes them stand out from the others. To achieve this, we need to add a code in the Blogger's template and to modify the style according to our preferences.The authors comments can be highlighted very easily so that the admin’s comments can be differentiate from the readers’ comments.By using this blogger tutorial the border, background color or font color and size etc of admin comment box can be changed and redesign according to your needs. Blogger's most awaited feature of threaded (Nested) commenting system.



Add Different Background For Author Comments in BloggerAs we know the most familiar comments system used in blogger field. You might have watched in many blogs around your browsing through internet. Let me quickly explain how about this author badge comment style is. When the blog author comments or replies using threaded comments then the comment is followed by a writer logo showing that the response was given by the writer you would definitely like this. Now start the tutorial and learn How To Change or Add Different Background For Author Comments in Blogger ?

How To Add Different Background For Author Comments in Blogger?

Step 1 - Go to Blogger Template >> Edit HTML.
Step 2 - By using search box,  Find </body> code.
Step 3 - Just above it, paste the following code:
<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$(function() {
function highlight(){
$('.user.blog-author').closest('.comment-block')
.css('border', '1px solid #FFA500')
.css('background','#F1F1F2 url("http://3.bp.blogspot.com/-uo-TVu-F0J4/VP1iZhA-UnI/AAAAAAAAAZE/qqdRA58JCUc/s1600/How%2Bto%2Bhighlight%2Bauthor%2Bcomments%2Bin%2BBlogger.png")')
.css('color', '#444444')
.css('font-size', '12px')
.css('padding', '10px');
}
$(document).bind('ready scroll click', highlight);
});
</script>

Possible Customization:

* Change the border thickness edit the 1px value
* Change the border style change the solid to dashed, dotted, outset, inset etc
* Change the border color replace the value #FFA500
* Change the background style replace the URL Blue you can also replace this URL with your default image.
* Change the background color just change the value #F1F1F2 by new hex code (use this tool to get      new hex code freely)
* Change the font color by changing #444444 to new hex code.
* Font size can be changed by changing 12px.

You can Use our Color Code Generator for choosing Color.

Step 4 - Hit on Save Template. That's it. You are Done.

If you want to add Admin Ribbon to Blogger Comments then read this post >>
So above guide is about How To Add Different Background For Author Comments in Blogger? I hope by this guide you can easily change or add different background for author comments in blogger? Now Enjoy the new look of author comments in blogger. If you are facing any problem then drop a comment below. Do share on Blogging communities.

2 comments:

  1. Replies
    1. Dear @Hasrul Hassan.
      It is work perfectly.
      Try once more carefully as mentioned above.
      If anyhow problem persist then you can send me copy of your template via mail. Let me do this job for you.
      mail me on s.param94@gmail.com

      Delete

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.