January 14, 2012

Widgets

Blogger Threaded Comments For Custom Templates


UPDATE: If you would like to remove thread comments then read: Remove Threaded/Nested Commenting

blogger threaded commentsJust yesterday we shared a tutorial and announcement on Blogger's most awaited feature of threaded (Nested) commenting system. We shared how to enable threaded comment style in official blogger templates but that method don't work on custom templates which are downloaded from un-official designers. Almost 75% of blogger users prefer using un-official templates and since this feature can't simply be resisted therefore we took some time to install it safely and apply all required codes to make this feature function properly after a lot of trial and errors. The tutorial below is first time shared and will offer the easiest way to add threaded commenting style to blogger blogs. I had received some JavaScript codes from our Malay speaking Fellow bloggers and Indian Guest authors which was producing the same effect using scripts created by third party developers but the reason I delayed those guest posts was due to their browser load time conflict issues. I am glad Blogger team provided us with a much neater and fast loading script that has now surely pushed blogspot blogs to the next level. Lets get to work then!

Credits

This is again a first time shared tutorial guide by mbt blog. These scripts and style sheets are provided only by MBT blog therefore if you wish to share this tutorial with your readers and friends then kindly link back to this post as the only favour in return.
Do also check our previous tutorials on customizing Blogger comment box. Note that those tutorials will need to be updated to make it work with this new feature.

Apply Threaded Comments To Custom Templates

The steps are extremely easy and you just need to follow it carefully.
  1. Go To Blogger > Design > Edit HTML
  2. Backup your template
  3. Click "Expand Widget Templates" box
  4. Search for this code,
(Info: This code initially appeared twice but blogger team has officially replaced the first occurrence, therefore we just need to add it once as shown here. It has become now more easy than expected.)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b:include data='post' name='comments'/>
</b:if>
     5.   Replace it with this,  

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
         <b:if cond='data:post.showThreadedComments'>
           <b:include data='post' name='threaded_comments'/>
         <b:else/>
           <b:include data='post' name='comments'/>
         </b:if>
       </b:if>
       <b:if cond='data:blog.pageType == &quot;item&quot;'>
         <b:if cond='data:post.showThreadedComments'>
           <b:include data='post' name='threaded_comments'/>
         <b:else/>
           <b:include data='post' name='comments'/>
         </b:if>
       </b:if>

      6.   Save your template
      7.    Done!

Visit your blogs and you will find a Reply link along with a delete link below each comment. Clicking the reply link will open the comment form just below that comment so that you could post a threaded reply. It will work just perfectly. :)

Customizing Threaded Comments

The threaded comment style will override your current comment style format. In order to customize the comment body completely to suit your preferences I am sharing below the CSS code required to edit the style sheet for the comment block.
Your template will include the following CSS code automatically inserted by blogger:
<b:includable id='threaded_comment_css'>   <style>
.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
}
.comments .comments-content {
  font-size: 13px;
  margin-bottom: 16px;
}
.comments .comment .comment-actions a {
  padding-top: 5px;
  padding-right: 5px;
}
.comments .comment .comment-actions a:hover {
  text-decoration: underline;
}
.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: left;
}
.comments .comments-content .inline-thread {
  padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
  margin: 8px 0px;
}
.comments .comments-content .comment-thread:empty {
  display: none;
}
.comments .comments-content .comment-replies {
  margin-top: 1em;
  margin-left: 36px;
}
.comments .comments-content .comment {
  margin-bottom:16px;
  padding-bottom:8px;
}
.comments .comments-content .comment:first-child {
  padding-top:16px;
}
.comments .comments-content .comment:last-child {
  border-bottom:0;
  padding-bottom:0;
}
.comments .comments-content .comment-body {
  position:relative;
}
.comments .comments-content .user {
  font-style:normal;
  font-weight:bold;
}
.comments .comments-content .icon.blog-author {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
  margin-left:6px;
}
.comments .comments-content .comment-header,
.comments .comments-content .comment-content {
  margin:0 0 8px;
}
.comments .comments-content .comment-content {
  text-align:justify;
}
.comments .comments-content .owner-actions {
  position:absolute;
  right:0;
  top:0;
}
.comments .comments-replybox {
  border: none;
  height: 250px;
  width: 100%;
}
.comments .comment-replybox-single {
  margin-top: 5px;
  margin-left: 48px;
}
.comments .comment-replybox-thread {
  margin-top: 5px;
}
.comments .comments-content .loadmore a {
  display: block;
  padding: 10px 16px;
  text-align: center;
}
.comments .thread-toggle {
  cursor: pointer;
  display: inline-block;
}
.comments .continue {
  cursor: pointer;
}
.comments .continue a {
  display: block;
  padding: 0.5em;
  font-weight: bold;
}
.comments .comments-content .loadmore {
  cursor: pointer;
  max-height: 3em;
  margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
  display: none;
}
.comments .thread-toggle {
  display: inline-block;
}
.comments .thread-toggle .thread-arrow {
  display: inline-block;
  height: 6px;
  width: 7px;
  overflow: visible;
  margin: 0.3em;
  padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAA DEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC&quot;) no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAA DEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==&quot;) no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
  float: left;
  width: 36px;
  max-height: 36px;
  overflow: hidden;
}
.comments .avatar-image-container img {
  width: 36px;
}
.comments .comment-block {
  margin-left: 48px;
  position: relative;
}
/* Responsive styles. */
@media screen and (max-device-width: 480px) {
  .comments .comments-content .comment-replies {
    margin-left: 0;
  }
}
  </style>
