MENGGANTI TAMPILAN COMMENT PADA 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 berhasillll

Sekarang, coba lihat kotak komentar blog kamu yang sudah terisi. Lihat perbedaan antara komentar kamu dan komentar orang lain, apakah ada perbedaan? Atau lihat contoh blok komentar pada blog Sastra Culun ini.

Ok, segitu aja sob. Semoga bermanfaat ...