Area Komentar Dalam Kotak Terpisah

Sekarang kita akan membuat area komentar dalam kotak terpisah. Artinya adalah bgaimana agar ada pembatas yang jelas antara bidang komentar dengan area lainnya. Tulisan saya sebelumnya tentang membuat area posting dalam kotak terpisah, maka yang sekarang pun tidak jauh berbeda. Hanya dengan menambahkan kode CSS pada template blog saja. Sebagai catatan, template Minima White adalah acuan saya dalam membuat posting ini. Mungkin ada perbedaan dengan template lain, namun pada dasarnya mirip. Mari diteruskan.

Oke, sekarang masuk ke intinya yaitu membuat area komentar dalam kotak terpisah.

1. Login ke blogger dengan id anda
2. Silahkan tuju Tata Letak
3. Pada tab menu pilih Edit HTML
4. Klik kotak kecil Expand Template Widget
5. Untuk backup, silahkan klik teks Download Template Lengkap
6. Cari kode 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;
   }

7. Berikutnya klik tombol Simpan Template
8. Selesai

Semua kode CSS itu masih bisa anda ganti dan utak-atik seperlunya saja asalkan disesuaikan dengan desain template blog anda. Nah, di bawah ini gambar perubahan yang terjadi :

Area komentar tanpa border


Area komentar dengan border


Bagaimana, cukup mudah bukan. Semoga tidak ada masalah berarti yang ditemui.
Untuk memudahkan edit template, gunakan link di bawah ini :
Kode warna untuk template blog
Border dan background pada template blog
CSS border padding dan margin
Oke semoga bermanfaat dan selamat mencoba. jika terjadi kesalahan, anda tinggal mengulanginya saja dan melihat preview dulu. Jika mantap silahkan disimpan.

Related Post:

or or