Buat Komentar Blogger Seperti Komentar Fb CSS

kali ini kita akan belajar cara membuat komentar di blog mirip Facebook dengan CSS
Kali ini saya tidak akan panjang lebar memberikan tutornya, karena memang ini sangat mudah.. baik ikuti langkah-langkah dibawah :
1. Login blogger
2. Masuk pada Template => Edit HTML => Centang “Expand Template Widget”
3. Kemudian cari kode ]]></b:skin>, tekan F5 aja biar cepat mas...
4. Copy CSS code komentar dibawah ini (harap jangan memodifikasinya) :

Judul Spoiler:

/* CSS Komentar Blogspot - Tema Facebook * Selengkapnya: https://facebook.com/rama.banten */ .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 10px; border-top:1px solid #e9e9e9; border-left:1px solid #ccc; }.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. Pastekan diatas code ]]></b:skin>tadi

6. Save template
Silahkan cek, semoga sukses... :)