</b:includable>
If you want a comment style just like the one on MBT then replace the above CSS code with the following one:
<b:includable id='threaded_comment_css'>
  <style>
/*------------- START of Blogger Threaded Comments By MBT -------------*/

.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
}
.comments .comments-content {
  font-size: 12px;
  margin-bottom: 16px;
font-family: Verdana;
font-weight: normal;
text-align:left;
line-height: 1.4em;
}
.comments .comment .comment-actions a {
background:#1F9EE5;
cursor:pointer;
color:#ffffff;
padding:2px 3px; margin-right:10px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:9px sans-serif; border:1px solid #1F9EE5;

}
.comments .comment .comment-actions a:hover {
  text-decoration: none; background:#5AB1E2; border:1px solid #5AB1E2;
}
.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: none;
}
.comments .comments-content .inline-thread {
  padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
  margin: 8px 0px;
}
.comments .comments-content .comment-thread:empty {
  display: none;
}
.comments .comments-content .comment-replies {
  margin-top: 1em;
  margin-left: 40px;   font-size:12px; background:#EBF5FE;
}
.comments .comments-content .comment {
  margin-bottom:16px;
  padding-bottom:8px;
 
}
.comments .comments-content .comment:first-child {
  padding-top:16px;
}
.comments .comments-content .comment:last-child {
  border-bottom:0;
  padding-bottom:0;
}
.comments .comments-content .comment-body {
  position:relative;
}
.comments .comments-content .user {
  font-style:normal;
  font-weight:bold;
}
.comments .comments-content .icon.blog-author {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
  margin-left:6px;
}
.comments .comments-content .comment-header,
.comments .comments-content .comment-content {
  margin:0 0 8px;
}
.comments .comments-content .comment-content {
  text-align:none;
}
.comments .comments-content .owner-actions {
  position:absolute;
  right:0;
  top:0;
}
.comments .comments-replybox {
  border: none;
  height: 250px;
  width: 100%;
}
.comments .comment-replybox-single {
  margin-top: 5px;
  margin-left: 48px;
}
.comments .comment-replybox-thread {
  margin-top: 5px;
}
.comments .comments-content .loadmore a {
  display: block;
  padding: 10px 16px;
  text-align: center;
}
.comments .thread-toggle {
  cursor: pointer;
  display: inline-block;
}
.comments .continue {
  cursor: pointer;
}
.comments .continue a {
  display: block;
  padding: 0.5em;
  font-weight: bold;
}
.comments .comments-content .loadmore {
  cursor: pointer;
  max-height: 3em;
  margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
  display: none;
}
.comments .thread-toggle {
  display: inline-block;
}
.comments .thread-toggle .thread-arrow {
  display: inline-block;
  height: 6px;
  width: 7px;
  overflow: visible;
  margin: 0.3em;
  padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC&quot;) no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==&quot;) no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
  float: left;
  width: 36px;
  max-height: 36px;
  overflow: hidden;
}
.comments .avatar-image-container img {
  width: 36px;
}
.comments .comment-block {
  margin-left: 48px;
  position: relative;
}
/* Responsive styles. */
@media screen and (max-device-width: 480px) {
  .comments .comments-content .comment-replies {
    margin-left: 0;
  }
}
/*------------- End of Blogger Threaded Comments By MBT -------------*/
  </style>
</b:includable>

Make these changes:
Tip: Use our color chart or color generator tool for making these changes
  • To change the background of Reply button in Active mode edit 1F9EE5
  • To change the background of Reply button in Mouse Hover mode edit 5AB1E2
  • To change the Font colour of the Reply text edit ffffff
  • To change the background color of the Reply comments container edit EBF5FE
Save your template and give your blog another glance to see it in exciting new shape. :)

Need Help?

You are most welcomed to ask for any technical help if needed. The tutorial is extremely easy to understand and must work on all blogger templates. I will sharing beautiful new themes for this updated comment section look. Stay tunes for a lot of new tutorials. Peace and blessings pals. :)


If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

