Adding Highly Customized Threaded Commenting System To Blogger

All the guys out there must be fed up with the laborious Commenting system of Blogger Platform that keeps on giving bugs and minor hitches. Though, Blogger is no longer a Sluggish Platform because now we have the new interface which has made almost everything possible but Blogger’s custom commenting system still lacks a lot. However, Threaded Commenting system has just given a new live to this platform. Threaded Commenting system is not a new thing for WordPress Users but for Blogger it’s a precious element. However, Blogger Team has not provided any customized CSS thread comment design. Therefore, lots of designers have coded their own styling for threaded comments. So, after lots of request from our loyal readers and followers today in this article we are introducing our custom Threaded comment design for Blogger Platform. 

Featured of MBL Thread Commenting System:

  • Unlike other threaded comment, it has a classy and attractive design.
  • It also displays the Thumbnails Besides each and every comment.
  • Easy to customize, built with ultra-fast CSS. 
  • It will also add a Threaded commenting system to the Mobile version of the blog.
  • It allows to highlights the Comments of the Author while other commenters won’t be highlighted.
  • Perfectly works on each and every browser, i.e. Google chrome, Internet explorer and Firefox. 

How To Install Threaded Commenting System In Blogger:

Just like our other Blogger Tutorials, this one is also assembled in such a way that it would hardly soak less than 15 minutes to complete the integration. Follow the instructions mentioned below.
  • Go to >> Template (Take backup of your theme in case anything went wrong).
  • Then Select Edit HTML >> Proceed.
  • Select (Tick) the “Expand the Widget” Box.
  • Now within your template, search for the following chunk of coding.
(Attention: You will find the following code twice in your template, but the Blogger team has replaced the first occurrence. Therefore, try to replace the code only once. However, replacing the both coding would not hurt either.) 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b:include data='post' name='comments'/>

  • Once you find the above code, replace it with the following.
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
         <b:if cond='data:post.showThreadedComments'>
           <b:include data='post' name='threaded_comments'/>
           <b:include data='post' name='comments'/>
       <b:if cond='data:blog.pageType == &quot;item&quot;'>
         <b:if cond='data:post.showThreadedComments'>
           <b:include data='post' name='threaded_comments'/>
           <b:include data='post' name='comments'/>

  • Now go ahead and save the template.

Customizing Threaded Comment With MBL Personalized Design:

  • Go to Blogger >> Template.
  • Edit HTML >> Proceed.
  • Search for ]]></b:skin> and above it Paste the following code.
/*--- MyBloggerLab --- */
#comments{margin:20px 20px 0;overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#1aa1e2}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #1aa1e2;border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#033F58}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#eeede7;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(;width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}

All Done: Save your Template, That’s it the Custom Blogger commenting system has been integrated and now visits your website and feels the difference yourself. Now you have the Reply to comment button, Deleting a comment option and etc.

From The Editor’s Desk:

We hope this commenting system would surly force your readers to make a comment on your site. It needs lots of modifications but its way better than the previous commenting system. If you face any difficulty feel free to ask. Take a lot care of yourself and your family till then its peace, blessings and happy commenting.

Announcement: We have Modified our Footer and now it is equipped with some useful information. Scroll Down a bit and see it in live action. Suggest would be more then welcome. 

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
Choose Wisely!


October 19, 2012 at 1:21 PM

great footer

Editorial Team MOD
October 19, 2012 at 1:29 PM

Thanks For Your Reviews. We will add more featured in the footer sooner. Peace

October 19, 2012 at 2:48 PM

The only thing that everybody always forget to say, including me of course, is that "not to add the css code above the b:skin", but replace the current ( #comments{ ... } and forth ). We say "add above the b:skin", if it's a tutorial to activate the comment.

And, take a look at mine if you'd like. It's just the same tutorial with yours above, but not realy. Mine is just a simple view. You know, a simple guy loves something simple. :)

