Featured of MBL Thread Commenting System:
- Unlike other threaded comment, it has a classy together with attractive design.
- It likewise displays the Thumbnails Besides each together with every comment.
- Easy to customize, built amongst ultra-fast CSS.
- It volition likewise add together a Threaded commenting organization to the Mobile version of the blog.
- It allows to highlights the Comments of the Author land other commenters won’t live on highlighted.
- Perfectly plant on each together with every browser, i.e. Google chrome, Internet explorer together with Firefox.
How To Install Threaded Commenting System In Blogger:
Just similar our other Blogger Tutorials, this 1 is likewise assembled inwards such a means that it would hardly soak less than fifteen minutes to consummate the integration. Follow the instructions mentioned below.
- Go to Blogger.com >> Template (Take backup of your subject inwards illustration anything went wrong).
- Then Select Edit HTML >> Proceed.
- Select (Tick) the “Expand the Widget” Box.
- Now inside your template, search for the next chunk of coding.
(Attention: You volition detect the next code twice inwards your template, but the Blogger squad has replaced the start occurrence. Therefore, endeavor to supersede the code alone once. However, replacing the both coding would non wound either.)
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
- Once you lot detect the higher upwards code, supersede it amongst 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 larn ahead together with relieve the template.
Customizing Threaded Comment With MBL Personalized Design:
- Go to Blogger >> Template.
- Edit HTML >> Proceed.
- Search for ]]></b:skin> and higher upwards it Paste the next 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 company #1aa1e2;border-right:20px company 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 company #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/AVvXsEiZL_E9eTQ61lzLvUsDcmzPITHmv_aFC0ijDtfflvNbxeG3rcbA8sIb6_omW_fKUAauSa_9LKuwion2K4zBnPju7fpZ0dOxOuNws_fJn2t8co8UtnHCUEC9DvGZxWUW3Rm7wkfNTR2O54JG/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 company #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 company #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 organization has been integrated together with right away visits your website together with feels the departure yourself. Now you lot convey the Reply to comment button, Deleting a comment pick together with etc.
From The Editor’s Desk:
We promise this commenting organization would surly forcefulness your readers to brand a comment on your site. It needs lots of modifications but its means improve than the previous commenting system. If you lot appear upwards whatsoever difficulty experience gratis to ask. Take a lot assist of yourself together with your identify unit of measurement till together with thus its peace, blessings together with happy commenting.
Announcement: We convey Modified our Footer together with right away it is equipped with or thus useful information. Scroll Down a fleck together with run into it inwards alive action. Suggest would live on to a greater extent than together with thus welcome.
No comments:
Post a Comment