Enable Threaded Comment For Custom Blogger Templates!

Dear bloggers the day before we posted how to configure threaded comment widget on official blogger templates and this configuration works only for certain templates that blogger team hosts and copyrights.But that method doesn't work on custom templates which are downloaded from unofficial sites developed and designed by experienced users. Unlike wordpress users there are thousands of premium themes to install and design a perfect blog, blogger supports only a number of 6 templates in different characters for their users. So there are up-to 80% bloggers prefer custom designed template to do blogging and later they fall on the trouble like threaded comment errors. 

Why this problem occurs? some of us know about it, it's because when a developer develop a template he tries to apply the available all features but in case some of scripts may not added or he copied some script from other and that code may contain the error but the developers didn't check it before using and thus the problem occurs. I myself faced the threaded comment problem but i recovered it myself later. 

Today's tutorial is focused on both newbies and experts to know

• Which scripts generally work to enable threaded comment on custom template
• Why threaded comment style doesn't work properly
• How to fix this problem manually

At long last of this tutorial you could learn

• About basic blogger template structure
• Some executable scripts which are used to develop threaded comment
• What are the main parts of a custom blogger template

The Includable Scripts Which Work For Custom Template

The following scripts are common for any custom blogger template to enable threaded comment as well as the most available options of the comment form. It remains within the main wrapper of your template and there are up-to 22 more includable tags which work for Post Feed, Post Area, Blog Pager, Mobile Post View, Post Share Icons, Post Quick Edit Option etc.

Apply Threaded Comments To Custom Templates

The steps are extremely easy and you just need to follow it carefully.

1. Go To Blogger>Template
2. Backup your template
3. Click Edit HTML
4. Now search for the following code

Info: For your assort this is to inform you that, 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. This script must be found after <b:include data='post' name='post'/>

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

5. Now replace it with any of the following code

        <b:if cond='data:blog.pageType != &quot;index&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>

OR

<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!

Now Stylize Your Threaded Comment By Perfect CSS

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:

MBT Previous Style

Live Demo

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

Need Help?

You are most welcome 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.