Memodifikasi kotak komentar pada blog

Memodifikasi kotak komentar pada blog ini yang akan kita bahas. dimana salah satu teman yang meminta saya agar sudikiranya untuk membuat post modifikasi komentar seperti yang saya punya. silahkan lihat contoh di komentar artikel lain jika belum ada komentar di artike ini. atau bisa lihat contoh gambar di bawah ini.

Nah di mana nama pengomentar dan isi komentarnya saling berdampingan, tentunya ini sangatlah menghemat tempat, selain itu kelihatan menarik dan simpel. nah mungkin anda juga tertarik untuk membuat nya, silahkan ikuti langkah-langkah yang tertera di bawah ini.

Berikut langkah-langkah cara membuat nama pengomentar dan isi komentar saling berdampingan.

Login ke blogger
Klik Rancangan
Edit HTML
Beri tanda centang pada "Expand Template Widget"
Kemudian cari kode di bawah ini
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}

#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
Hapus kode tersebut kemudian ganti dengan kode di bawah ini
.commentlistdiv{margin-top:10px;background:#FFF;border:1px dotted #ddd;font-size:.75em;color:#666;padding:20px}
.commentlistdiv h1{font-size:1.3em;color:#366799;border-bottom:1px solid #eee;line-height:1.5em}
.commentlist li{background:#fff;border-bottom:1px dotted #ddd;padding:20px}
.commentlist li.alt{background:#fff}
.deleted-comment{font-style:italic;color:gray}
.feed-links{clear:both;line-height:2.5em}
.pane_l{float:left;display:inline;width:160px;min-width:160px;max-width:160px;border-right:1px dotted #ddd;padding-right:20px;margin-right:20px}
.c_author{font-size:.9em;font-weight:700;margin:0 0 7px}
.c_avatar{display:block;margin:0 0 7px}
.c_date{color:#aaa;font-size:.9em;margin:0 0 7px}
.c_approved{color:#aaa;font-size:.9em}
.comment-form{background:#414141;border:5px solid #ccc;margin:0 10px 20px;padding:10px 0 0 20px}
.owner-Body p{font-size:100%;color:red;text-decoration:bold;margin:0 0 .2em}
.pane_r,.owner-Body{display:block;line-height:1.5em;margin-left:201px}
.comment-link{margin-startside:.6em}
Kemudian cari kode di bawah ini

1:

:
Ganti kode tersebut dengan kode di bawah ini
1 :

:
Simpan tamplate anda...
Sekarang silahkan lihat hasilnya di komentar blog anda

Silahkan ubah suaikan jika belum pas lebar atau padding dan marginnya, karna setiap tamplate hasilnya akan berbeda. yang pastinya kode tersebut tidaklah mutlak seperti itu, anda bisa memodipikasinya sendiri agar sesuai dengan keinginan anda masing-masing. semoga artikel ini bermanfaat dan jangan lupa tunggu update terbaru ku selanjutnya. salam sukses....

.

Top Music