How to Enable Threaded Comment for Custom Templates

These days threaded commenting system has become in inevitable part of blogs. It is an effective way for receiving and giving feedback. Considering its importance, Blogger has also introduced this system. Nowadays all of Blogger’s official templates are threaded comment enabled. But for custom templates the user needs to add this facility manually. There are a number of tutorials available in the internet to guide you to add threaded commenting system in your custom template. But sadly, none of the solutions works 100% right.

I also tried to enable threaded comments by following several tutorials. But regretfully, all of my efforts failed. Being utterly dismayed, I decided to modify the codes so that it works properly.

Problems with the Existing Code

Analyzing the prevailing codes, I have detected the following problems:

The first problem I saw is that after implementation of threaded comment codes no comment forms appear in posts with zero comments.
Secondly, when you hit reply button a reply form appears but no options for adding a new comment or thread.

As this is Bloggers integrated system, it is not possible bring remarkable change. It is true that I have fixed the bugs, but I did that in a rather quacky way. Most of the experts will call my modifications illogical, but the good thing is that my solution is better than nothing.

Basic Features

The modified code possesses the following facilities:

Ensures comment form appearance in appropriate situations.
“Add a New Comment” button for starting a new thread.
Customizable “Reply” button.
Provisions for other CSS modifications.

Implantation of Threaded Comment

Now let’s see how to implement threaded comment in your custom template:

Changing Blogger Settings

Before adding threaded comment make sure to make the following changes to your Blogger settings:
Step 1. Go to to Settings > Other and then under Allow Blog Feed select Full from the dropdown menu.

Step 2. Go to Settings > Posts and Comments and then under Comment Location select Embedded from the dropdown menu.

Adding Threaded Comment Codes

Step 1. Go to Blogger>Template
Step 2. Backup your template
Step 3. Click Edit HTML
Step 4. Now, in your template search for this code: ]]></b:skin> and paste the following code after it:

<script type='text/javascript'>

var togglenewcomm = function() {

var mydiv = document.getElementById('newcomm');

if (mydiv.style.display === 'block' || mydiv.style.display === '')

mydiv.style.display = 'none';

else

mydiv.style.display = 'block'

}

</script>

Step 5. Now search for the following code:

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

Note: In some templates this code appears twice. In such case, just delete the additional one.

Step 6. Replace the above code with either of the following codes, which best suits with your template:

Code No-1: Use this code if no comment form appears in posts with zero comments (i.e. when this happens after addition of available threaded comment codes):

<b:if cond='data:blog.pageType != "index"'>

<b:if cond='data:post.numComments == 0'>

<b:include data='post' name='comments'/>

<b:include data='post' name='comment-form'/>

<b:else/>

<b:if cond='data:post.showThreadedComments'>

<b:include data='post' name='threaded_comments'/>

<b:else/>

</b:if>

<div class="addanewcomment">

<a href="javascript:void(0);" onclick="togglenewcomm();">+ Add a New Comment</a>

</div>

<div id="newcomm" style="display:none">

<b:include data='post' name='comment-form'/>

</div>

</b:if>

</b:if>

Code No-2: Use this code if comment form appears in posts with zero comments (i.e. when this happens after addition of available threaded comment codes):

<b:if cond='data:blog.pageType != "index"'>

<b:if cond='data:post.numComments == 0'>

<b:include data='post' name='comments'/>

<b:else/>

<b:if cond='data:post.showThreadedComments'>

<b:include data='post' name='threaded_comments'/>

<b:else/>

<b:include data='post' name='comments'/>

</b:if>

<div class="addanewcomment">

<a href="javascript:void(0);" onclick="togglenewcomm();">+ Add a New Comment</a>

</div>

<div id="newcomm" style="display:none">

<b:include data='post' name='comment-form'/>

</div>

</b:if>

</b:if>

Step 7. Stylize Threaded Comment with CSS. To do this search for this code in your template: ]]></b:skin> and paste the following code before it:

/* Threaded Comment */

#comments{overflow:hidden; width:auto; margin-left:0px;padding-left:8px;padding-right:8px;}

#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:#E64337}

#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 #E64337;border-right:20px solid transparent;width:0;height:0;line-height:0}

#comments .avatar-image-container img{border:0}

.comment-thread{color:#111; font-family: Verdana, Agency FB, Oswald; font-size: 13px;}

.comment-thread a{color:#777;text-decoration: none;}

.comment-thread ol{margin:0 0 20px}

.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#1aa1e2}

.comments .avatar-image-container,.comments .avatar-image-container img{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr0Pf6gZNhq6ESJqMyFpyJsI8C8Ib-Iq-KRg56DbHWpuAYJ0NLU7v8wavdcnEXisNUfmmxceZmH7PKqO_U83dEq5lANsAjyrX19Y9jqYXdNsi4OIQvmtCrjbmRpwTX1uIuawca0v2KJne1/s1600/avatar-blank.gif); width:36px;max-width:36px;height:36px;max-height:36px; border-radius: 50px;box-shadow: 0px 1px 9px #666; border: 1px solid #e7e7e7;}

.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 #e1e1e1;background:#fff;background:-moz-linear-gradient(top,#fff 0%,#f2f2f2 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fff),color-stop(100%,#f2f2f2));

padding:10px; border-radius:5px; }

.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}

.comments .comments-content .icon.blog-author{position:absolute;top:-11px;right:-11px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioLV2LrF5xYtL8dLWZU_Fh0tv7kXE7FFkkhNpq66tvUIEGkOVVIIXjBHreu2bnl-sAXt3br8_Vjv_GfF_F847LmudpsYGO_OCEOVXS3-Qc7XVAFjo_tFa9uI7NqDwkSiYBODTTsLNnvtmc/s1600/admin-label.png);width:43px;height:41px}

.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 #e9e9e9;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 #e1e1e1;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%; display:none!important;}

.comments .continue a{padding:10px 0;text-align:center}

#comment-editor{padding-left: 73px; width:88%!important}

.comment-form{width:100%;max-width:100%;}

.comments .comment .comment-actions a {background: none repeat scroll 0 0 #E64337;border-radius: 3px;color: #FFFFFF;padding: 1px 5px 4px;text-decoration: none;margin-right: 4px;}

.comments .comment .comment-actions a:hover {text-decoration: none;background: #000;}

.addanewcomment {padding-bottom: 14px;margin-left: 6px;}

.addanewcomment a{background: #E64337;border-radius: 3px 3px 3px 3px;color: #FFFFFF;display: inline;padding: 10px;text-decoration: none;}

.addanewcomment a:hover {background: #000000;}

.comment-form h4{background: -moz-linear-gradient(center top , #FFFFFF 0%, #F2F2F2 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); border: 1px solid #D3D3D3; border-radius: 3px;display: block;margin-left: 9px !important;padding: 5px;width: 627px;}

/* End Threaded Comment */

Live Demo

http://inkoflife.blogspot.com/2013/04/best-free-bangla-pdf-book-download-sites.html

Hope you have added the codes successfully and having fun with the threaded comment. However, if you are having difficulty to add it or if the code isn’t working properly, please feel free to leave a comment so that I can further improve or rectify the codes.

View More Posts

Be Informed Whenever a New Post is Published.

If you enjoyed this article, SUBSCRIBE now for FREE to get regular updates delivered to your E-mail inbox.Your E-mail is safe with us - No spam, we promise.

Life in Bangladesh

Sunday, June 08, 2014