Free Tutorials - Jadi script ini bisa merubah desain kotak komentar di blogger mu dengan tampilan seperti diatas.
Berikut caranya :
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*/
6. Save
NOTE :
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.