Blogger Thrded Comments For Custom Templates

Just yesterday we shared a tutorial and announcement on Blogger's most awaited fture of thrded (Nested) commenting system. We shared how to enable thrded 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 fture can't simply be resisted therefore we took some time to install it safely and apply all required to make this fture function properly after a lot of trial and errors. The tutorial below is first time shared and will offer the siest way to add thrded commenting style to blogger blogs. I had
received some JavaScript from our Malay spking Fellow bloggers and Indian Guest authors which was producing the same effect using scripts crted by third party developers but the rson I delayed those guest posts was due to their browser load time conflict issues. I am glad Blogger tm provided us with a much nter and fast loading script that has now surely pushed blogspot blogs to the next level. Lets get to work then!

Apply Thrded Comments To Custom Templates
The steps are extremely sy and you just need to follow it carefully.
Go To Blogger > Design > Edit HTML
Backup your template
Click "Expand Widget Templates" box
Srch for this ,
(Note: This initially appred twice but blogger tm has officially replaced the first occurrence, therefore we just need to add it once as shown here. It has become now more sy 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.showThrdedComments'>
<b:include data='post' name='thrded_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.showThrdedComments'>
<b:include data='post' name='thrded_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 ch comment. Clicking the reply link will open the comment form just below that comment so that you could post a thrded reply. It will work just perfectly. :)

Customizing Thrded Comments
The thrded 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 required to edit the style sheet for the comment block.
Your template will include the following CSS automatically inserted by blogger:

<b:includable id='thrded_comment_css'> <style>
.comments {
clr: 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-thrd ol {
list-style-type: none;
padding: 0;
text-align: left;
}
.comments .comments-content .inline-thrd {
padding: 0.5em 1em;
}
.comments .comments-content .comment-thrd {
margin: 8px 0px;
}
.comments .comments-content .comment-thrd: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-hder,
.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-thrd {
margin-top: 5px;
}
.comments .comments-content .loadmore a {
display: block;
padding: 10px 16px;
text-align: center;
}
.comments .thrd-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 .thrd-chrome.thrd-collapsed {
display: none;
}
.comments .thrd-toggle {
display: inline-block;
}
.comments .thrd-toggle .thrd-arrow {
display: inline-block;
height: 6px;
width: 7px;
overflow: visible;
margin: 0.3em;
padding-right: 4px;
}
.comments .thrd-expanded .thrd-arrow {
background: url(&quot;data:/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAA DEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC&quot;) no-rept scroll 0 0 transparent;
}
.comments .thrd-collapsed .thrd-arrow {
background: url(&quot;data:/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAA DEUlfTAAAAJUlEQVR42mNgAILy8vL/DASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==&quot;) no-rept scroll 0 0 transparent;
}
.comments .avatar--container {
float: left;
width: 36px;
max-height: 36px;
overflow: hidden;
}
.comments .avatar--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 Trickko then replace the above CSS with the following one:


<b:includable id='thrded_comment_css'>
<style>
/*------------- START of Blogger Thrded Comments By Trickko -------------*/
.comments {
clr: 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-thrd ol {
list-style-type: none;
padding: 0;
text-align: none;
}
.comments .comments-content .inline-thrd {
padding: 0.5em 1em;
}
.comments .comments-content .comment-thrd {
margin: 8px 0px;
}
.comments .comments-content .comment-thrd: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-hder,
.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-thrd {
margin-top: 5px;
}
.comments .comments-content .loadmore a {
display: block;
padding: 10px 16px;
text-align: center;
}
.comments .thrd-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 .thrd-chrome.thrd-collapsed {
display: none;
}
.comments .thrd-toggle {
display: inline-block;
}
.comments .thrd-toggle .thrd-arrow {
display: inline-block;
height: 6px;
width: 7px;
overflow: visible;
margin: 0.3em;
padding-right: 4px;
}
.comments .thrd-expanded .thrd-arrow {
background: url(&quot;data:/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC&quot;) no-rept scroll 0 0 transparent;
}
.comments .thrd-collapsed .thrd-arrow {
background: url(&quot;data:/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==&quot;) no-rept scroll 0 0 transparent;
}
.comments .avatar--container {
float: left;
width: 36px;
max-height: 36px;
overflow: hidden;
}
.comments .avatar--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 Thrded Comments By Trickko-------------*/
</style>
</b:includable>

Make these changes:
Tip: Use our color chart or color tool for making these changes

To change the background of Reply button in Active mode edit 1F9EE5To change the background of Reply button in Mouse Hover mode edit 5AB1E2To change the Font colour of the Reply text edit ffffffTo 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 sy to understand and must work on all blogger templates. I will sharing butiful new themes for this updated comment section look. Stay tunes for a lot of new tutorials. Pce and blessings pals. :)