Tuesday, December 21, 2010

Tutorial 29 : Mencantikkan Comment Box

Salam..
I nak tulis tutorial ini semalam tapi berokband dah buat band then tak mahu berkhidmat kat tuan dia so I pun mengalah la kan...kesian!!
U all nak tak komen box cantik macam i punya seperti ini?


Cantik tak? kalau tak cantik sila angguk juga!! kalau tak i tak mahu kasi tutorial lagi! hehehe..gurau je..
Ok.. macam ini caranya..sila ikut step ini ye..kalau tak ikut betul-betul nanti tak boleh jadi tau..

1.Login ke Blogspot, clik design/ layout > Edit HTML > tick Expand Widget Templates
2. Cari code ini...sila gunakan Ctrl F untuk mencari :

]]></b:skin>
3. Dah jumpa? Sila Copy code di bawah  dan Paste DI ATAS code yang u all cari tadi...

#comments-block{
margin:0;
padding:0;
}
#comments-block .comment-author{
background:#ff6699 !important;

-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;


padding:5px;

font-size:15px;

font-weight:bold;

border:1px solid #ff6699;
}
#comments-block .comment-body{
margin: 0;

font-size: 17px;

border-left: 1px solid #ff6699;
border-right: 1px solid #ff6699;
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 #ff6699;
border-right: 1px solid #ff6699;
border-bottom: 1px solid #ff6699;

-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;
}
 4. Lepas itu sila tukar code yang I merahkan dengan code warna yang u all suka. Nak pilih warna sila ke SINI

UP DATE!!!

Kalau korang nak melengkung bahagian border tu boleh ubah tulisan warna purple:
-moz-border-radius-bottomright: 10px;

10px tu boleh ubah kepada 30px semakin besar nombor semakin melengkung.

5. Nak kelainan ? solid itu boleh ditukar kepada dotted atau dashed
6. Kemudian u all SAVE je la ye..tapi kena betulkan bahagian setting dulu ye..


Pergi ke SETTING > COMMENT > cari COMMENT FORM PLACEMENT > tick EMBEDDED BELOW POST


7. Lepas itu try la tengok hasil nya..menjadi tak? Harap komen lepas buat ye..
SHARE:

