Friday, October 7, 2011


Threaded commenting with Blogger native comments

Update January 18th 2012: A newer and easier to install version 2 here, you should consider using it.

Threaded commenting is a much wanted feature in Blogger. There are 3rd party commenting solutions with threading. Wordpress has threaded commenting built in. But what about threading in native Blogger comments?

When googling Blogger comments hacks, for completely other reasons, I came across this Threaded Comments in Blogger article. However the hack looked a bit complicated, template needed big changes, and I did not want that. And, according to some comments, installation to new templates was not straightforward. I thought, maybe it could be done with fewer changes and code that was easier to maintain. I felt like my mind could not rest before I figured out how to do it. :) So I had to find a solution, and finally I did, here it is. Thanks to Sham for the idea.

This hack works for the (current) layout templates (October 2011). Don't know about classic templates. Does not work with dynamic templates, because they display comments completely differently, getting their data dynamically from comments feed.

How to install Threaded comments

Update January 18th 2012: A newer and easier to install version 2 here, you should consider using it.

You must install my Highlight author comments and Reply to comments hacks first. After installing those, edit template html, and paste this just before </body>:

Data provided by - Download Raw

In the script there are two values, 300 and 20, that you can change to control the maximum indent amount (300 in my code) and the indent of one "step" (20 in my code). Defaults should be quite good. You can also change these values afterwards.

Save template and enjoy. It is almost like magic :)

Code "threads" the comments either by parsing link <a href="#link to comment"... or by parsing @username from message field. A reply containing "@username" is positioned after latest username's comment (which timestamp in earlier than in reply) or for immediate previous comment, if it is from username, on the list before reply.

If you just want to test how the threaded comments work, please don't do it in this post, I will delete totally irrelevant comments. But you can do the testing here: Playground for Blogger threaded comments. Thank you.
[Hide comments] - [Show comments]
Click on a single comment to hide/show its text


Lauren @ Hobo Mama said... [reply]

The threading isn't working for me at — do you want to take a look? (Sample post with reply-to comments: I'm wondering if I need to replace my previous hacks with yours first.

Lauren @ Hobo Mama said... [reply]

Just as an update, I tried replacing my Reply to Comments hack with yours, and that's working fine, but it's still not threading. You can email me through my profile if you'd like to help — thanks so much!

Lauren @ Hobo Mama said... [reply]

If I talk to myself long enough, I'll figure it out. ;) Thank you — I uninstalled all my hacks & installed yours in their place, and now it's good. You can delete these comments if you'd like!

MS-potilas said... [reply]

@Lauren @ Hobo Mama
I was asleep while you were hacking your blog (it was about 1 AM here in Finland). But really great you got it working on your own! Looks great on your blog, too. I'll leave your comments here, they are on-topic :)

Beben Koben said... [reply]

i'm interest about it...
first i have try threade comments in blogger
too much script :P
then i found it
threade comments in blogger II
and i found you, litle script, but so much unique ID for change...heheheh
i learn first ;)
good good

Flora Moreno de Thompson said... [reply]

Contemplating whether to try your hacks or to install IntenseDebate. I really love threaded comments.

Thanks for the ideas.

Wilderness Calling said... [reply]

Thank you so much for this info. I installed all three hacks into my blog and it works great. The only thing not working as expected is the highlighting of the comments when hovering. My replies show up with a different color background, but don't change color when hovering. I can live with it!!

MS-potilas said... [reply]

@Wilderness Calling
Hi, for the hover part, look at the CSS changes in this hack: Collapse and expand individual Blogger comments hack. Those do the hover thing. Change the colors to suit your blog. And if you like the collapse/expand functionality, you can install the whole hack. :)

Sara said... [reply]

Before I hurt my brain by trying to install these hacks, can you tell me whether they work with the mobile version of blogger? Or.. wait.. I will test in on my phone..

MS-potilas said... [reply]

Hi Sara,
I'm not familiar with the mobile version of Blogger, and I don't have such mobile devices to test it. I think mobile version has its own template(s), and the hack should be installed on the mobile template for it to run. If the script is not run (for any reason), then the comments are shown like normal Blogger comments.

Sara said... [reply]

Thanks, I had a nightmare with comments people left on my site via mobile, not showing on the web version because disqus was not itegrated with the mobile thing... (mmm.. not up with the terminology sorry). Now I'm having major disqus probs and tomorrow will uninstall it and try your way. I'll test it on my test blog first...

