Highlight Threaded Author Comments on Blogger - The Simplest Way

If you have implemented the threaded comments on your blogger blog then it is a bit tricky to highlight the author comments. The template hacks are rarely available for this. I searched over the web and came up by solutions that involved using jQuery library for highlighting the author comments. But that would increase the page load time. So I decided to find the hack myself. After half an hour I came up with the simple solution written in pure JavaScript. This hack finds all the comments on the page and then detects if the comment has been posted by author or someone else. Then we add our custom class to highlight the comment posted by the author.
Note: This hack has been developed for the default blogger template. If you have customized the comment section, implementation may vary. You can check this implementation on this blog at this article.

JavaScript Code

To enable author comment highlighting, just add the following javascript snippet before the </body> tag of your theme template:

/*
 Highlight the author comments Hack by WebSpeaks.in
 Author: Arvind Bhardwaj
*/

window.onload = function(){
 //Get the parent 'ol' container for the comments
 var ols = document.getElementById('comment-holder').getElementsByTagName("ol");
 
 //Get the 'li' tags from the very first 'ol' list
 //Each 'li' contains only one comment
 var lis = ols[0].getElementsByTagName("li");
 
 //Check all 'lis'
 for(x in lis){
  //cite tag in the 'li' contains the comment author's URL
  var cite = lis[x].getElementsByTagName("cite");
  
  //get the HTML content of the cite tag
  var content = cite[0].innerHTML;
  
  //Check if the HTML contains your blogger ID
  //Replace 03106934539133356485 with your own blogger ID
  if(content.indexOf('03106934539133356485')!==-1) {
   //Add custom class to the parent 'li'
   lis[x].className += " comment-body-author";
  }
 }
}

CSS Class

.comment-body-author{
 background: none repeat scroll 0 0 #E3EDF4 !important;
 border: 1px solid #9DC5F9;
 border-radius: 7px 7px 7px 7px;
 margin: 10px;
 padding: 5px 10px;
}