Threaded Comments gaya Google+ Comments

Sebenarnya saya ingin berbagi tutorial bagaimana cara mengaktifkan Google+ Comments untuk Blogger, namun setelah browsing ternyata ada beberapa kekurangan pada Google+ Comments untuk Blogger (baca ulasan Mas Doyok mengenai kekurangan Google+ Comments untuk Blogger), sehingga saya sedikit urungkan niat saya untuk memposting artikel tersebut, sembari menunggu perbaikan dari Google untuk fitur terbarunya tersebut saya akan membagikan CSS Komentar layaknya Google+ Comments dengan berdasar pada Threaded Comments.

Disini saya akan membagikan CSS dari Mas Doyok, bagaimana cara modifikasi threaded comments Blogger seperti Google+ Comments yang pastinya cukup menarik untuk diterapkan pada blog Anda.

Modifikasi Tampilan Threaded Comments seperti Google+ Comments :
1. Pertama login ke akun Blogger
2. Pilih Menu Template > Edit > jangan lupa di backup terlebih dahulu
3. Cari CSS Komentar blog Anda, biasanya ditandai dengan .comments blok CSS komentar, kemudian ganti dengan CSS berikut ini

.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;
}

4. Preview terlebih dahulu untuk mengurangi kesalahan sebelum penyimpanan, jika tidak ada error silahkan di simpan dan lihat hasilnya.

Selamat mencoba dan happy blogging !