Unique Modified Threaded Commenting System V1 for Blogger Templates

Unique Modified Threaded Commenting System V1 for Blogger Templates

data:blog.title
threaded comment

We have seen many templates with built-in  threaded comment system. But some templates has very simple commenting system that looks ordinary. So to beautifying your threaded commenting system I am just sharing a piece of code that will help to make your commenting system awesome. You can see BloggerSpice commenting system that I have modified. It is just like spiceupyourblog commenting system. And I have modified it with different and stylish looks. Hope you will like it. Ok to change your default threaded commenting system just follow the below steps. 


Live Demo



Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Now click on -> Template -> Edit HTML

Step 3 Now Find this code ]]></b:skin> by pressing Ctrl + F

Step 4 Copy the below code and Paste it Before/above ]]></b:skin> 

/*Threaded Comment Widget By www.bloggerspice.com*/
#comments {
padding:10px;
}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4{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}
h4#comment-post-message {
display:none;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height:1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.comment .avatar-image-container {
border:1px solid #B22400;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
max-height:60px;
margin-top:-10px;
width:60px;
position:relative;
z-index:70;
border:4px double #1aa1e2;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
-moz-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
-webkit-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
box-shadow:0 2px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
}
.comments .comments-content {
padding:5px;
font-size:11px;
}
.comment .comment-block {
margin-left:75px !important;
min-height:84px;
text-align:left;
}
.comment .comment-header {
background:none repeat scroll 0 0 #80C8FE;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
color:#333;
font-size:12px;
font-weight:normal;
margin-left:60px;
}
.comment .comment-header a {
color:#fff !important;
text-decoration:none;
}
.comment .comment-content {
background:none repeat scroll 0 0 #BFE3FE;
border-bottom:2px solid #1aa1e2;
font-size:12px;
margin:0 0 30px;
padding:5px 5px 10px 10px;
text-align:left;
}
.comment .comment-actions a {
color:#860000;
display:inline-block;
line-height:1;
margin:0 3px;
padding:3px 6px !important;
text-decoration:none;
}
.comment-header cite {
background:none repeat scroll 0 0 #E60066;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
color:#fff;border: 2px solid white;
padding:2px 5px;
position:relative;
z-index:99;
margin-left:-20px;
}
cite.blog-author {
background:none repeat scroll 0 0 #490077 !important;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
.icon.blog-author {
display:none !important;
background:url("") no-repeat scroll 0 0;
margin-left:90px;
width:60px !important;
height:60px !important;
position:absolute;
right:5px;
bottom:5px;
top:10px;
}
.comment .comment-header {
color:#333;
font-size:12px;
font-weight:bold;
}
.comment .avatar-image-container img {
border:medium none !important;
height:60px !important;
width:60px !important;
max-height:60px !important;
max-width:60px !important;
}
.comment .comment-actions a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
background:none repeat scroll 0 0 #1aa1e2 !important;
color:#FFF !important;
display:inline-block !important;
line-height:1 !important;
margin-top:-10px !important;
margin-right:2px !important;
padding:3px 6px !important;
text-decoration:none !important;
font-size:14px;
}
.comment .comment-actions a:hover {
background:#860000 !important;
text-decoration:none !important;
}
.comments {
font-size:1em;
color:#000;
}
.comments .continue a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
background:none repeat scroll 0 0 #FF3300 !important;
color:#FFF !important;
display:inline !important;
line-height:1 !important;
margin-top:10px !important;
margin-right:2px !important;
padding:3px 6px !important;
font-size:13px;
}
.comments .continue a:hover {
background:#860000 !important;
color:#FFF;
text-decoration:none;
}
.item-control {
display:inline-block;
}
.comments .continue {
border-top:2px solid transparent !important;
}
#comment-editor {
width:103% !important;
}
.comment-form {
width:100%;
max-width:100%;
}
.comments .thread-toggle {
margin-bottom:10px;
}
.comments .comment-thread.inline-thread .comment {
margin:0 0 5px 15%;
}


Step 5 Now Save the templates and check your templates new stylish commenting system.



Customization:



Change all Highlighted color from Above according to your own taste. Get the color code from Here.


  • #BFE3FE; Change this color code to change the comment body color.
  •  #80C8FE Change this for time and date holder background color.
  •  #E60066  Change this for Commentators name holder background color.
  •  #490077 Change this for Author Name Holder background color.

Amy Lee Scott says: 3/04/2013

Hi, Mohammad. Thanks for sharing this code--I love it! I got it to work on my test blog (and it looks beautiful) but could not get it to work when I tried copying the code into my actual blog. As directed, I pasted it above ]]>. Will the comments section change for the whole blog, or just for new posts? Thank you so much for your help!

Amy Lee Scott says: 3/04/2013

Oops, never mind! It's working now and it looks amazing :) Is there a way to customize the colors?

Blogger Spice says: 3/04/2013

I have just add a 'customization' for you at the end of the post. Hope it will solve your problem.

Amy Lee Scott says: 3/05/2013

Excellent, that is very helpful. Thanks for your prompt response!

Mohammad Rabbi says: 3/05/2013

you are most welcome

MM NAUMAN says: 7/24/2013

Brother I have applied this in my template but it is transparent and it is not looking good how to change the background .

Mohammad Fazle Rabbi says: 7/25/2013

I just checked your site...comment section is looking fine exactly the post image. Didn't find any problem.

MM NAUMAN says: 7/25/2013

No Brother The comment System Was Transparent So I Have Added The Background to It To Match My Template and thanks again..

iliyas shaikh says: 8/15/2013

assalamu alaykum
dear brother
i make a second new blog with sub domian.. great thanks

i like two website bloggong
MBT and your website.. realy great work and great thanks

see my both blog

www.shayrikiduniya.com

mypremiumtrick.shayrikiduniya.com

Mohammad Fazle Rabbi says: 8/17/2013

Hi Iliyas..sorry for late reply. I was on Eid Holiday. Thanks for your beautiful comment. Feel this site as your ultimate blogging solution center.

24 Hours Of Culture says: 7/23/2014

Awsome post! thanks bro!
i want to add defaut comment systeme beside disqus comment systeme like in your blog can you help me?

Contact Form

Name

Email *

Message *