Membuat Tampilan Author Berbeda Pada Kotak Komentar

Setelah kita membuat reply pada kotak komentar, langkah selanjutnya adalah membedakan komentar pemilik blog dengan komentar pengunjung. Untuk membedakan komentar pemilik blog dengan komentar pengunjung bisa dengan latar belakang warna, latar belakang gambar, garis pembatas komentar, membedakan jenis huruf atau kotak komentar yang dibuat agak menjorok ke dalam. Istilah yang sering dipakai oleh orang Inggris sana adalah Highlight author comments, artinya menyorot komentar pemilik blog, kalau orang Indonesia bilang membedakan tampilan komentar pemilik blog, kira-kira begitulah. Manfaatnya tentu saja ada, membedakan komentar pemilik blog dan pengunjung pasti membantu pembaca mengetahui bahwa anda telah memberi tanggapan atas komentar yang masuk dari pengunjung blog anda.

Secara default pada template blogger kita tidak dapat melihat perbedaan antara komentar pengunjung serta tanggapan dari yang punya blog. Semuanya disama ratakan oleh blogger. Agar lebih jelas apa itu Highlight Author Comments, di bawah ini saya berikan contohnya :


Dari gambar diatas yang warna kuning adalah komentar pemilik blog. Mungkin anda telah melihat modifikasi kotak komentar blogger yang lain seperti yang sudah pernah dijelaskan oleh para master blogger Indonesia. Baiklah, jika temen-temen ingin membuat kotak komentar yang seperti itu (bukan yang lain), anda bisa mengikuti cara berikut :
  1. Login ke blogger dengan akun anda
  2. Kemudian pilih Layout
  3. Setelah itu pilih Edit HTML
  4. Jangan lupa centang kotak kecil Expand Template Widget
  5. Backup template anda dengan mengklik link Download Full Template untuk jaga-jaga kalo terjadi kesalahan, anda bisa menggunakan template yang sebelumnya.
  6. Cari kode ini :
    #comments-block .comment-body p {
    .................
    .................
    .................
    }
  7. Letakkan kode berikut di bawah kode tadi :
    .owner-Body {
    background:#808080;
    margin-left:20px;
    color:#000000;
    }
    .owner-Body p {
    text-align:justify;
    margin:0 0 .75em;
    padding-left:10px;
    background:#F2F5A9;
    border-left:5px solid #2E2E2E;
    }
    Ganti kode "color = warna teks" "background = warna latar teks" dan atur jarak sesuai kebutuhan agar serasi dengan warna dan template blog anda.
  8. Cari kode <dd class='comment-body'>
  9. Letakkan kode berikut diatasnya :
    <b:if cond='data:comment.author == data:post.author'>
    <dd class='owner-Body'>
    <p><data:comment.body/></p>
    </dd>
    <b:else/>
    Tambahkan juga kode
    </b:if>
    Sehingga secara lengkap hasilnya akan menjadi seperti ini :
    <b:if cond='data:comment.author == data:post.author'>
    <dd class='owner-Body'>
    <p><data:comment.body/></p>
    </dd>
    <b:else/>

    <dd class='comment-body'>
    <b:if cond='data:comment.isDeleted'>
    <span class='deleted-comment'><data:comment.body/></span>
    <b:else/>
    <p><data:comment.body/></p>
    </b:if>
    </dd>

    </b:if>
  10. Simpan template dengan mengklik tombol SAVE TEMPLATE
  11. Selesai
Temen-temen lihat hasilnya, maka tampilan komentar pemilik blog akan berbeda dari komentar pengunjung. Terima kasih sekali lagi buat o-om.com atas tutorialnya Tampilan beda untuk komentar pemilik blog. Selamat mencoba dan semoga bermanfaat.

Post a Comment