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!

Customize "Embedded Below Post" Comment Box

Salam Semua...
Kali ni saya nak share dengan anda macam mana nak customize comment box mengikut warna kesukaan anda... tak pun ikut warna yang matching dengan warna blog anda barulah nampak kemas kan? sedap mata memandang... eceh!
contohnya adalah seperti gambar di bawah ni... saya suka warna pink.. jadi saya customize kepada warna pink...

Cantik tak? mesti kata cantik! hehe kalau cantik... mesti nak buat juga kan? apa lagi... cepat ikut step ni...

1. Login ke Blogspot
2. Tekan Settings > Comments dan settingkan comment form seperti gambar dibawah

*Kalau tak setting macam ni... nanti comment box yang cantik itu tidak dapat dipaparkan...

3. Klik Layout > Edit HTML > klik Expand Widget
Klik Download Full Template (Untuk Back-up template) ini penting!

4. Tekan CTRL+F untuk memudahkan anda mencari kod . Masukkan kod ]]></b:skin> kedalam kotak Find dan tekan Enter

5. Copy Kod dibawah dan Pastekan diatas atau sebelum kod ]]></b:skin>

#comments-block{
margin:0;
padding:0;
}

#comments-block .comment-author{
background:#ff85a6 !important;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
padding:5px;
font-size:15px;
font-weight:bold;
border:1px solid #ff85a6;
}

#comments-block .comment-body{
margin: 0;
font-size: 16px;
border-left: 1px solid#ff85a6;
border-right: 1px solid#ff85a6;
margin-top: -5px; /*position*/
padding: 5px;
}

#comments-block .comment-footer{
margin:0;
font-size: 12px;
font-weight: normal;
margin-bottom: 20px;
border-left: 1px solid #ff85a6;
border-right: 1px solid #ff85a6;
border-bottom: 1px solid #ff85a6;
-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:#ff85a6 !important;
}

Anda boleh customize warna comment box anda di #ff85a6 dan warna tulisan di #ffffff.
Kod warna boleh didapati di sini

Selamat Mencuba...

Whitey Note: Sifu untuk tutorial ini adalah Mommy Pinky Sila tinggalkan komen ya selepas mengambil tutorial ini...
=)


23 Comment (s):

  1. Salam..

    Siz , can u teach me how and where to adjust the size for comment box ni?..i tried already ,but still not working..huhu :((

    ReplyDelete
  2. camna nak adjust saiz comment box??

    ReplyDelete
  3. @eyra
    #comments-block{
    width:XXpx;
    margin:0;
    padding:0;
    }
    kat dalam code yang saya higlight tu...
    kat XX tu... taip jumlah ukuran yang saudari nak...

    ReplyDelete
  4. saya try..menjadi!tutorial yg clear!..
    tinkiu white mommy

    ReplyDelete
  5. salam whitey mommy..
    iena da try wat cm yg d tnjok kan kat ats uh..
    tp x jd pon..
    byk kly dah try,. huhu

    ReplyDelete
  6. mommy. . . dah jadi . . . tpi knpe orang nk komen tk boley eak ?

    ReplyDelete
  7. hye mommy!! farah dah try wt cm kt atas memg menjadi tp farah ade mslh dr segi nk adjust size comment box,xthu la cmne..huhu~

    ReplyDelete
  8. nak try buat takut tak menjadi pulak..takpelah try jelah..hehehe :)

    ReplyDelete
  9. salam.Hanis nak tanya macam mana buat kotak Post A Comment Bawah ni?..Cantik sangat!

    ReplyDelete
  10. Thanks W.M :) Saya ambil tutorial ini ya . Saya sudah creditkan :)

    http://maniastory.blogspot.com/2011/01/tutorial-cantikkan-comment-box.html

    ReplyDelete
  11. saya ada masalah reply to comment ni bila komen yang saya reply tak terletak dibawah komen yg di reply tu.kenapa? tlg bantu saya

    ReplyDelete
  12. @Faisyah
    memang macam tu la... ini bukan sistem... ini just link je... kalau awak ada 5 komen... awak reply...dia akan menjadi komen yang setrusnya.
    boleh rujuk pada entry2 saya yang saya ada reply komen.. memang macam tu.

    ReplyDelete
  13. salam mommy..nak tanya kalau kita nak delete kodding terdahulu bahagian komen ni mcm aner yer??bab nak wat mcm mommy punya tutorial ni..

    ReplyDelete
  14. @Cik Nurul Pinky
    wasalam...tambah je...sebab kalau nak delete...takut ada kod lain yang terdelete...nanti semua lari setting. kalau nak delete...kena perhati betul2 la...which part yang sama...delete...yang tak sama...kekalkan.

    ReplyDelete
  15. Hi Whitey Mommy...
    I like your blog, comel sangat..Thanks for sharing this tutorial. I have been looking for this trick. like for ages...hehe

    It works very fine in my blog. I was like *HOOORAY!* at first. But a new problem arise: when I make a new post after this implementation done, my comments box suddenly missing. WHAT'S HAPPENING? *muka cemas* but older post still shows the comments box.I did try this implementation on my test blog, but it's working just fine there. Any idea? *muka sedih*

    Thanks in advance for ur kind help. My blog is http://www.healthybeautifulblog.blogspot.com

    ReplyDelete
  16. Mommy, trimas-trimas :D tantek lah (perghh ayat) :) hehe

    ReplyDelete
  17. nak tanya , macam mane nak copy code yg kat atas tuh ??? ye ..

    ReplyDelete

Thank You For Leaving a Comment to Me...

 
Copyright © Whitey Mommy™