Adding Highly Customized Threaded Commenting System To Blogger

Socialize It →

Tweet

56

Advertisements

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 Blogger.com >> 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'/>
</b:if> 

• 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: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> 

• 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{color:#111}
.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 .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZXEus9ZifmWIG-kGr5LQON7JlnWRfLHendBKeJE_7-8jQv6FzlaKcl8kxkTVWzZraPwSEySotEIqCOnq_XmLcEAtvsoU-H3Bv-kbOR5IU52IPkWr95J93EXhUe0oMFK6Bj71UJ-5cCWYM/s36/author.png);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}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}

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. 

Advertisements

About the Editorial Team

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