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 == "item"'>
<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 == "static_page"'>
<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 == "item"'>
<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/AVvXsEgUmqwS7dXDpkLYuzUOo1wKS-GNJGI7fgQWaDRs2AmYtgEzHL8DtrqlK_4KYf_qWCLohBwfLgnOpIgMuW8Hg_dG21i8G0u-5SfEldhmD_MihDKBVvbXb21tCoXncCrANrGWOfhu-LrqipjQ/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.
Adding Highly Customized Threaded Commenting System To Blogger
4/
5
By
Editorial Board
Dear Reader! We’re enthusiastic to see your comment but after reading the Content please ask for advice and to provide constructive feedback Please Write Relevant Comment with Polite Language.Your comments inspired me to continue blogging. Your opinion much more valuable to me.
Let’s enjoy a personal and evocative conversation. Thank You!