Cara Membuat Kotak Komentar Blog Menjadi Keren Dengan CSS

Kali ini Saya akan membahas Cara Membuat Kotak Komentar Blog Menjadi Keren Dengan CSS.
Pasti kalian bosan kan dengan tampilan kotak komentar yang hanya begitu-begitu saja yang sangat standar dan ingin merubah sedikit lebih keren dari yang sebelumnya ?
Baiklah tanpa berlama-lama ikuti saja langkah-langkah yang ada di bawah ini, check this out ↓

Demo

Berikut cara membuatnya :

• Login ke blogger.com, jika sudah,
• Pilih Template → Edit HTML → Centang Expand Widget Template
• Cari kode ]]></b:skin> agar mudah mencari tekan (ctrl+f)
• Kemudian letakkan kode berikut ini di atas kode ]]></b:skin>

.comment-content{white-space: pre-wrap;width: 95%;word-wrap: break-word;}
.comments .comments-content .comment {background: white;position: relative;border-radius: 0px 100px 120px;padding:5px;}
span.comment-actions, .continue {width:120px;background: #F1F1F1;border-radius: 20px 20px;text-align:center;font-weight:bold;text-decoration:none !important;}
span.comment-actions:hover, .continue:hover {background: #EBDDE2;text-decoration:none !important;}
.secondary-text{padding: 6px 12px 6px;text-decoration:none !important;}
.comments .comment .comment-actions a:hover{text-decoration:none !important;}
.comment-replies span div ol div li span {display:none !important;}
.comments .thread-toggle {background: #F3F3F3;border-radius: 20px;padding: 6px 12px 6px;font-weight: bold;}
.comments .thread-toggle:hover {background: #EBDDE2;}
.comments .comment-block {padding: 11px !important;margin-left: 48px;position: relative;left: 60px;background:#F1F1F1;border-radius: 10px;width: 400px;}
.comments .avatar-image-container img {overflow:visible !important;width:40px !important;}
.comments .avatar-image-container {width:40px !important;background: #F1F1F1;padding: 5px;border-radius: 100px;}
.avatar-image-container img,.avatar-image-container a img, .avatar-image-container {border-radius:20px;position:relative;height:40px;width:40px;background-clip:padding-box;}
.comments .avatar-image-container {max-height:50px !important;}
.comments .comments-content .comment-header {width: 450px;background:#F1F1F1;position: relative;left: -73px;}
.comments .comments-content .user {font-style: normal;font-weight: bold;position: relative;left: 80px;}
.comments .comments-content .datetime {position: absolute;left: 270px;}
.comment-thread ol div.continue {display:none !important;}

• Simpan dan lihat hasilnya.

Sumber