100 comments

  1. thanks for the tuto . .
    sngt begune tok sye . .
    yg bru mle ber belog . .
    (^_^)!!

    ReplyDelete
  2. macam mane sis buat ade sampul surat tu and cm mane nak tuka words comment kepade icon or pic . :) aja pliss .

    ReplyDelete
  3. thank 4 ur tutorial...senang sgt 4 new blogger like me :P

    ReplyDelete
  4. dh try wat..tp jd cmnie...hope ley tlg...=)
    http://miszhaznie.blogspot.com/2011/05/mai2-bli-brg-secara-on9.html
    pas 2 nak setting pown xreti sgt

    ReplyDelete
  5. TAK DAPAT PUN TUKAR NI..NAPA TAK JADI???

    ReplyDelete
  6. thanks for tutor. good. sgt mbantu, nak share kat blog boleh?

    ReplyDelete
  7. dh jd dh..tq cik farah..hee...:)

    ReplyDelete
  8. Tahniah pada yang jadikk..yang tak jadi tu cuba-cuba lagi yerr

    ReplyDelete
  9. waa!!!thanxx sesangat wat tuto nie..da jadik....:)

    ReplyDelete
  10. Tak jadi laa kak , dye keluar navbar .

    ReplyDelete
  11. assalammualaikum akak comel... akak, ermm, macam mane nak letak icon dekat sebelah blog archive eh..? maksud saye, dekat setiap title pade blog archieve tu, ade icon2 dia.. macam mane eh..? akak boleh tolong ajarkan tak..? terime kasih akak..

    ReplyDelete
  12. culik tuto nih , hihihi
    makaseh ye tuan kemah :)

    ReplyDelete
  13. erm , nak culik kotak ' reply here ' tu buleh x?
    sweet la . buleh ye , buleh ye . .
    tingin sgt ni . huhuu

    ReplyDelete
  14. salam..
    nak tanye , mcm mane nak bagi gambar org yg komen tuu betul2 masuk pada kotak komen ?
    kalau kurang faham , akak dijemput untuk jenguk ruangan komen di blog saya..
    sekian , TK :)

    ReplyDelete
  15. salam kenal..

    nice tuto.. but sy x dpt la komen box camni kat blog sy.. kenapa ek? salah copy code ke?
    blh tlg tgk x? tuto lain ok je..

    ReplyDelete
  16. THANKYOUU kak ? :DD menjadi laa , THANKS sgt - sgt ~ :))

    ReplyDelete
  17. erkk..susah bgi saya yang terlalu junior dlam dunia blogger ni. :(

    ReplyDelete
  18. SALAM, cik faraah.. sy try nie.. nape name pengomen jadi double ek.. :)

    ReplyDelete
  19. thanx kak farah . marina dh buat , menjadi . love your blog so much . mohon follow mane-mane tutorial ye ?

    ReplyDelete
  20. tq kak sbb buat tutorial nie ianye bergna untk syer :)

    ReplyDelete
  21. terima kasih kak farah....dah jadi....=D

    ReplyDelete
  22. @♥Miss Farah♥??????????? tak jadilah....
    dah ikut semua langkah tu.. hahhahaha.. kosong je.....

    ReplyDelete
  23. @♥Miss Farah♥terima kasih akak ... sebab akak la blog saye jadi cantik ...hehe ..tq sangat2 ...

    ReplyDelete
  24. @♥Miss Farah♥ aqk kiter tak jumpa yg "commet from places" kq tq

    ReplyDelete
  25. tak jadi..bencilah kalau buat sesuatu tak menjadi..

    ReplyDelete
  26. @eFFa aZiZ

    kalau xjadi tndanya template awk xssuai la tu

    ReplyDelete
  27. @♥Cik Nurfarah♥, muahaha.. thanx ya.. akhirnya menjadi selepas menjenguk macam-macam blog tutorial.. yahoo.. :)

    ReplyDelete
  28. Kalau design tukar ke Template Macam mana gayah Tuhh ? HAHA !

    ReplyDelete
  29. @♥Miss Farah♥ kenapa ye dah tukar tp still gitu je? ada apa2 masalah ke? tp ley preview cuba xde apa yg berubah?

    ReplyDelete
  30. Heeee ! akak , Before this wat menjadi . . pastu dah bape ary langsung tak jadi . naPE eyh ? ? :-(

    ReplyDelete
  31. found diz on google.
    sjibik2 dy copy. hihi

    http://srisaidatulazeera.blogspot.com/2011/10/tutorial-mencantikkan-kotak-komen.html

    ReplyDelete
  32. @♥Cik Nurfarah♥ , kak farah.. takpelah Nurin buat tak jadikk..So, Nurin try buat kod sdiri then baru jadi..

    ReplyDelete
  33. hwuaaa.. terharu smpai nk lompat2 sbb tuto awk menjadi.. byk2 tuto yg sy ikut tuto ni pling mnjadi.. thanks ye

    ReplyDelete
  34. akak ... npa x jadi yaa...
    xde pa2 pun...

    ReplyDelete
  35. Yeppi..kali nie menjadi..dah 3x kali try...xjadi2x..then mlm nie try lagi alhamdulillah menajdi awk...terima kasih sgt2x...tp xpandai nak hias2 bagai g...

    http://wadahberbicara.blogspot.com/2012/05/menang-hadiah-tiap-tiap-hari.html

    ReplyDelete
  36. kak farah...nape saya buat tak jadi ea??geramnyrr..hehe
    ^-^

    ReplyDelete
  37. nape name kat komen box nie jadi double?

    ReplyDelete
  38. kenape sy buat xjadik..?? sy dah try banyak kali tp still jugak xjadik..
    :( plez tolong sy...

    ReplyDelete
  39. kenape sy buat xjadik..?? sy dah try banyak kali tp still jugak xjadik..
    :( plez tolong sy...

    ReplyDelete
  40. cik farah, knp sy punye tak boleh paste code yg di copy tu.. paste kt atas kan ??

    ReplyDelete
  41. hi, can i know how to change the background colour?..for example the top border, i want to fill with pink coulour n boacground where the comment showed i want in white...please help me n TQ..=)

    ReplyDelete
  42. kenapa saya punya tak dapat???Sedih saya.:(

    ReplyDelete
  43. tengkiu miss farah :) love you muahmuahh :)

    ReplyDelete
  44. tengkiu miss farah :) love you muahmuahh :)

    ReplyDelete
  45. done..thanks.

    http://cintazakirah.blogspot.com/2013/05/allahuakbarombak-ais_14.html

    ReplyDelete
  46. hurmm , bru nk ikut tuto yg cantik nie..tngok mggunakan edit html , trus garu kpale..knapa ye edit html sy dah btukar ? xdek da tmpt nk tick expand widget templete..pelik benar tngok smpai xberani nk sentuh takot hilng apa2..smua blogger cmtu ke or blog sy ade msalah eh ?

    ReplyDelete
  47. @mimi zakaria xla kak,mmg da bertukar, xtau da mcm mane nak buat

    ReplyDelete
  48. korang...semua blog memang dah tak ada tick expand widget template. kalau nak mudahkan , EDIT HTML---->FORMAT TEMPLATE---->CTRL F--->then pastelah code tu. tapi kalau tak keluar juga, kena pandai ubah2 coding dia sikit,kalau lucky,jumpalah coding tu.

    Kak Farah,dekat setting comment tak ada tick embedded below post. macam mana nak buat ek??
    Btw thanks sebab sudi kongsikan tuto . memang kebaboom la blog kak Farah ni ^_^

    ReplyDelete
  49. as salam dear.. nape click CtrlF xkua pape pun... iskk..

    ReplyDelete
  50. dekat coding tu ada anak anak panah hitam dekat sesetengah no tu.kena klik semua anak panah tu baru boleh ctrl + F balik. nak ctrl+f kena tekan dlu dalam kotak coding tu baru jumpa..btw.nice tuto..banyak ambik tuto kat sini.tp dekat setting takde pun tempat nak tick embedded below post..blog yang cantik

    ReplyDelete
  51. assalamualaikum dan salam sejahtera<jemput singgah ke laman http://www.pokucu.com/ ,sekian terima kasih ....

    ReplyDelete

-Assalamualaikum, sila tinggalkan komen anda.
-Kalau suka tekan LIKE.
-Insyaallah komen anda akan dilayan :)

Jangan lupa LIKE! dan SHARE!

Terima kasih :)

Blogger Copyright © 2019. All Rights Reserved by BLOG CIK NURFARAH