Cara Membuat Komentar Blog Mirip Komentar Facebook

Merapikan susunan tampilan blog merupakan salah satu cara membuat pengunjung lebih betah berlama - lama mampir di blog anda. Susunan blog yang tidak karuan membuat pengunjung pusing dan tidak betah. Nah, pada tutorial kali ini saya akan menyajikan Cara Membuat Komentar Blog Mirip Komentar Facebook. Contohnya seperti dibawah ini.


Berikut langkah - langkahnya :
1. Masuk ke akun blog anda.
2. Klik Template>>Edit HTML. (sebaiknya backup data template, untuk menghindari adanya kesalahan dalam pengeditan)
3. Cari kode ]]><b:skin> , jika sudah ketemu letakkan kode dibawah ini sebelum kode ]]><b:skin> tadi.

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

4. Simpan Template.

Selamat mencoba dan semoga bermanfaat..
Jika telah berhasil atau terdapat keluhan jangan sungkan untuk berkomentar ya..
Baca juga : Cara Memasang Permalink Dibawah Setiap Postingan
Previous
Next Post »
Terimakasih telah berkunjung dan memberikan komentar