Blogger Comment CSS Thread
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]
0 comments:
Post a Comment