Membuat Area Komentar Kotak Terpisah

Postingan saya terdahulu membahas tentang Membuat Area Posting Kotak Terpisah Nah postingan kali ini saya akan membahas tentang cara Membuat Area Komentar Kotak Terpisah. Sebagai contoh saya ambil dari template saya ! mungkin template kamu berbeda tapi masih mirip-mirip kok ! Ini contoh gambar nya :



Langsung aja yach ..

Masuk ke Blog kamu dengan ID kamu:

Kemudian Tata Letak

Langsung klik Edit Html

Untuk berjaga-jaga kalau gagal mengedit Backup template kamu klik aja Download Template Lengkap dan save !

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;
}

Hapus kode di atas dan ganti dengan kode ini :

#comments h4 {
background:#EAE9E9;
margin:1em 0;
font-weight: bold;
font-family:"Trebuchet MS";
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: #000000;
}

#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
border:0px dotted #ccc;
}
#comments-block .comment-author {
color:#808080;
margin:.5em 0;
border-top:1px dotted #ccc;
}
#comments-block .comment-body {
text-align:justify;
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
border-top:0px dotted #ccc;
font-size:9px;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.comments {
background:#ffffff;
border:1px solid #6E6E6E;
margin:0 0 0.5em;
padding:0.5em;
}

Kalau sudah klik Simpan Template dan Selesai

Silahkan utak-atik sendiri sesuaikan dengan template blog kamu !