Untuk Postingan kali ini saya akan membahas tentang cara membuat kotak komentar pada blog agar terlihat keren dan tampilannya seperti pada contoh gambar dibawah ini.

Untuk membuat kotak komentar seperti pada gambar diatas caranya sangatlah mudah,
Caranya yaitu sebagai berikut.

1. Anda login dulu ke blogger dengan menggunakan Account anda
2. Setelah anda login anda langsung masuk ke menu Template dan klik Edit HTML
3. Sebelum anda memodifikasi Template anda ada baiknya anda backup dulu template anda
4. Pada bagian Edit HTML anda Hapus semua kode CSS Comment anda
5, Lalu copy dan pastekan kode CSS dibawah ini untuk mengganti kode yang dihapus tadi

/*COMMENTS*/
#comments h4{color:#fff;font-size:16px;font-family:Tahoma, Arial, Verdana;font-weight:400;margin:0 0 5px;padding:0}
#comments{background:#111;border:1px solid #666666;margin:0 0 10px;padding:10px}
.deleted-comment{font-style:italic;color:gray}
#comments-block .comment-author,.profile-datablock{margin:.5em 0}
.comment-content{white-space: pre-wrap;width: 95%;word-wrap: break-word;}
.comments .comments-content .comment {background: trasnparent;position: relative;border-radius: 0px 100px 120px;padding:5px;}
span.comment-actions, .continue {width:120px;background: #555555;border-radius: 20px 20px;text-align:center;font-weight:bold;text-decoration:none !important;}
span.comment-actions:hover, .continue:hover {background: #de00ff;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: #c30000;border-radius: 20px;padding: 6px 12px 6px;font-weight: bold;}
.comments .thread-toggle:hover {background: #48ff00;}
.comments .comment-block {padding: 11px !important;margin-left: 28px;position: relative;left: 40px;background:#c30000;border-radius: 10px;width: 420px;}
.comments .avatar-image-container img {overflow:visible !important;width:40px !important;}
.comments .avatar-image-container {width:40px !important;background: #c30000;padding: 3px;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: 460px;background:#c30000;position: relative;left: -38px;}
.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;}
-webkit-box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
/*End Of COMMENTS*/

Keterangan :
Untuk Kode diatas yang berwarna merah diatas adalah ukuran lebar comment block sama comment header.
bila anda ingin menyesuaikan lebarnya agar sesuai dengan ukuran kotak komentar anda cukup merubah kode tersebut dengan ditambah atau dikurangi dengan ukuran yang sama. misa;nya yang tadinya ukuran pada comment block yaitu 420px terus ditambah 50px jadi 470px.nah pada comment headr juga harus ditambah 50px juga misalnya 460px + 50px = 510px. cara ini agar tampilannya terlihat kompak aja.

Selamat mencoba dan Semoga Artikel ini bermanfaat bagi anda, bila ada yang kurang jelas mengenai Artikel ini silahkan anda berikan komentar anda. Terima kasih