Sistem Thread comments Blogger ala Facebook

Setelah pada kesempatan yang lalu saya sempat membahas tentang KOMENTAR BLOGGER DAN FACEBOOK BERDAMPINGAN DENGAN TAB, kali ini tidak lupa saya mau share sistem thread comments yang kita dapat lebih mempercantik tampilan komentar pada blog kita. Sistem Thread comments Blogger ala Facebook ini dikembangkan oleh Kang Ismet. 

Rasanya lengkap bila sudah memasang comment dari Facebook lalu kita pasang juga comment blogger ala Facebook di blog kita.

Komentar blogger ala Facebook ini hanya butuh pengeditan pada bagian CSS saja dan kalau berhasil maka tampilan komentar kita persis seperti yang terdapat pada Facebook.

Coba anda perhatikan screenshot di bawah ini :

Persis seperti Facebook kan..?!

Setidaknya begitulah... coba anda lihat demonya Kang Ismet di sini.

Cara membuat Komentar Blogger ala Facebook 

1. Login ke Blogger
2. Klik Template --> Edit HTML
3. Cari kode ]]>

 dengan CTRL+F
4. Tambahkan kode berikut ini diatas ]]>

/* CSS Komentar Blogspot - Tema Facebook
 */
.comments {
  font:normal 11px/14px "Lucida Grande",Tahoma,Verdana,Arial,Sans-Serif !important;color:rgb(51,51,51);
}
.comments .comments-content a {color:#3B5998 !important;}
.comments h2, .comments h3, .comments h4 {
  font-family:"Lucida Grande",Tahoma,Verdana,Arial,Sans-Serif !important;
  font-size:16px;}
.comments .comments-content .comment {
  margin:0 0 0;
  padding:10px 0px 10px 0px;
  border-top:1px solid #e9e9e9;
  border-left:none;
}
.comments .comment .comment-header,
.comments .comment .comment-actions,
.comments .comment .comment-actions a,
.comments .comment .comment-thread.inline-thread,
.comments .comment .continue {margin:0 0 0; padding:0 0 0; border:none; background:transparent;}
.comments .comment .comment-header {margin-bottom:4px;}
.comments .comment .comment-header .datetime a {color:#808080 !important;}
.comments .comment .comment-actions a {padding-right:5px;}
.comments .thread-toggle .thread-arrow {width:7px; height:7px; padding-right:4px}
.comments .comment .avatar-image-container,
.comments .comment .avatar-image-container img {
  width:50px;
  height:50px;
  max-width:none;
  max-height:none;
  border:none;
  padding:0;
  margin:0;
  outline:none;
}
.comments .comment .comment-block {margin:0 0 0 60px !important;}
.comments .comment .comment-thread.inline-thread {margin:7px 0 0 22px;}
.comments .comment .comment-thread.inline-thread ol {margin:7px 0 10px !important;}
.comments .comment .comment-thread.inline-thread .comment {
  background-color:#EDEFF4;
  padding:5px 5px 0;
  margin:1px 0 0;
  border:none;
  border-bottom:1px solid #D2D9E7;
}
.comments .comment .comment-thread.inline-thread .comment .avatar-image-container,
.comments .comment .comment-thread.inline-thread .comment .avatar-image-container img {width:32px;height:32px;}
.comments .comment .comment-thread.inline-thread .comment .comment-block {
 margin:0 0 0 40px !important;}
.comments .comment .comment-content {text-align:left;}
.comments .comments-content .icon.blog-author {
  width:16px;
  height:16px;
  display:inline-block;
  vertical-align:top;
  background:transparent url('/favicon.ico') no-repeat 50% 50%;}
.comments .comment .comment-thread.inline-thread .comment:last-child {
 border-left:2px solid #A8B2CE !important;
}

5. Simpan Template

Dan sekarang tampilan komentar blog anda sudah tampak seperti Facebook.

Terima kasih Kang Ismet dengan Komentar Blogger Seperti Facebook-nya.