Blogger Comment CSS Thread

After implementing threaded comments (system) in Blogger. Now it’s time to stylize comment area to impress your blog readers. Main comment and reply comment will be present in a smart manner. Admin/Author comments will have a badge to differentiate admin/author and reader comments. This stylization will make your blog more professional.

How to make threaded comments (system) more professional and stylish?

• Go to Blogger “Dashboard”


• Switch to “Template” tab


• Click on “Edit HTML”.


• Now search for ]]></b:skin> and paste following code just ABOVE it.

/* Blogger threaded comments (system) stylization with CSS code
by My Blogger World (http://mybloggerworld.net)
-----------------------------------------*/
#comments{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:#eb1e1e}
#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 #eb1e1e;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:#eb1e1e}
.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:#f9f9f9;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(http://mybloggerworld.net/wp-content/uploads/2014/12/dark-gray-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:100%!important}
.comment-form{width:100%;max-width:100%}

•  Now “Save template” and you are done.

Important:

• To change color scheme you have to change Hex code #eb1e1e respectively you can choose one of the following author badge. To use any of the following author badge you need to do right click on image and copy image link and change in CSS code (Shown in red color).


• To make avatar image circular you have to add following line in above code –

[quote].comments .avatar-image-container{border-radius: 50%;}[/quote]

Author Badges

[images cols="six"]
[image link="#" image="281"]
[image link="#" image="280"]
[image link="#" image="279"]
[image link="#" image="278"]
[image link="#" image="277"]
[image link="#" image="272"]
[image link="#" image="273"]
[image link="#" image="274"]
[image link="#" image="275"]
[image link="#" image="276"]
[/images]