CSS Komentar Blogger Bergaya Google+

Seperti kita tahu Blogger memperkenalkan sistem komentar Google+ di blog blogspot (Baca: Memasang Komentar Google+ Di Blogger). Tapi ternyata masih sangat banyak kekurangan. Termasuk soal penggunaan Iframe yang berarti tidak terindeks dengan baik oleh Google dan hal-hal lain yang masih menjadi bahan uji (Baca: Komentar Google+ Banyak Kekurangan).

Nah, lepas dari semua itu, mungkin Anda ada yang sudah terlanjur ngebet seperti saya ingin menggunakan Komentar bergaya Google+. Sambil menunggu blogger mengembangkan komentar Google+ nya, mari kita bermain CSS saja agar komentar Blogger default kita bergaya Google+.

Langsung saja saya bagi-bagi CSS untuk komentarnya:
.comments {border:1px solid #ccc;}
.comments .comment-block {margin-left:90px}
.comments .comments-content .user {
    color: #262626;
        font-style: normal;
    font-weight: bold;
font-size: 13px;
font-family: arial;
}
.comments .comment-replybox-thread {
    margin-left: 20px;
    margin-top: 5px;
}
.comments .comments-content .comment-content {
    color: #262626;
    font-family: arial;
padding-right: 25px;font-size:13px;
text-align: left;}
.comments .comments-content .comment {border-bottom:1px solid #EEEEEE;}
.comments .comments-content .comment-header, .comments .comments-content .comment-content {
    margin: 0;
}
.comments .comments-content .icon.blog-author {background: #999999;}
.comments .comments-content .datetime {
    color: #999999;
    font-family: arial;
    font-size: 11px;
    margin-left: 6px;
}
.comments .comments-content .datetime a:link {color:#999999;}
.comments .comments-content .datetime a:visited {color:#999999;}
#comments h4 {
  background: none repeat scroll 0 0 #EEEEEE;
    color: #262626;
    font-size: 16px;
    padding-bottom: 25px;
    padding-left: 25px;
    padding-top: 25px;
font-style:normal;
font-family:arial;
}

#comments-block dt {
  margin: .5em 0;
}
#comments-block dd {
  margin: .25em 0 0;
}
#comments-block dd.comment-footer {
  margin: -.25em 0 2em;
  line-height: 1.4em;
  font-size: 78%;
    display: none;
}
#comments-block dd p {
  margin: 0 0 .75em;
}
.comment-form {clear: both;
    margin-left: 20px;
    margin-top: -60px;
width: 550px;}
.comments .avatar-image-container img {
    max-width: 50px;
}
.comments .avatar-image-container {
    float: left;
    max-height: 50px;
    overflow: hidden;
    width: 50px;
}
.avatar-image-container {
    background: url("//ssl.gstatic.com/s2/profiles/images/silhouette46.png") repeat scroll 0 0 / 100% auto transparent;
    border-radius: 50px 50px 50px 50px;
-moz-border-radius: 50px 50px 50px 50px;
 -webkit-border-radius: 50px 50px 50px 50px;
    color: #FFFFFF;
    display: block;
    float: left;
    font-size: 20px;
    height: 50px;
    margin-left: 20px;
    text-align: center;
    width: 50px;}
.comments .avatar-image-container img {
   width: 50px;}

#comments-block.avatar-comment-indent {
    margin-left: 4px;
    position: relative;
}
ol #comments-block li {
    border-bottom: 1px solid #EEEEEE;
    list-style:none;
    margin: 20px 0;
    z-index: -100;
min-height:90px;
}
#comments-block .comment_content {
    width: 500px;
}
.deleted-comment {
  font-style:italic;
  color:gray;
}

Silahkan di copy-paste menggantikan CSS komentar yang sudah ada di blog Anda. Met pagi, sedulur...

Artikel Info: Membuat Komentar Blogger Bergaya Google+