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;
}

Written by Arvind Bhardwaj

Arvind is a certified Magento 2 expert with more than 10 years of industry-wide experience.

Website: http://www.webspeaks.in/

5 thoughts on “Highlight Threaded Author Comments on Blogger – The Simplest Way

  1. Hello, thank you very much for this tip. Im using a custom template wich have teh default threaded comments, but this trick doesnt work.

    The template is this one:
    http://www.premiumbloggertemplates.com/downloads/eudora/

    Im not experienced in code, but seems that your code doesnt get very well what are supossed to be the admins comments. Probably because the custom theme use a different “tag” or variable for that. But as I said, I have no idea really. Would you mind on checking and give a hand on that? Is the only thing I cant customize on my blog by myself, the rest of stuff isnt too hard with a bit of help of firebug.

    Thanks in advanced, regards.-

Comments are closed.