Mengubah Desain Kotak Komentar

Komentar itu penting. Untuk apa? Untuk memberi saran atau lainnya seperti buku tamu. Banyak orang yang blognya komentar dinonaktifkan. Itu seharusnya menjadi blog pribadi, bukan publik. Kotak komentar sederhana sedikit disukai orang-orang. Untuk membuatnya lebih indah, keren, atau lainnya, bisa dilihat disini . Mudah kok, hanya beberapa tahap. Mula-mula, login ke Blogger. Pilih Blog.

Tahap 1 Tambahkan CSS

1. Pilih Template > Edit HTML.

2. Cari kode ]]></b:skin> dengan CTRL+F.

3. Pastekan kode ini tepat di atasnya.

/* kotak komentar */

#comments{overflow:hidden}
#comments h4{display:inline;padding:15px;line-height:50px;background-image:url(http://icons.iconarchive.com/icons/raindropmemory/down-to-earth/48/G12-Watercan-icon.png);
background-repeat: no-repeat; }
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative} #comments h4,.comments .continue a{}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#D65A5C; padding-left: 50px; }
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0} .comment-thread{color:#111}
.comment-thread a{color:#777} .comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .use a{color:#D65A5C}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB8un7YT6yjs9iUYmcpJ1Z07jdgSnOduAobpvpVZwCG_j5F2zHH7s5clVFSRUOIcIA6frpeLvDkYRmQ3zjBGrSwyIrZZ8axGWTI2rE63PU3P4_UF8Ufk5xsWtIEDI0YHYOXPQ1j1JFQvQ/s320/author-pink.png);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px} .comments .comment-thread.inline-thread .comment .comment-block{border:0;bac
kground:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px} .comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none} #comment-editor{width:100%!important}
.comment-form{width:100%;max-width:100%}
h4#comment-post-message {
font-family: 'Calligraffitti', cursive;
font-size: 40px;
background:transparent;
color: #A39192;
}

NB: Ganti kode yang berwarna merah ke icon-nya (bonus ke-1 bukan Author)
Ganti kode yang berwarna ungu ke Gambar author.
Galeri Gambar Author:
Warna Biru: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4ftTiVfyTtCZJlLdLMJfuQhT8ec-fQmG8EN3J6kMFPzf-SghZtjPLFgnYfJy87-6MvYTzcuJTbDWrDQNhoQY4kfRjlyDrjqiv-quAhXpYboAHb4cirT9vEqv0O0skfHPFrUIwEUcxfR02/s1600/biru.gif



Warna Abu Abu: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM-Ozikzy42tUpMvc169QGluoT2wxiMicJiyx2LZztFkwblyzdSkD8BWuc-o3YyNGBUWFF-nbC3IgI1jCWDwlxmwuaPGfP_gXU8TEou26SpcBK5T2eeqChweL7nDLZ2ef0MfCwNL31yfak/s1600/hitam.gif



Warna Merah: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaNvDhHDxdm6eIRkD5wC-pNgtc8S5rXdsF8_4pDsGr3tqe0DNHjkXzBG1nFsxetjigXbyiGggBY3VnbdBWC41rK3x8mB2MK2KD2qucovmRAjSJpXeFllOU4jWy_Qf1elEZtC_1QWio76yj/s1600/merah.gif



Warna Hijau: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzmH0nUloPGh0iSD4ZhVGJJUZeyxiMa-OduJdCr2PmAT7U8c0B9wNg28MRsVHnZOIWSo8A7WWaJSRclTVFBMxNww9WvSjJ6igvcCuXsnXXMnAe9br8AEeo7WlEi_jG-4froE60Ti_i4B62/s1600/hijau.gif



Warna Ungu: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiGaCDh2Zih7No-2CJOGTMH7-jyLe7_cuqVT36dEomXfQFDkdbJvsvM-yqT36PGA2w7yQYd6ssU_FPHLO7PU_dvdTotwPqou9RW__COrKbGMnqj0fZ-YwnxA7B3MZzGet25I5H9ASvSBd1/s1600/ungu.gif


4. Klik Simpan
Well done, cukup sekian. Semoga bermanfaat. Share ya!