Jul 18, 2011

Tutorial Blog | Cantikkan kotak komen

Salam to all readers..


Tutorial kali ini, direquest oleh readers blog dil, yang nak sangat dil tunjukkan cara nak cantikkan kotak komen macam kat bawah ni..
















Step 1

Pergi dekat
Dashboard>Design>Edit html>Tick Expand Widget Templates

Cari code ini
]]></b:skin>

Step 2

Copy code kat bawah ini dan letakkan sebelum code step 1

#comments-block{
margin:0;
padding:0;
}
#comments-block .comment-author{
background:#FAAFBA !important;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
padding:5px;
font-size:15px;
font-weight:bold;
border:1px solid #ffffff;
}
#comments-block .comment-body{
margin: 0;
font-size: 17px;
border-left: 1px solid #FCDFFF;
border-right: 1px solid #FCDFFF;
margin-top: -5px; /*position*/
padding: 5px;
}
#comments-block .comment-footer{
margin:0;
font-size: 13px;
font-weight: normal;
margin-bottom: 20px;
border-left: 1px solid #FCDFFF;
border-right: 1px solid #FCDFFF;
border-bottom: 1px solid #FCDFFF;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
margin-top: -12px; /*position*/
padding: 5px;
}
#comments-block .deleted-comment{
font-style:italic;
color:gray;
}
#comments-block .comment-author a{
color:#ffffff !important;
}
#comments-block .comment-footer a, .comment-body a{
color:#ff6699 !important;
}

Cuba preview.. Kalau tak ada error, boleh la tekan button save dengan senang hati..^^



Tips: 

  • Tulisan warna biru adalah code warna untuk bahagian nama pengomen..
  • Tulisan warna merah adalah code warna untuk border bahagian kotak komen.
  • Korang bolehla menukar warna kotak komen, mengikut warna yang korang nak..Untuk melihat code warna, sila tekan kat SINI
  • Kalau korang tak nak guna edit html, korang boleh pergi dekat template designer > add css. Kemudian, copy dan paste kan code step 2 dekat add css..Kemudian save..Lagi senang..^^


nota kaki:

kalau tak faham, bolehla tanya dil..
kalau nak request tutorial, boleh jer..


56 comments:

  1. code yang mana utk tukar colour ye?;)

    ReplyDelete
  2. dah berjaya !
    tapi same colour dgn dil..
    mana ye nak tukar colour ? :)

    ReplyDelete
  3. @ misz fae:dil da hightlight kan part utk tukar warna tuu..^^

    ReplyDelete
  4. @ Taufan Bin Ribut:sama2..^^

    ReplyDelete
  5. @ Shalina Samsudin:yeeah..heheh

    oh kalau nk tukar kaler, tgk tips..dil ada bgitau..^^

    ReplyDelete
  6. hehe! merata2 tutorial skg. :)

    ReplyDelete
  7. wah, nak cuba jugak la..

    TQ dear

    ReplyDelete
  8. hai kakdil, wanie lagi.
    thanx again.jadi lagi.hahah.sonok2.
    hide shoutbx je probs now.tade effect dari td.kihkih. :)
    thanx again.

    ReplyDelete
  9. @ sayewanie:awak bg code shoutbox awak..nnti dil tlg editkan

    ReplyDelete
  10. okay !
    thxx..esok saya tukar colour .
    nak tido dah ni...hehe.
    ehh ! tak sempat nak baca pasal mak cik jururawat tu -,-
    selamat malam ! jangan lupa makan ubat ! ;)

    ReplyDelete
  11. dil, cemana nak tukar word 'comments' kpd ayat kta sendiri? n nape kat commt box akak xde kuar pic pun.. :(
    dil tgk dlu blog akak cmane..huhu..

    ReplyDelete
  12. Salam,
    kenape saya xdapat tukat font n background kaler comment macam yang u ajar dalam tu ye?

    ReplyDelete
  13. salam..
    cik dil.. singgah cni nak tengok tutorial.. ^_^

    ReplyDelete
  14. thanks cik mel...jadik la...excited gile..tapi..tapi...mcm cik mel punya..takpe ke???

    ReplyDelete
  15. kak dil..saye buat x bolela..nape erk???

    ReplyDelete
  16. Thanx..dh jadi ^^ c0mey...:-)

    ReplyDelete
  17. thanks for the tutors... Blog saya jadi tambah beautiful :)

    ReplyDelete
  18. thanx cik dil..saya menjadila..^ ^

    ReplyDelete
  19. dh jdik ! tp knp f0nt jdi kecik ? hohohoo . eply at pQa pnye shoutbox erh .

    ReplyDelete
  20. nape saye buat sekarang x menjadi erk?dulu menjadi.....

    ReplyDelete
  21. kak dil.. cane nak bagi background kat pengomen tu sampai ke kiri macam kak dil?? sebb saye buat jadi btul2 ikut border komen tu..

    ReplyDelete
  22. Kenapa tak jadi?. Sedihnya :(

    ReplyDelete
  23. salam kak dil..nape umira try tuto nie tak jadi..sedihnyerr :(

    ReplyDelete
  24. Salam kak dil..boelh x nk request tutor..
    Cmne nk buat kte nye content body ni warna putih cam kak Dil punya?leh tolong ajarkan..
    TQ

    ReplyDelete
  25. Salam,kak Dil boelh x nk request tutor..

    Cmne nk wat kte nye content body warna putih cam akk?Harap tolong ajarkan.Terimas

    ReplyDelete
  26. semua tutor di google da buat... Semua x jadik kenapa yek... tolong edit template saye yang degil ni

    ReplyDelete
  27. olrite dah menjadi..thanks..
    semua dijemput folow blog bru kite eh =)

    ReplyDelete
  28. Salam, cik dil. Boleh tak tunjuk tutor untuk template designer? Sebab semua tutor yg cik dil buad untuk classic template kan? ^^

    ReplyDelete
  29. akak,menjadi la,terima kasih

    ReplyDelete
  30. sy buat tp xmenjadi la..xpe..nnti sy cuba lg ok..tq for this tutorial..

    ReplyDelete
  31. hai cik dill.ika try buat tp x jd pon.touching nie.hewhewhew

    ReplyDelete
  32. Try dlu..Thanks :)
    www.kamarularnizam.blogspot.com

    ReplyDelete
  33. thnkz a lot... try dlu ea..

    ReplyDelete
  34. nape tak leh copy yer..uhuuhuhu

    ReplyDelete
  35. akak saye dah follow blog akak..
    akak kne follow blog saye balek..
    hehehe.. http://fidzul96.blogspot.com/

    ReplyDelete
  36. tak jadi pon..xjumpala step 1 tu

    ReplyDelete