Membuat Tampilan Komentar Berbeda untuk Pemilik Blog

Hai sobat blogger! sungguh hari yang sangat melelahkan hari ini. Kenapa? karena saat saya menulis artikel ini koneksi internet sempat terganggu di dunia Kampus Hijau. Akhirnya proses pengeditan sempat terganggu. Tapi tidak lama kemudian koneksinya sudah bisa jalan sehingga saya bisa memberikan tips ini kepada teman/sobat blogger semua.

Seperti biasa, saya ingin memberikan tips blog kepada teman-teman di sini, yang pasti setiap anda mepraktekkan tips yang saya berikan jangan lupa berkomentar yah....Soalnya komentar anda sangat bermanfaat buat perbaikan blog ini.

Huuuhhhhh....jadi ngawur yah ceritanya!. Tenang saja, itu sebuah refleksi buat hari ini. Oke langsung saja kita kepada pokok permasalahan yah. Membuat Tampilan Komentar Pemilik Blog Berbeda adalah sebuah tips yang lumayan rumit. Apalagi kalau kode-kode yang terdapat dalam tips ini tidak ada dalam script HTML blog kita, sungguh menyesalkan bukan?. Tapi tenang saja mudah-mudahan dengan tips ini, tampilan komentar blog anda berbeda dari pengunjung blog anda. Aminnnn

Tidak usah berpanjang lebar, langsung saja kita ke langkah-langkah cara membuatnya.

Langkah Pertama

1. Login ke blogger dengan Akun kamu

2. Setelah anda berhasil masuk, pilih Rancangan

3. Pilih Edit HTML, kemudian kamu cari kode seperti ini

<dd class='comment-body'>

4. 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/>

5. Kemudian cari kode penutup dd (perhatikan kode berwarna hijau)

<p><data:comment.body/></p>
</b:if>
</dd>

6. Jika sudah ketemu, tambahkan kode penutup b:if ini di bawahnya

</b:if>

 Langkah Kedua

1. Carilah kode css untuk comment-body kemudian letakkan kode berikut ini tepat di bawahnya

.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 */
}

Ganti tulisan .comment-body  menjadi  .comment-body-author.

>> Jika tidak ada, buatlah kode css untuk comment-body-author, 

yang diletakkan di atas ]]></b:skin> (sebaiknya ditempatkan pada deretan kode css untuk comments) seperti berikut:

.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.

> Kemudian aturlah margin. padding, color, backgroun, dan bordernya sesuai keinginan anda.

*Selanjutnya cari kode css untuk comment-body p. lalu ubah menjadi comment-body p, comment-body-author p tanpa mengubah atribut yang ada. 

.comment-body p, comment-body-author p {
atribut perintah pada comment-body p
}

*jika tidak ada, buatlah kode css untuk comment-body-author, seperti ini:

.comment-body-author p {
margin:0px;
padding:10px;
}

*Atur margin dan padding sesuai keinginanmua

*Jika sudah selesai, silahkan Simpan Template