Customize Threaded Comment Blogger

Just wanna say something brother. May God bless ya.. :)

Editorial Team MOD
October 19, 2012 at 2:52 PM

That Epic, Your is simple! I don't think so mate. It is more complicated then ours because you have added loads of coding of different Comments styles.

Yes you do pointed out a great thing but it is for those sites who are not using Threaded commenting system at all on there blog.

Hop this will clear a bit of misconception. Peace and Blessings

October 19, 2012 at 3:14 PM

I added loads of codes? I think mine is just as many as yours. It just takes css code, no more. Do i get your point brother? :)

Editorial Team MOD
October 19, 2012 at 3:33 PM

I mean! You Added Lots of designs people might get confused which one we should add. Other then that. Its cool ;)

October 19, 2012 at 3:54 PM

Well, maybe you're right. :)

October 19, 2012 at 5:44 PM

Awesome work syed bro but I like my comment system bcoz it highlights author comment and give an awesome look anyway Thnx for this :)

October 19, 2012 at 6:34 PM


October 19, 2012 at 9:42 PM

Good job Syed. Defense your words :)

However nice tutorial

Danial ^_^

October 19, 2012 at 11:02 PM

thanks @syed i need this tips thanks again you sharing this post today. really i like your blog bro :))

Rahul Kashyap

October 20, 2012 at 12:43 AM

Another great post; you realy rock the blogsphere

October 20, 2012 at 3:20 AM

@Syed Faizain Ali Lol U Copied The Threaded commenting systom from
I am Complaint to google for this

October 20, 2012 at 3:46 AM

I have this code like 6 times in my template.What should I do replace each one of them ?

October 20, 2012 at 3:47 AM

We all know that , but there's a change of javascript source also the css have been modified . So that's why i guess he hasn't given any credits to Paul (author - spiceupyourblog)

October 20, 2012 at 3:55 AM
This comment has been removed by the author.
October 20, 2012 at 3:55 AM

Even this comment system will highlight authors comment

Editorial Team MOD
October 20, 2012 at 3:55 AM

Thanks Tanmay For Defending and I Really Appreciate your Dedication.

Amman Dude I Told you before and i am repeating my words. We always share our own Content. We don't have any coding that is copied from any where else. When we use some coding from other websites we go give credits.

By the Way: << We know you are creating a Clone theme and therefore request you to take it down otherwise we have to complain to google. Peace

Editorial Team MOD
October 20, 2012 at 3:56 AM

Yes buddy! It will add a Author Tag to your Comment, Just Like Mine!

Editorial Team MOD
October 20, 2012 at 3:57 AM

Thanks Buddy your Reviews are like a piece of Gold. Peace

Editorial Team MOD
October 20, 2012 at 3:58 AM

Buddy! Replace it just once, It will work Fine. IF you still face problem. Email me your Template i will edit it for you. Peace

October 20, 2012 at 4:02 AM

Ok Bro

Editorial Team MOD
October 20, 2012 at 4:05 AM

Amman Shaikh, Dude You were one of our Quality Commentor but i don't know what had happened with you. We would love to see you Back here at MBL because we love and admire our Readers ;) Peace

October 20, 2012 at 4:10 AM

see this

Editorial Team MOD
October 20, 2012 at 4:16 AM

I Can See Your Site in that List Because you have Also Created a Similar Sub Bar which and its text is copied from MBL :)... Hope you will also remove it soon.

October 20, 2012 at 7:46 AM

Nice tutorial,only drawback is ,it highlight other's reply comments also. Although it gives a author tag.
For @ Amaan Shaikh, bro you should take look at Syed blog footer which I have never seen anywhere on web(awesome and unique).This shows the ability and web developing skills of Syed.Why do he need to copy others code.
To become a success and professional blogger there should be include each and every type of articles,because one day I was searching for related post widget on MBL but can't find.I was aware of thousands of related post widgets on web including MBT,But I wanted to see it on MBL.Now it has been published on MBL and its nice.I would have feel good if I finded this at that day.That is why there are similarity on the web that does not mean you are copying.By this way every probloggers are also copying.