218 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. Replies
    1. dude it's not working in monop blogger template can you make a brief tutorial on how to customize in monop
      plz

      Delete
    2. dude now it's working pefeckt for monop template thanks very much

      Delete
    3. dude it's working for me well but my blogger blocquote style is showing in the comment section how to change it into default plz help me!
      http://softechnogeek.blogspot.com

      Delete
    4. yes,me too tried this..looks great on my blog,

      www.StudentsCrunch.com

      Delete
  2. Thanks Man. Done. Applied in My Blog.
    http://22december.blogspot.com

    ReplyDelete
  3. thanks mohammed for this post its really great thanks

    ReplyDelete
  4. What is the code to Mark the names (Commenter) in some other color like Blue or Green ?

    ReplyDelete
    Replies
    1. Buddy replace this:

      .comments .comments-content .user {
      font-style:normal;
      font-weight:bold;
      }


      with this:

      .comments .comments-content .user {
      font-style:normal;
      font-weight:bold;
      font-color:#0080ff;
      }


      Edit font-color:#0080ff; to apply a color of your choice.

      :)

      Delete
    2. Hi Mohammed thanks this what i need to change on css, I deleted my comment to change the comments but it doesn't deleted all include the avatar but it shows delete by the author hmm.

      Btw how to change the time and date?
      Thanks

      Delete
    3. @auren

      The date time font styles can be changed using:

      .comments .comments-content .datetime {
      margin-left:6px;
      }



      You could not completely remove the comment because the rights lie with blog admin. It is default in all blogger templates.

      Delete
    4. Hi Mohammad

      What I mean is the time not the style, since the time that I reply comment is different with the time on my laptop.

      I realy appreciate your help.
      Thanks

      Delete
    5. Auren that could be a system fault. Kindly check if your laptop is charged properly and up to time.

      Delete
  5. Trouble!!! please look at the following page.

    http://samsexy98downloads.blogspot.com/2010/12/makeover-of-our-site.html

    The gap between the avatar icon & the name is messed, reply button is going somewhere & how all became italic??

    ReplyDelete
    Replies
    1. No problem sam. Do this:

      For avatar replace this:

      .avatar-image-container {
      margin-left:15px;
      }


      with this:

      .avatar-image-container {
      margin: 0 10px 0 15px;
      }

      your blockquote has an italic style since the class used for content body also uses a blockquote therefore the class is overridden. Simply replace this:

      .comments .comments-content {
      font-size: 12px;
      margin-bottom: 16px;
      font-family: Verdana;
      font-weight: normal;
      text-align:left;
      line-height: 1.4em;
      }



      with this:

      .comments .comments-content {
      font-size: 12px;
      margin-bottom: 16px;
      font-family: Verdana;
      font-weight: normal;
      text-align:left;
      line-height: 1.4em;
      font-style:normal!important;
      }


      If it did not work then replace

      blockquote{font-style:italic; color:#555; padding:10px}

      with this

      blockquote{font-style:normal; color:#555; padding:10px}

      Cheers :>

      Delete
    2. Yea needed to change the blockquote to normal. Others things looks fine. Thanks.

      Now some additions would be great like collapse all comments, "Admin" comments style in this view.

      Delete
    3. My Skype Comment Smileys provided by you goes though :(

      Delete
  6. On my blog answer button does not work, it is displayed but does not work, what would it be?

    Blog: http://www.euusoeadoro.com.br

    ReplyDelete
    Replies
    1. Please apply the codes to your test blog first and then implement it on your main blog

      Delete
  7. Thanks MBT, Finally you make it possible for those who customize their blogger templates in comment sections and it work great.

    ReplyDelete
  8. Thank you so much Bro for sharing this and it is really amazing.. May Allah's mercy and blessings be unto you.. :)

    ReplyDelete
  9. Hi, Muhammad, I want to ask you something, that how to can I apply blogger Threaded Comment on your Monop Template, I have also removed your /*--------------MBT Reply Link --------------*/
    section and code for the Reply button but the it does not working,,?
    what should I do?

    ReplyDelete
  10. Hai Brother How are you?

    Always you top in blogger tutorial, i think you are release first tutorial of Blogger threaded Comment section customization. Thanks Brother...

    I need your help about this tutorial or i will sent my template to your mail...

    waiting for your reply...

    Thanks brother

    ReplyDelete
  11. Thanks, this worked for me, and I find that customizing the comment box is easier now with your custom code :)

    ReplyDelete
  12. I did not work, please help, this is my blog link http://blogmuhammad23.blogspot.com/

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
    2. If you want to see the code in its entirety, click this link http://www.creativebloggingideas.com/wp-content/uploads/2011/07/Google-Plus-Blogger-Template.zip

      Delete
  13. Is there any way to put in a line of code so that there is a separator line in between each comment? I've scoured Google and looked everywhere but can't find anything.

    I did however try the custom code on my threaded comments and it worked great, thanks!

    ReplyDelete
  14. @Mohammad : i wants to set boder to whole comments box and all replyes area like your this site...Please help me ..

    Btw...today you have shared very really nice tutorial, It helps me lots.

    Thanks,

    Facebook Hacking

    ReplyDelete
  15. @Mohammad
    Please take a look at my blog this new feature is not working on my blog!

    Please help
    Regards,
    Abdulsalam

    ReplyDelete
    Replies
    1. Plz Mustafa Reply to me i have a great problem!

      Delete
    2. You have too many blogs? Which blog are you talking about? Please share its url.

      Delete
    3. Thanks brother for replying my blog is http://sharethetricks.blogspot.com

      Delete
    4. still waiting for your reply!
      Plz plz plz reply Mustafa

      Delete
    5. Hi Abdulsalam,

      We have observed that you are publishing all our tutorials and have adopted all our copyrighted style sheets with out permission. You have neither attached credits. This is in total violation of our Copyrights. We therefore request you to kindly link back to MBT for the template theme and attach a link for the widgets you have shared so far.

      We will continue helping you with your problems only if we know our free help is respected.

      Delete
    6. I can't believe how the hell he managed to copy that much. Almost every thing is same like our MBT. I can literally call that a Replica of MBT.

      Bad Deal Abdulsalam. It will take you no where.

      Delete
    7. i will brother will do it today after jumma
      btw i designed it completely tommorow so i forgot to give credit

      regards,
      abdulsalam

      Delete
    8. Muhammad plz see my footer i gave the link back to you!!

      Delete
    9. still waiting for your reply please help me

      Delete
  16. It just made my blogger comment style worst.
    Earlier I had http://img38.imagefra.me/i51e/12c3_d80_u0.png
    Now I have worst look than before.Please help.

    My blog : freen8apps.blogspot.com

    ReplyDelete
    Replies
    1. @shivam

      Where are you facing problem? Shivam kindly first try these on your test blog and then apply it to your main blog

      Delete
    2. Firstly,I have two occurrences of the following code on my blog :

      "

      "

      I had to replace both the occurrences to get the reply button.

      Secondly,My blog's comments styling changed to a basic one,I want Reply button along with my previous styling.

      I'm loading back my previous styling for now.

      Please help!!

      Delete
  17. Great post dear friend... Applied easily without any trouble in to my blog... :-) Thank you..

    ReplyDelete
  18. Dear Friend, I didn't change site feed into full.. Now too it is "until jumb break" only. But working this commenting thread clearly.. Do i wanna change it? Or let it be like this? Actually what is that option mean?

    ReplyDelete
    Replies
    1. The code is constructed such that it will work with any option whether you set it to full or not.

      Delete
    2. Thanks For your reply friend..

      Delete
  19. PLEASE HELP Me...

    I am really happy with this tutorial my friend, but it won't work with mine. Yes I can see the reply and delete option but the reply link won't just work at all. I do not know what happened, but examining my codes there are already the codes for showthreadedcomments there...please help me Sir.

    ReplyDelete
    Replies
    1. As I said there are two occurrences of the code I shared above and the first one is already present in your blog so you must find the second one and add the code there.

      Delete
    2. There is only one code there and it appear as it was expected to look like, but the problem is the 'reply' wont work at all...

      Delete
  20. Hi, Please make a tutorial about How can we highlight the Author Comments.

    ReplyDelete
    Replies
    1. I've worked with this feature since announced by Blogger Buzz. We can customize it easily through CSS but we need another javascript to highlight admin's comment. BTW it has small icon that belong to admin... just stay with it.

      Also noticed the comment form message is not there anymore.

      Delete
  21. I tried it and the first code worked perfectly, but the "Comment Author Background Color" function does not work anymore hence my blog looks unpleasant to the eye. :(

    ReplyDelete
    Replies
    1. I will be writing posts on Author comment styles and other customization tips within this week :>

      Delete
    2. Thank you so much. Looking forward to that.

      Delete
    3. This comment has been removed by the author.

      Delete
  22. Bro.. I will send you mt template via Email please check it once and reply coz I'm unable to edit that template please....

    ReplyDelete
    Replies
    1. Unfortunately Arpith I wont be able to provide individual help due to my job and projects. Would love to do that but I am just one. :)

      Delete
  23. facebook style on my blogger comment :D

    ReplyDelete
    Replies
    1. im indonesian blogger (themasdoyok.com)
      just be your friend...

      Delete
    2. Welcomed brother. I liked your design. Keep it up :)

      Delete
  24. nice tutorials muhammed..thanks for sharing this.Let me try this on my very own blog,

    www.StudentsCrunch.Com

    ReplyDelete
  25. @Admin There is issue with threaded commenting ! When you open a post in Firefox it jumps to comment box and does not stay at top pf page !

    ReplyDelete
    Replies
    1. Its working fine on our browser pal. Kindly see if your browser is an updated one

      Delete
    2. same problem for me! with ie or firefox when opening a post it jumps to the comment instead of the top of the page. Is there a way to correct that?

      Delete
    3. the bug appears only if there's a comment. If not, the post page display normaly.

      Delete
    4. Is there any coding you've done differently that might make it jump to comments? I just checked on mine (I'm updating comments section now using both Chrome and Firefox) and neither have issues. I have a bunch of comments on my posts too.

      Delete
    5. Hi AHBrowne, i see the same phenomenom with your blog at this page for example : http://www.ahbrowne.com/2012/01/question-of-day-january-13-2012.html

      Delete
    6. Have you checked your browser updates then? Because no matter what one I use, it doesn't happen to me, so I'm curious then if it's your browser like he said above.

      Delete
  26. Just a note for you. The Facebook box code that you have doesn't show up with this new system. I had to figure out where to place it now to show up, so I've got it right above: (hopefully code will show up) class='comments-content'

    But if you want it at the bottom of the posts like before, look for:
    class='comment-footer' (mine was the second one the codes found).
    And put it directly below that paragraph of code. I couldn't figure out WHY the box hadn't been showing up all week and then I realized that with the changes, they changed all that. Hope it helps someone else avoid my aggravation!
    Thanks for the awesome coding, and help! I was going crazy because I'd spent two weeks making some great codes, and then this change messed me up. :p

    ReplyDelete
  27. I used this in my blog and it worked just fine! You are awesome!

    ReplyDelete
  28. Hey Muhammad. When I visit blogs who has threaded comments enable. Automatically take me to bottom of page? Why??

    ReplyDelete
  29. Thanks I Applied it on my website check it www.mybloggerlab.com

    ReplyDelete
  30. There is a problem sir check this post i had done 2 testing comment in it,but you can see there is no line separating 2 comments from it so please could you tell me what should i do here is the link http://www.mybloggerlab.com/2012/01/adding-elegant-rss-email-subscription.html

    ReplyDelete
  31. I used in my blog and It looks awesome.
    Sample here
    http://22december.blogspot.com/2012/01/status-quo-its-complicated.html

    ReplyDelete
  32. My threaded comment: http://www.shopdownload.info/2012/01/wenovo-png-psd-viewer.html

    ReplyDelete
  33. UPDATE

    The Pages are jumping straight towards Comment box. This is happening on even official blogger templates. I am sure blogger team will solve the xml codes just the way they sort out Light Box view issues. So please be patient for some days till they figure it out.

    ReplyDelete
  34. To add a separator between two comments simply do this:

    Replace this

    border:1px solid #5AB1E2;

    with this

    border-bottom:1px solid #5AB1E2;


    Use a darker colour instead of #5AB1E2

    ReplyDelete
    Replies
    1. Thanks! After a little bit of troubleshooting, I found the line of code where to insert this to get separator lines in between comments. It looks great!

      .comments .comments-content .comment-replies {
      margin-top: 1em;
      margin-left: 36px;
      background:#EBF5FE;
      border-bottom:1px solid #5AB1E2;

      Delete
  35. Thanks !
    I'll waiting for last version of thread comments !

    ReplyDelete
  36. How to fix time-zone problem? When I write this comment it's 8:24 PM at my country..

    ReplyDelete
  37. This comment has been removed by the author.

    ReplyDelete
  38. it is amazing trick brother, every one should try this, ur rocking
    thanks a lot to MTB team for providing such amazing platform for blogger user..

    your biggest friend
    umesh tarsariya (^-^)...

    ReplyDelete
  39. Thanks so much - this is exactly what I was looking for!

    ReplyDelete
  40. i cant find the code. the code seems not available. Is there any other way? my blog is http://pupoamoi.blogspot.com/ help me please. Thanks

    ReplyDelete
  41. it does not work.here is my blog www.edutechnology.net

    ReplyDelete
    Replies
    1. how we know that It is Working or not......... Even You have "0" Comments!!!

      Delete
  42. It doesn't work for my blog even though the codes are exactly the same as your tutorial. Could you have a look see?

    http://nickphil67.blogspot.com/2012/01/hot-down-and-out.html#comment-form

    I would be much appreciative :D

    ReplyDelete
  43. DOes not Working i have used all settings you have done!!!!!!!!!

    ReplyDelete
    Replies
    1. http://shar3zone.blogspot.com/2012/01/blog-post_17.html

      Delete
    2. I have SOlved My Problem!!!!!!! Anyways Thanks For Informing About Threaded Coment System!

      Delete
  44. The individual post URL is jumping straight to the comments box in Google Chrome too. When Blogger fix it, will the code require editing?

    ReplyDelete
    Replies
    1. I think Blogger Having gr8 Team and i am Hoping That Soon Blogger Will resolve This Problem!!!!!!

      Delete
  45. UPDATE
    Since it is a newly introduced feature therefore it is natural that it will involve some bugs. I will write a post tomorrow where we all will need to inform Blogger developers to sort out the problems related to it.

    At present The Page Jumps straight at the Comment box and I could not find a way to solve it. This is happening only on Firefox and not with Chrome or IE. Introducing a script was further messing up other elements on the blog. Therefore it would be best to draw bloggers attention towards this problem with a Feedback form. We will provide them tomorrow inshAllah.

    ReplyDelete
    Replies
    1. There must be a good news waiting for you in your inbox relating to this threaded comments. Please check it :)

      Delete
  46. I got a very big Problem, I just want some solution for my blog. It is Too Heavy, and it is causing big problem for me. I want posts to appear in 2nd page, and i want first page to be without posts, i will add something else on first page, like a simple html welcome page or something like that. How to do that in blogger?? minimum post count is 1 per page, i simply want it to not appear in homepage, if i remove the post widget, it is deleted for all pages. what is the solution??

    Here is my blog http://www.mobilemoviesite.com, i want some good solution for it to be lighter like a simple html page. hope you understand.
    thanks for your expected help.

    ReplyDelete
  47. It worked perfectly!:D
    Thank you so much :)

    ReplyDelete
  48. Update
    Find out why we removed thread comments?

    @MoviezMobile

    I fully understand what you want. Since blogger is a content management system based on dynamically updated content therefore you can't get rid of the standrads set for it. Whether you use a blog of Forum, you can't simply keep the homepage blank and use it as a welcome page.

    You can try non-recommended tweaks like creating a welcome message on a post and then to update next posts you simply give them an old date and always update the welcome post to current date. This way if you set homepage to one Post view per page then the welcome message will always appear at homepage and your new posts (forcibly forced to old dates) will appear on next page. But this is a wrong way to run a blog keeping SEO strategies in mind.

    If you want a welcome message and want to show data on other pages then you will need to buy hosting and create a new site and connect your blog to it. SEE our services page for instance

    To do that please read Why we migrated our server to HostGator?


    @sam
    Sure I checked and replied. Thank you :)

    @Cherry
    Most welcomed. :)

    ReplyDelete
  49. Mohammad are you taking about the latest mail I sent because I didn't receive your reply :(

    ReplyDelete
  50. i got errors and can not view like your's what you have shown in your pic.

    ReplyDelete
  51. cool youh :)
    look my reply comment
    http://zaid-info.blogspot.com/2012/01/software-akuntansi-terbaik-2012.html

    ReplyDelete
  52. The reply button does not work for my blog which is highly customized. Thanks.

    icandothat

    ReplyDelete
  53. Hi ! Sorry for my english i'm french :)
    How could i remove the link on the comment author ?
    Before threaded comments it was easy, but now...

    ReplyDelete
  54. THANKS SO MUCH FOR THIS!!
    WORKS GREAT!!!

    Although there is a change with the font and some details.

    ReplyDelete
  55. Hi, I tried adding that on my blog http://www.quasarworld.blogspot.com but never found the css to replace, help!

    ReplyDelete
  56. Hey...I successfully added threaded comments to my blog...
    but I couldn't find a css code to replace...please help

    ReplyDelete
  57. I did as u said for getting th threaded comments ..... When i click the reply button i dont get the comment box below that ...

    ReplyDelete
  58. I'm having problem's that I think are related to Intensedebate.

    I use this system on my blog and now I can´t find the correct html code to change in order to accept threaded comments on the posts previous to my Intensedebate installation.

    Can anyone help me find a solution? Google can't l-o-l

    ReplyDelete
  59. Sir its not working on my template. please fix the bug for me , i will be realy thankful to you please check my template error http://707monty.blogspot.com

    ReplyDelete
  60. Thanks a lot! Finally after reading a lot of tutorials, this one nailed it!!! God bless you!

    ReplyDelete
  61. Threaded comments works like a charm on my blog, except for author names with accent or apostrophe like O'Brian as you can see here at the bottom page : http://un-plan.blogspot.com/2009/12/aliens.html

    Would you know one good solution to solve this please ?

    ReplyDelete
  62. The threaded comments has stopped working on my blog. Any fix? How do I get the default styles and comment form?

    ReplyDelete
  63. Hm, I add your CSS incudable, but nothing changes. Oo

    My code already had the needet changes but I wanted to customize my comment system. But nothing happens. ,( Any ideas what I forget?

    ReplyDelete
  64. i am unable to get it please help me friend!!!

    ReplyDelete
  65. its not working...www.hdwalle.com is my site

    ReplyDelete
  66. this is not working for my blog http://www.xamportal.com .. please help me..please

    ReplyDelete
  67. @Mohammad Mustafa Ahmedzai

    Dear..
    Your are Great couscous You are making a very very Important site for ant Beginner Website Designer....

    http://www.wix.com/smkabir019/rainbow

    ReplyDelete
  68. Its Working Fine In My Blog. Just Check the Comment Javascript in Custom Template that effects the threaded comment system. Its not a fault of Blogger team.

    ReplyDelete
  69. seo forum

    Great post I must say.. Simple but yet interesting and engaging.. Keep up the awesome work!

    ReplyDelete
  70. Thank you SO much... I couldn't get replies / threads to show up on my blog at all until I used your code. Much appreciated!

    ReplyDelete
  71. This comment has been removed by the author.

    ReplyDelete
  72. working great.. thank you very much ^^

    ReplyDelete
  73. This comment has been removed by the author.

    ReplyDelete
  74. Hi Mohammed, I can't actually find the coding to replace it. My posts section of coding is as follows. Are you able to please tell me where to insert? Or should it be somewhere else?

    /* Comments
    ----------------------------------------------- */
    #comments h4 {
    margin:1em 0;
    font-weight: bold;
    line-height: 1.4em;
    text-transform:uppercase;
    letter-spacing:.2em;
    color: $sidebarcolor;
    }
    #comments-block {
    margin:1em 0 1.5em;
    line-height:1.6em;
    }
    #comments-block .comment-author {
    margin:.5em 0;
    }
    #comments-block .comment-body {
    margin:.25em 0 0;
    }
    #comments-block .comment-footer {
    margin:-.25em 0 2em;
    line-height: 1.4em;
    text-transform:uppercase;
    letter-spacing:.1em;
    }
    #comments-block .comment-body p {
    margin:0 0 .75em;
    }
    .deleted-comment {
    font-style:italic;
    color:gray;
    }
    #blog-pager-newer-link {
    float: left;
    }
    #blog-pager-older-link {
    float: right;
    }
    #blog-pager {
    text-align: center;
    }
    .feed-links {
    clear: both;
    line-height: 2.5em;
    }



    Many thanks

    ReplyDelete
  75. This comment has been removed by the author.

    ReplyDelete
  76. Assalamualaikum wr.wb <--i'm indonesian
    I have not "b:includable id='threaded_comment_css'" but my threaded comment, reply are working, but the css comment code not automaticly inserted to my html because i use custom template, and when i paste below " ]]>*b:skin*>*" it doesn't work too!, so what should i do???

    My Blog

    Thanks!

    ReplyDelete
  77. it's work!!! Thank you very much!!

    ReplyDelete
  78. Nice post keep it up
    by
    www.amditechnology.com

    ReplyDelete
  79. This thing is great, just what I was looking for, thanx!

    But... after pasting the new code something bad happened - the font size of the comments switched back to being big, while just minutes earlier I managed to make them smaller... I have no knowledge of CSS (I asked a friend to help me out), so I don't know what to do :(

    ReplyDelete
  80. This comment has been removed by the author.

    ReplyDelete
  81. My blog is www.nimilazamzspot.tk I activated threaded comments, but Reply button in desktop version doesn't work. It just gives javascript :; Please help me with this.

    ReplyDelete
  82. @Mohammad Mustafa Ahmedzai

    I want threaded comments with my template's comment style.

    How I can get that?

    ReplyDelete
  83. Can't find "b:includable id='threaded_comment_css'" on my blog either, though the threaded comment does work. Any idea where I should insert the code? Thanks,
    Angie

    ReplyDelete
  84. The deep you dig into the subject and give us the accurate data is appreciable.
    Web Development

    ReplyDelete
  85. its not working to my blog www.hdwalle.com

    ReplyDelete
  86. Doesn't work on my blog either. I have to resort to using disquis for the threaded feature.

    ReplyDelete
  87. Thank you!! It's work on my blog :D (http://revo-reva.blogspot.com)

    ReplyDelete
  88. This comment has been removed by the author.

    ReplyDelete
  89. Hey Mohammad Bro
    I applied Your Css style to my blog.But the problem is that reply and Add comment buttong is not getting clicked.
    View Once Plz:- eduways.in

    ReplyDelete
  90. I'm still having difficulty in changing ma blog's template.. Do help me.. My blog is:
    http://chocolaterecepies.blogspot.in/
    Just check out and let me know the way i can change ma template..

    ReplyDelete
  91. You are very talented and share very affective information.
    Technology, Free Software and Best Tutorial
    Keep it up.Your research is very informative
    God Bless You

    ReplyDelete
  92. How can I change the color of comments on my blog?

    http://eventheodd.blogspot.in/2012/07/smartphone-apps-to-improve-your.html

    Black color in comments is not visible.

    ReplyDelete
  93. thank you alot , you are a great man

    ReplyDelete
  94. how to add the reply link on the member image ? please if you can reply soon thank you.

    ReplyDelete
  95. Error parsing XML, line 816, column 3: The element type "div" must be terminated by the matching end-tag "".

    After I click save, that error command appear. what to do? please help thanks :)

    ReplyDelete
  96. Thanks for sharing your knowledge. I am new to blogger and I want to make blog to stand up to the crowd and be very more eye catchy. Its been a great help now I can edit the css and html on my blog spot and design it on my own . I was like looking for Web Design in Mississauga to aspire more or even ask for their services. But after viewing your blog it's a great help.

    ReplyDelete
  97. This comment has been removed by the author.

    ReplyDelete
  98. how to make the form comment not popup? I mean when i push reply so the form come directly under the comment.

    ReplyDelete
  99. example: http://hompimpaalaihumgambreng.blogspot.com/2012/03/uncompressed-blogger-thread-comment.html

    ReplyDelete
  100. i just wanted to take the time and THANK you for this post! It was very helpful cause i was very frustrated when i didnt work out for my blog :) xxx

    ReplyDelete
  101. Hello, your tuts are so helpful. Except this one. Can you help me to understand how I can make a threaded comments in my custom template if I have:
    < b:if cond='data:blog.pageType == "static_page"'>
    < style type='text/css'>
    .post-body img {padding:0px;background:transparent;border:none;}
    < /style>
    < /b:if>
    < b:if cond='data:blog.pageType == "item"'>
    < style type='text/css'>
    .post-body img {padding:0px;background:transparent;border:none;}
    < /style>
    < /b:if>

    ReplyDelete
  102. i hope this topic is still alive!

    i want to know how can i add border to each comment?
    how to move comments little right side?
    How can i make author comments unique in style?

    have a look at test comments on this blog
    http://unique-downloads.blogspot.com/2012/10/test-post-3.html

    ReplyDelete
  103. great post, but dunno why it's not working on my blog
    http://endydaniel.blogspot.com

    ReplyDelete
  104. I did't have any luck whatsoever with this code..So Plz buddy take a look http://cosmologistic.blogspot.in/..

    I am using Confidence template here..plz tell me what to do !!!

    Here is also my email..arnab.quark@gmail.com !!!

    ReplyDelete
  105. Mohammad..the reply button is not working mate !!! So plz tell me how to fix..otherwise installing it does not make any sense..

    ReplyDelete
  106. Thank you for this code.
    www.rdtechz.org

    ReplyDelete
  107. nice tutorial, i'll apply this one on my blog
    thanks for sharing

    ReplyDelete
  108. not worrking 4 me with collaps type comment box as like your..what i do?

    ReplyDelete
  109. This comment has been removed by the author.

    ReplyDelete
  110. what if that code doesn't exist in the template I'm using? I've used your tutorial many times before with other templates, but it's not working for this template. Help?

    Can u email me back? my email

    ReplyDelete
  111. i can set my margin in comment form and go out templete................... please help

    ReplyDelete
  112. @Sembang Cyberin my template reply button is not working,,

    ReplyDelete
  113. This comment has been removed by the author.

    ReplyDelete
  114. I can't add these thread comments. I'm weary from trying. Can you please help me figure this out.


    Kyndl

    ReplyDelete
  115. i actually did all tricks and tips but still it's not working.. It has the REPLY button but it's not responding.. See for yourself.

    http://cuteanddainty.blogspot.com/

    ReplyDelete
  116. Thank you for this but my work computer runs IE 8 and I have now tried numerous codes and nothing will work to make the comments do what they are supposed to. I get the reply button and delete button but they don't work at all. Your code was the same way, though I didn't have exactly what you had up above. The code that was in there looked like this:

    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <b:include data='post' name='comment_picker'/>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <b:include data='post' name='comment_picker'/>
    </b:if>

    I did a search and that's the only code that came up like yours. So I replaced what I had (above) with your code and it didn't work. I can see the reply button but it doesn't do anything. I have embedding turned on. I have the site set to full. And nothing is working. I'm so frustrated.

    ReplyDelete
  117. @Shivam

    Thank you so much for your comment!! I, too, had two occurrences of the code, and wasn't sure what to do.

    ReplyDelete
  118. What a great tutorial! Very helpful.. thanks for sharing this post :)

    ReplyDelete
  119. i could not even find the first piece of code in my blog! can you still help me out with what to do?

    ReplyDelete
  120. Nice & thank you.. now my comments is nested + with reply.. just need to change the color..

    ReplyDelete
  121. I've tried so many tips from other blogs. None worked. This one's different. U've solved my problem. Thanks, Brother.
    Regards.

    ReplyDelete
  122. Very good and has many improvements and exciting new. Friv4

    ReplyDelete
  123. This comment has been removed by the author.

    ReplyDelete
  124. Thank you so much for this. I've been trying to make threaded comments work on my blog for ages and none of the official help was, well, helpful. ;) Love your blog!

    ReplyDelete
  125. I was unable to find this code:












    " what do i do? here is the blog: http://www.allmoneyideal.com

    ReplyDelete
  126. I was unable to find this code:





    " what do i do? here is the blog: http://allmoneyideal.com

    ReplyDelete
  127. Aking Web Tech a leading IT company & Provides web services :- website Development in just 1,999 Rs/-, software development like {Billing software, School Management Software, Inventory Software, ERP, CRM}, Domain & Hosting , SEO
    website development in indore

    ReplyDelete
  128. Aking Web Tech a leading IT company & Provides web services :- website Development in just 1,999 Rs/-, software development like {Billing software, School Management Software, Inventory Software, ERP, CRM}, Domain & Hosting , SEO
    Software companies in indore

    ReplyDelete
  129. Aking Web Tech a leading IT company & Provides web services :- website Development in just 1,999 Rs/-, software development like {Billing software, School Management Software, Inventory Software, ERP, CRM}, Domain & Hosting , SEO
    website development in indore

    ReplyDelete
  130. I need this stuff so bad on my new Comic blog
    I have added the comment counter which came in last part of the tutorial, meanwhile I had Been trying to Add the CSS for the threaded comments with The Ribbon having Admin by the right, and the Rounded Avatars for my commenter photos but that parts didn't work, Mr.Mustafa can you please state what I'm missing?

    ReplyDelete
  131. This comment has been removed by the author.

    ReplyDelete
  132. So good tutor.
    Thanks brother for this nice info :D

    ReplyDelete

