Membuat Komentar Blogger Seperti Facebook

Kali ini saya akan share cara untuk mempercantik komentar, yaitu dengan mengubah tampilannya menjadi seperti Facebook. Karena tampilan komentar standar blogger itu tidak berkesan (menurut saya) jadi ada baik nya kita ubah agar terlihat lebih menarik dan mungkin saja membuat visitor lebih tertarik untuk berkomentar, contoh tampilannya bisa kalian lihat gambar diatas ya. Ok langsung saja, ikuti langkah - langkah berikut :

1. Login ke Blogger

2. Masuk ke Template > Edit HTML

3. Cari kode ]]></b:skin>

4. Masukan kode berikut tepat di ATAS kode ]]></b:skin>

/* CSS Komentar Blogspot - Tema Facebook

 */

.comments {

x/14px "Lucida Grande",Tahoma,Verdana,Arial,Sans-Serif !important;color:rgb(51,51,51);
}

.comments .co
  font:normal 11
pmments-content a {color:#3B5998 !important;}

.comments h2, .comments h3, .comments h4 {

;}

.comments .comments-content .comment {
  margin:0 0 0;
  padding:10px
  font-family:"Lucida Grande",Tahoma,Verdana,Arial,Sans-Serif !important;
  font-size:16p
x 0px 10px 0px;
  border-top:1px solid #e9e9e9;
  border-left:none;
}

.comments .comment .comment-header,
.comments .comment .comment-actions,

 0; border:none; background:transparen
.comments .comment .comment-actions a,
.comments .comment .comment-thread.inline-thread,
.comments .comment .continue {margin:0 0 0; padding:0 
0t;}

.comments .comment .comment-header {margin-bottom:4px;}

.comments .comment .comment-header .datetime a {color:#808080 !important;}


x} 
.comments .comment .avatar-image-container,
.comments 
.comments .comment .comment-actions a {padding-right:5px;}

.comments .thread-toggle .thread-arrow {width:7px; height:7px; padding-right:4
p.comment .avatar-image-container img {
  width:50px;
  height:50px;
  max-width:none;
  max-height:none;
  border:none;
  padding:0;
  margin:0;
  outline:none;
}


nt-thread.inline-thread ol {margin:7px 0 10px !important;}

.comm
.comments .comment .comment-block {margin:0 0 0 60px !important;}

.comments .comment .comment-thread.inline-thread {margin:7px 0 0 22px;}

.comments .comment .comm
eents .comment .comment-thread.inline-thread .comment {
  background-color:#EDEFF4;
  padding:5px 5px 0;
  margin:1px 0 0;
  border:none;
  border-bottom:1px solid #D2D9E7;
}


32px;height:32px;}

.comments .comment .comment-thread.inline-thread .comment .com
.comments .comment .comment-thread.inline-thread .comment .avatar-image-container,
.comments .comment .comment-thread.inline-thread .comment .avatar-image-container img {width
:ment-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. Save Template

Ok,sekarang tampilan komentar blog kalian sudah lebih bergaya seperti Facebook.