Customize Blogger Threaded Comment Style

Today I'm going to share you CSS code which customize your blogger comments with stylish look. As we already know comment is the most important part of a blog therefore we have to make it attractive and awesome. Threaded comment system was released in blogger a years ago without adding any style in it. Anyhow it was a great feature excepted by many bloggers.

This Comment style I have implemented on Media Tech blogger template. CSS code will highlight author comment, comment avatar is hidden unless mouseover on the comment block. Reply button is absolutely customized. Lets add the CSS code and make Awesome.

Live Demo 

How To Add CSS Code in Your Blog

1. Blogger > Template > Edit HTML >  Expand Widget Templates
2. Add the folllowing CSS code before  ]]></b:skin>  .

.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
  padding: 5px;
}
.comments .comments-content {
  font-size: 13px;
  background:#fff url(http://softglad.at.ua/Demo/bg.gif);
  margin-bottom: 16px;
  margin-top: -8px;
  margin-left: -10px;
  padding-left: 1em;
  zoom: 1.05;
  background-size: 100px;
}
.comments .comment .comment-actions a {
background: #299DFF;
cursor: pointer;
color: white;
padding: 5px 10px;
margin-right: -10px;
margin-left: 10px;
float: right;
margin-top: -13px;
}
.comments .comment .comment-actions a:hover {
  text-decoration: none;
background: orange;
color: white;
}
.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: left;
}
.comments .comments-content .inline-thread {
  padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
  margin: 8px 0px;
}
.comments .comments-content .comment-thread:empty {
  display: none;
}
.comments .comments-content .comment-replies {
  margin-top: 1em;
  margin-left: 36px;
}
.comments .comments-content .comment {
  margin-bottom:16px;
  padding-bottom:8px;
}
.comments .comments-content .comment:first-child {
  padding-top:16px;
}
.comments .comments-content .comment:last-child {
  border-bottom:0;
  padding-bottom:0;
}
.comments .comments-content .comment-body {
  position:relative;
}
.comments .comments-content .user {
  font-style:normal;
  font-weight:bold;
}
.comments .comments-content .icon.blog-author {
  width: 18px;
  height: 18px;
  display: none;
  margin: 0 0 -4px 6px;
}
.user.blog-author a {
    background: red;
    padding: 3px;
    padding-bottom: 3px;
    margin-left: -5px;
    text-decoration: none;
}
.user.blog-author a:hover {
    background: #29f;
    padding-left: 15px;
color: white!important;
}
.comments .comments-content .datetime {
  margin-left:10px;
}
.comments .comments-content .comment-header,
.comments .comments-content .comment-content {
  margin:px;

}
.comment-header {
  color: #fff;
  background: #299DFF;
  padding: 5px;
  margin-left: -10px !important;
  margin-top: -10px !important;
  margin-right: -10px !important;
}
.comment-header a {
  color: #fff;
  font-family:' Bree serif', arial;
  font-size: 14px;
}
.comments .comments-content .comment-content {
  text-align:justify;
  margin-bottom: 15px;
  font: 15px magra, arial;
  line-height: 18px;

}
.comments .comments-content .owner-actions {
  position:absolute;
  right:0;
  top:0;
}
.comments .comments-replybox {
  border: none;
  height: 250px;
  width: 100%;
}
.comments .comment-replybox-single {
  margin-top: 5px;
  margin-left: 48px;
}
.comments .comment-replybox-thread {
  margin-top: 5px;
}
.comments .comments-content .loadmore a {
  display: block;
  padding: 10px 16px;
  text-align: center;
}
.comments .thread-toggle {
  cursor: pointer;
  display: inline-block;
}
.comments .continue {
  cursor: pointer;
}
.comments .continue a {
  display: block;
  padding: 0.5em;
  font-weight: bold;
}
.comments .comments-content .loadmore {
  cursor: pointer;
  max-height: 3em;
  margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
  display: none;
}
.comments .thread-toggle {
  display: inline-block;
}
.comments .thread-toggle .thread-arrow {
  display: inline-block;
  height: 6px;
  width: 7px;
  overflow: visible;
  margin: 0.3em;
  padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
float: left;
width: auto;
max-height: 56px;
visibility: hidden;
opacity: 0;
left: 50px;
position: relative;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}

.comment:hover .avatar-image-container {
visibility: visible;
opacity: 1;
left: 0;
}
.comments .avatar-image-container img {
  width: 36px;
  background: #299DFF;
  padding: 5px;
  border: 1px solid #299DFF;
}
.comments .comment-block {
    background: none repeat scroll 0 0 #FFFFFF;
    padding: 10px;
    position: relative;
    margin-left: 47px;
    box-shadow: 5px 13px 30px #999;
}
#comments a {
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
text-decoration: none;
}
#comments a:hover {
color: black;
}

3. Now save your template.
I hope you like my design and if there is any error on. You can comment below..

SHARE

Tweet