Membuat Tampilan Komentar Berbeda Untuk Pemilik Blog

Pada kebanyakan template, tampilan comment-body untuk komentator dan author (pemilik/admin) tidak dibedakan sehingga warna huruf, background, maupun bingkai (border) kelihatan seragam. Akibatnya, agak sulit untuk membedakan mana komentar/jawaban admin dan mana yang bukan jika tidak diberi tanda @ pada saat admin me-replay komentar kita.

Untuk mengatasi hal tersebut kamu bisa membuat tampilan berbeda pada comment-body. Dengan membuat tampilan yang berbeda ini, selain untuk memudahkan "pembedaan" tadi, juga agar tampilan blok komentar menjadi lebih menarik.

Langkah-langkah yang harus kamu lakukan dalam membuatnya adalah sebagai berikut:

Langkah Pertama

• Dari halaman dasbor, klik Tata Letak - Edit HTML.
• Lakukan duplikasi template untuk jaga-jaga bila terjadi masalah.
• Beri tanda centrang pada Expand Template Widget.
• Kemudian cari kode berikut (gunakan Control F atau F3):
  
  <dd class='comment-body'>
• Jika sudah ketemu, tambahkan script ini di atasnya:
  
  <b:if cond='data:comment.author == data:post.author'>
  <dd class='comment-body-author'>
  <p><data:comment.body/></p>
  </dd>
  <b:else/>
• Setelah itu cari kode penutup dd seperti ini (perhatikan warna biru):
  
  <p><data:comment.body/></p>
  </b:if>
  </dd>
• Jika sudah ketemu, tambahkan penutup b:if ini di bawahnya:
  
  </b:if>

Langkah Kedua

• Carilah kode CSS untuk comment-body, lalu kopi CSS tersebut (berikut atributnya) dan paste di bawahnya.
• Setelah di-paste, ubahlah kalimat comment-body menjadi comment-body-author dan tambahkan perintah untuk warna huruf (color) dan latar (background). Misalnya seperti ini:
  
  .comment-body {
  atribut perintah pada comment-body
  }
  
  .comment-body-author {
  atribut yang sama dengan atribut pada comment-body
  color:#333333; /* warna huruf */
  background:#F6F6F6; /* warna latar */
  }
• Aturlah warna huruf dan warna latar sesuai keinginanmu.
• Jika tidak ada, buatlah kode CSS untuk comment-body-author yang diletakkan di atas ]]></b:skin> (sebaiknya ditempatkan pada deretan CSS untuk Comments), seperti ini:
  
  .comment-body-author {
  margin:0px;
  padding:5px;
  color:#333333; /* warna huruf */
  background:#F6F6F6; /* warna latar */
  border: 1px solid #CCC; /* warna bingkai */
  border-radius:7px;
  -moz-border-radius:7px;
  -webkit-border-radius:7px;
  }
  Pada kode CSS di atas menggunakan peritah border radius. Kamu bisa menghapusnya jika mau.
• Aturlah ukuran margin, padding, warna huruf, warna latar, dan warna bingkai sesuai keinginanmu.
• Selanjutnya, cari kode CSS untuk comment-body p, lalu ubah menjadi comment-body p, comment-body-author p (dengan tidak mengubah atribut perintah yang ada), seperti ini:
  
  .comment-body p, comment-body-author p {
  atribut perintah pada comment-body p
  }
• Jika tidak ada, buatlah kode CSS berikut di bawah CSS untuk comment-body-author, seperti ini:
  
  .comment-body-author p {
  margin:0px;
  padding:10px;
  }
• Aturlah ukuran margin dan padding sesuai keinginanmu.
• Simpan hasil editing ini dan ucapkan Alhamdulillah.....

Sekarang, coba lihat kotak komentar blog kamu yang sudah terisi. Lihat perbedaan antara komentar kamu dan komentar orang lain.
Semoga Bermanfaat

Artikel Terkait: