Hasil seni dan reka bentuk adalah berbayar dan hakcipta Whitey Mommy.
Sila hubungi saya di whiteymommy@yahoo.com untuk sebarang pertanyaan dan tempahan.
Anda TIDAK DIBENARKAN SAMA SEKALI untuk mengambil/menyalin/menyimpan
mana-mana bahagian hasil seni dan reka bentuk yang telah saya hasilkan TANPA KEBENARAN!

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

26 Comment (s):

  1. tengah belek2 tutorial nie..
    kalau sesuai .. anastasyea akan gunakan dalam blog anastasyea =)

    ReplyDelete
  2. errr..nak kena wat sendiri eh :p

    ReplyDelete
  3. thanks mommy utk tutorial nih..

    shira dah buat dah, menjadi..wee~~

    jemputlah baca entri baru, ia ttg lagu2an dan tarian di restauran..Over 30 Minutes, I'm OuUUTT.. di shirashafrida.blogspot.com

    ReplyDelete
  4. sis
    nape
    box penjuru kiri kanan saya hilang
    saya dah kecik kan saiz pic..same je

    mcm mane nak sama kan dengan saiz box commnt ni?

    ReplyDelete
  5. @ika
    Kena pandai ejas yang tu ikut tahap kelebaran saiz comment tu...try n error... Insyaallah berjaya... memang dia akan kosong... sebab ini coding tambahan...jadi tambah kod border.

    ReplyDelete
  6. eh , eh mommy .
    jdy laa atiya buat .

    TERIMA KASIH :]

    ReplyDelete
  7. try cuba buat tutor nie yer mommy =))

    ReplyDelete
  8. thanks..wlaupun mseh blom bjaye.hehe

    ReplyDelete
  9. Salam WM..
    rash try wat tuto ni memula tu xjd ape tp buke esoknye dh jd dh =)) Tq ya..

    ReplyDelete
  10. mintak tuto sikit yeaa . na cantik kan blog . :)

    ReplyDelete
  11. akk cmne nk wat icon yg tongsmpah n reply 2??

    ReplyDelete
  12. sng cte nk tuto kotak komen yg sbijik,sbulat cm kt atas 2..
    icon..siap ad gmbr kt tepi 2..

    ReplyDelete
  13. wokey.menjadi... cantik r. tyvm!

    ReplyDelete
  14. fuhhh~ penat..hehe.. byk kali menatap code smua ni..finally it's done!!~^^ Thank U So Much mommy :D

    ReplyDelete
  15. hy WM,
    i dah try buat..bila preview takde ape2 masalah..tp nape still x nampak perbezaannya? adakah sbb url?

    ReplyDelete
  16. @makdara TERdiva
    hai sis...
    baca betul2 kok...
    i tak de cakap pun kena preview...
    rujuk pada step no 7

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

    u kena save dulu baru tengok hasilnya...

    ReplyDelete
  17. finally, menjadik jugak buat.. makacih :D

    ReplyDelete
  18. Thanks Whitey Mommy :D Love all your tutorials ! :)

    ReplyDelete
  19. WM, kenape xleh nak select code tuh?? nak try tapi xleh nak select code tu.. mcm mana nak buat.. =(

    ReplyDelete

Thank You For Leaving a Comment to Me...

 
Copyright © Whitey Mommy™