Tutorial kali ini tentang komentar Blogger menyerupai Facebook, dengan penambahan kode CSS. Kode CSS ini dipersembahkan oleh hompimpaalaihumgambreng, dan saya edit sedikit dengan menghilangkan garis pinggir dan perubahan padding-left dan padding right. Contoh hasil tampilan komentar blogger seperti facebook (facebook style) bisa dilihat pada screenshoot di bawah, atau bisa Anda kunjungi Live Demonya.
Cara Membuat Komentar Blogger Seperti Facebook
1. Login ke Blogger2. Klik Template --> Edit HTML
3. Cari kode
]]></b:skin>4. Tambahkan kode ini diatas
]]></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 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
Treneng... komentar Blogger anda sudah kini sudah berubah dengan gaya facebook.
Sumber