Support Us

We have educated thousands of bloggers online and made several people Make a living Online. If our Tutorials have really helped you a little, then kindly show your love by using the badge below:-

Blogger Widgets

or try a Beautiful Banner

Widgets

 
  • MBT Icons and buttons

    Icons and Buttons

    Our resources have been successfully downloaded over 10K times and found almost every where. Get yours!

  • choosing webhost for a blog

    Why HostGator?

    Learn Why we chose HostGator as our Web Host and find discount coupons to kick start your blog today!

  • SEO Settings for blogger

    ALL IN ONE SEO PACK 2012

    Learn every single SEO tip that will boost your blog's ranking and organic traffic. We got them all!

  • Blogger widgets and plugins

    Visit MBT's Blogger LAB

    Why not take a tour of all great Blogger widgets published so far? You Name it we have it!

  • become a six figure blogger!

    Become a SIX FIGURE BLOGGER

    Learn what it takes to become a successful entrepreneur and build a living online!

About The Author

Hi! I am Mohammad, a certified SEO Consultant, Pro Blogger, Computer Engineer and an addicted Web Developer. STC Network was founded in 2008 and it is currently the country's first registered company of Professional Bloggers. Read More..

Recipes

SEO Affiliate Marketing Social Media

Make Money Online Web hosting

Blogging Tips Web Designing

Plugins and Widgets Blogging Ethics

Subscribe

Recent Comments

Popular Series

Powered by:

My Blogger Tricks © 2013. All Rights Reserved | Contact |