Kutha Ardana said... [reply]

I'm using your hacks on threaded comments on my blogger since a few weeks ago and running well. But today, it suddenly changed as before, even with tight spacings. I've checked all previous three sets of the code through Edit HTML, and no changes. What's wrong? Thank you for your many wonderful tips.

MS-potilas said... [reply]

@Kutha Ardana
it is because Blogger finally introduced their own threaded commenting today, and you are seeing it: It is activated, if you have embedded comment form and full feeds enabled. Unfortunately it does not "thread" old conversations.

If you want to continue using my threaded commenting, you should switch comment form placement to "popup" or "full page". (I'm using "full page" setting on my blogs). Or, go to settings, feed, Advanced mode and set "per post feeds" to "none". Either change disables Blogger's threading.

This Blogger's threading is still so new, that I haven't investigated, if it can be disabled some other way. And it does not work on all my old blogs... maybe there is some kind of transition period. We'll see.

Kutha Ardana said... [reply]

Thank you, I continue using your threaded commenting.

Sandy said... [reply]


This hack works very well, thank-you for sharing. I am currently testing it out before I apply it to my live blog and I notice that the whole comment doesn't fit, part of it gets cut off on the right. Could you tell me what I need to do to fix this?

Here is the link to my blog if you want to see :

MS-potilas said... [reply]


you could try the new version instead, it has a bit different layout, similar to Blogger threaded comments.

Or if you want to use this older version, you could try adding CSS styles for "dt.comment-author" and "dd.comment-body" and add them margin-right: 8px;, something like this:

dt.comment-author, dd.comment-body  { margin-right: 8px; }

Sandy said... [reply]


Oh I didn't notice the newer version, thanks I'll give it a try.

Sarah said... [reply]

I installed all three hacks that you said and none of them worked...mind helpin' a sista out? My blog is at
Thank you!


MS-potilas said... [reply]

@Sarah Hi, you have some customized template, they often require more work. I think you should try the new version of the threaded comment hack, it includes the two other hacks so you only need to install one. Link to the new version is at the beginning of this article.

Mr Admin said... [reply]

hi admin i ask if you can do a tutorial to replace popup reply with mobile comment form it means to make comment-form moves under comment item while pressing reply button and with this tutorial

MS-potilas said... [reply]

@Mr Admin If you mean the embedded comment form, then that cannot be done with this hack. Blogger's own two-level threaded commenting can move the embedded comment form. Problem is that javascript cannot "communicate" with the form (put text there), so this hack (and the newer version of it) can only use either Popup commenting or Full page commenting. I suggest you try the Full page commenting (and possibly with the newer version of the hack), if that would work ok in mobile devices.

Suba said... [reply]

I have been searching for the best testing blogs to make me update in software testing domain. I found your blog, after I read, I am very much impressed in the way you have expresses your thoughts, thank you admin to make my time useful.
Software testing training in chennai
Testing training in chennai

Ananya Krishnan said... [reply]

Good job in presenting the correct content with the clear explanation. The content looks real with valid information. Good Work

DevOps is currently a popular model currently organizations all over the world moving towards to it. Your post gave a clear idea about knowing the DevOps model and its importance.

Good to learn about DevOps at this time.

devops training in chennai | devops training in chennai with placement | devops training in chennai omr | devops training in velachery | devops training in chennai tambaram | devops institutes in chennai | devops certification in chennai | trending technologies list 2018

Aman CSE said... [reply]

Thanks for sharing such a wonderful blog on Machine learning.This blog contains so much data about Machine learning ,like if anyone who is searching for the Machine learning data will easily grab the knowledge of Machine learning from this .Requested you to please keep sharing these type of useful content so that other can get benefit from your shared content.
Thanks and Regards,
Top institutes for machine learning in chennai
best machine learning institute in chennai
artificial intelligence and machine learning course in chennai


Nice post. Thanks for sharing! I want people to know just how good this information is in your article. It’s interesting content and Great work.
Thanks & Regards,
VRIT Professionals,
No.1 Leading Web Designing Training Institute In Chennai.

And also those who are looking for
Web Designing Training Institute in Chennai
SEO Training Institute in Chennai
Photoshop Training Institute in Chennai
PHP & Mysql Training Institute in Chennai
Android Training Institute in Chennai

Post a Comment

Related Posts Plugin for WordPress, Blogger...
See the hack
for this dynamic
views icon: