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. fyna nak try lah macam nih.
    ;)

    ReplyDelete
  2. code yang mana utk tukar colour ye?;)

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

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

    ReplyDelete
  5. @ Shalina Samsudin:yeeah..heheh

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

    ReplyDelete
  6. hehe! merata2 tutorial skg. :)

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

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

    ReplyDelete
  9. 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
  10. 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
  11. Salam,
    kenape saya xdapat tukat font n background kaler comment macam yang u ajar dalam tu ye?

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

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

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

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

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

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

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

    ReplyDelete
  19. 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
  20. Kenapa tak jadi?. Sedihnya :(

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

    ReplyDelete
  22. 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
  23. Salam,kak Dil boelh x nk request tutor..

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

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

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

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

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

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

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

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

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

    ReplyDelete