October 20, 2012 at 8:51 AM

wow dude awesome!! You rock!! And you know what I LOVED?? The Author Tag that appear only on my comments!

October 20, 2012 at 9:04 AM

Thank you very much for this post.
Make The Most Out Of Facebook

Editorial Team MOD
October 20, 2012 at 9:15 AM

Thanks Buddy! We are pleased that you liked it. Stay Tuned. Peace and Blessings

October 20, 2012 at 10:55 AM

@Syed Please Design a template for me please

October 20, 2012 at 11:18 AM

@Syed Please tell the font u use in editing your images

October 20, 2012 at 12:32 PM

do not accept one offensive words for your readers.

October 20, 2012 at 6:02 PM

Sis you are right but wrong bcoz how he blame on anybody without knowing anything about that post :)

And sorry amann bro if you hurt I will remove my comment.

October 21, 2012 at 1:03 AM
October 21, 2012 at 2:26 AM

Bro not working correctly giving horrible look i just added the codes correctly.please you can check here and please tell how can i add this bcoz i need this .

October 21, 2012 at 2:26 AM

check here

Editorial Team MOD
October 21, 2012 at 2:32 AM

Dude Remove your OLD Commenting System Coding and then Apply the one which we have Shared. Peace

October 21, 2012 at 4:52 AM

bro i removed old comment system but still getting a bad result :(

Editorial Team MOD
October 21, 2012 at 5:37 AM

Hmm! Without seeing your theme's Coding i can't figure out the error!

October 21, 2012 at 7:34 AM

i did'nt found the code. in first step

Editorial Team MOD
October 21, 2012 at 7:54 AM

That't not possible because without that coding you cannot have a Comment box on your template.

October 21, 2012 at 8:16 AM

brother. You are right. Some templates have following code:

< b: include data= ' post ' name=' comments - picker ' / > (NO SPACES)


October 22, 2012 at 2:12 AM

Syed bro can I send you my template at your mail :)

Editorial Team MOD
October 22, 2012 at 2:27 AM

Yes Send on My Email Adress

October 26, 2012 at 10:06 PM

Hey Syed , I 've some problem here I follow your step and the comment does not appear I hope u can help me out !

I found 2 of them , I replace 2 of them with the code u given but still it doesn't work

Editorial Team MOD
October 27, 2012 at 12:58 AM

OH, This might be because you are using a custom Blogger Theme. If you want us to code your Commenting system please send your theme in XML Format At and over team will surely fix it. Peace

October 27, 2012 at 2:40 AM

yes indeed can I want to have your email please thanks !!! I can't get to your contact!!!

Editorial Team MOD
October 27, 2012 at 3:34 AM

Send me a Blank Message using our don't forgot to include your email address so i can reply to you. I Cannot share my email publicly

October 27, 2012 at 4:29 AM
This comment has been removed by the author.
December 1, 2012 at 4:23 AM

tried, but errors occuring.

January 14, 2013 at 4:35 AM


by the way this is my first blogpost ..

Do comment .. :D

April 26, 2013 at 11:30 PM

Bro its work but only two steps. I want to make like your. which does not stop reply button for several steps. its only 2 steps. what should i do

Editorial Team MOD
April 27, 2013 at 1:41 AM

We are using different commenting system and this tutorial is different.

July 10, 2013 at 9:31 AM

Thank's . You;re awesome.

October 13, 2013 at 1:31 AM

I want to extend the comments to more than 1 replies. Please give me link to a tutorial or code which can help me to achieve it.

Editorial Team MOD
October 14, 2013 at 4:56 PM

There's no such tutorial available that could support Child Comments. This is custom made script which we're using

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2016. MBL Networks, All Rights are Strictly Reserved.