Mengubah Tampilan Komentar Blog Seperti Facebook Admin : Unknown

Cara Mudah Merubah Tampilan Komentar Blogger Seperti Facebook. 

Assalamualaikum wr.wb sobat blogger, pada kesempatan kali ini catatansaif akan memberikan tutorial blogger mengenai cara merubah / membuat tampilan komentar blogger seperti komentar Facebook. Sebelumnya sobat harus mengganti komentar blog dengan blogger threaded comment atau tampilan komentar baru blogger dengan fitur reply otomatis, jika sudah maka sobat bisa mengikuti panduan mengenai cara merubah tampilan komentar seperti Facebook berikut.

Dengan merubah tampilan blogger seperti Facebook ini akan menghasilkan komentar blogger menjadi lebih elegan dan keren juga enak untuk dilihat. Cara penerapannya pun cukup mudah, karena sobat hanya menambahkan CSS kedalam template blogger sobat. Nah jika ingin mencoba untuk merubah tampilan blogger threaded comment dengan tampilan komentar Facebook silahkan ikuti tutorialnya di bawah ini.

Sebelumnya harap duplikat / save template anda dulu sebelum diedit,jaga2 apabila terjadi kegagalan. setelah buat cadangan silahkan mulai edit. dengan panduan berikut :

• Masuk blogger.com dengan akun Anda
• Pilih Template → Edit HTML
• Letakan CSS di bawah ini sebelum ]]><b:skin>

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

• Jika sudah Simpan Template (Save Template).

Catatan: CSS asli / Bawaan sebelumnya harus dihapus.

Mudah bukan cara merubah tampilan komentar blogger agar menyerupai komentar Facebook. Semoga artikel yang berjudul Cara Merubah Tampilan Komentar Blogger Seperti Facebook ini bermanfaat.