Membuat Tampilan Komentar Berbeda Untuk Pemilik Blog

Browse » Home » HTML Tutorials » Membuat Tampilan Komentar Berbeda Untuk Pemilik Blog

Membuat Tampilan Komentar Berbeda Untuk Pemilik Blog

Ditulis oleh Kang eNeS Minggu, 02 Mei 2010. 21.00
Label: HTML Tutorials komentar (47)

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, apakah ada perbedaan? Atau lihat contoh blok komentar pada blog Sastra Culun ini.

Ok, segitu aja sob. Semoga bermanfaat .....

Membuat Tampilan Komentar Berbeda Untuk Pemilik Blog

Artikel Terkait Dengan HTML Tutorials

47 komentar Posting Komentar

Tambahkan Komentar

10 Artikel Terbaru

10 Artikel Terpopuler

Blog Tutorials

Seputar SEO

HTML Tutorials

CSS dan Javascript

Komputer dan Internet

Agama

Politik

Sosial Budaya

Sekedar Coretan

Yang Baru Dari Sastra Culun

Direkomendasikan Teman Facebook

47 komentar
Posting Komentar