Tutorial: Cara Highlight Comment Admin

Tutorial yang saya nak share, sebenarnya tutorial ini di request oleh seorang customer saya... Kak Aqish... jadi saya wat je la tutorial ek... kalau ada next customer nak request ni... saya minta charge extra ya... ngeh2... kalau ada yang nak buat ikut tutorial kat bawah...
[Perhatian: tak semua template akan compatible dengan tutorial ni... jadi untuk hasil yang terbaik... sila perhati dan follow betul2 ya tutorial ni... kalau tak dapat... cuba2la wat ya...dan kalau tak dapat lagi... tak dapat la den nolong... hehehehe]

1. Log In @ Klik ke Dashboard > Layout > Edit HTML > Tick Expand Widget Templates [make sure anda backup dahulu template anda sebelum mulakan tutorial ini... kalau tak jadi boleh backup balik... kerana jika berlaku kesilapan, bahagian post anda akan hilang... sila ambil langkah berjaga2 ya...]

2. Cari code ]]></b:skin dengan menggunakan kotak find [Ctrl+F]

3. Copy dan paste code dibawah diatas atau sebelum code ]]></b:skin.

.comment-body-author {

background:#ffffff url("url gambar pilihan anda") no-repeat scroll left center;

color:#000000;

padding-top:7px;
padding-bottom:7px;
padding-right:7px;
padding-left:80px;

}

4. Untuk mencantikkan kotak comment anda... sila rujuk tips dibawah ya...
*Bahagian yang saya highlightkan dengan warna merah... adalah untuk background... anda boleh pilih samada inginkan background yang mempunyai warna ataupun mempunyai image.... jika inginkan image... masukkan url... jika tidak, masukkan sahaja kod warna kegemaran anda...

** Bahagian yang saya highlightkan dengan warna purple adalah kod untuk mengubah warna tulisan anda... gantikan sahaja dengan kod warna kegemaran anda...

*** Bahagian yang saya boldkan dengan warna hitam, adalah untuk kedudukan image... anda hanya perlu ubah bahagian padding-left mengikut saiz image yang anda ingin masukkan...

****Harus diingatkan pada bahagian ini, daya kreativiti anda diperlukan untuk membuat kotak comment anda lebih menarik...

5. seterusnye cari code <data:comment.author/> pada kotak find.

6. masukkan code yang saya highlightkan dengan warna merah dibawah. Anda harus letak code ini betul2 ya seperti yang saya buat... jika tersalah satu kod pun... tutorial ini tidak akan berjaya...

<data:comment.author/>
</b:if>
</dt>

<b:if cond='data:comment.author == data:post.author'>

<dd class='comment-body-author'>

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

<dd class='comment-footer'>
<span class='comment-timestamp'>

7. Anda boleh save dan siap... Boleh la tengok hasilnya...

Tutorial kredit kepada: Edriena Hazelina

P/s: dah ambil tutorial ni... jangan la lupa komen ya...