Letak Background Gambar Pada Blockquote

Sebelum ini sudah ada tutorial untuk menukar warna background bagi blockquote. tetapi untuk kali ini, tutorial ini akan menunjukkan pula bagaimana untuk meletakkan background bergambar bagi blockquote.

Contoh blockquote dengan background warna biasa
Letak Background Gambar Pada Blockquote

Contoh background dengan background bergambar
Letak Background Gambar Pada Blockquote
Letak Background Gambar Pada Blockquote
Letak Background Gambar Pada Blockquote


Kelebihan letak gambar sebagai background untuk blockquote adalah untuk menjadikan blockquote lebih cantik dan menarik. semestinya anda ingin berbeza berbanding hanya meletakkan background berwarna yang biasa bukan.:)

Untuk menukar kepada background bergambar, tutorialnya adalah mudah sahaja.

Cuma sebelum itu, anda hendaklah tahu gambar apa yang anda mahu letak sebagai background blockquote anda. Ini kerana pemilihan gambar bersaiz besar adalah kurang sesuai. Gambar yang paling sesuai untuk dijadikan background untuk adalah background blockquote adalah jenis seamless tile.

Anda boleh google untuk pelbagai jenis background jenis ini, selain itu disini ada 2 web yang nawarkan seamless tile background. Boleh pilih gambar yang dirasakan bersesuaian dengan warna tulisan pada blog anda.

Free Seamless Tiles 1
Free Seamless Tiles 2

Tutorial untuk menukar background blockquote ini adalah seperti berikut.

1. Login > dashboard > design > edit HTML

2. Backup template asal blog dengan download full template

3.Dengan menggunakan fungsi Find (ctrl + F), cari kod berikut
.post blockquote {


4. Kemudian di bawah kod tersebut, letakkan kod ini.
background-image:url(url gambar);

url gambar: tukarkan dengan url gambar yang anda hendak jadikan background. ( Tutorial url gambar : click here)

p/s: contoh kod adalah seperti berikut
Letak Background Gambar Pada Blockquote

5. Apabila selesai, save template dan lihat hasilnya.:)

47 comments:

  1. nak tanya soalan yg sama jugak.hehehe

    ReplyDelete
  2. nk kata berat tu tak la sangat.
    sebab kalau saiz gambar utk blocquote ni tak la besar sangat. ada tidak sampai 10KB pun.:)

    lagi satu blockquote bukannya diletakkan pada setiap entri..:)
    lain la klu setiap entri ada 10 blockquote.:)

    itupun belum dapat menandingi kalau letak gambar kat entri yang bersaiz 100kb.:)

    ReplyDelete
  3. nape kasih buat xjadi ye...then cmne nak apply blockquote 2 dalam entry mase post new en3

    ReplyDelete
  4. button blockqoute ada kat bar ats masa taip entri.
    contoh untuk blockquote cam bawah ni.

    <blockquote> entri blockquote disini </blockquote>

    jgn terkeliru dengan teknik buat background dalam entri ye.:)
    http://tutorialuntukblog.blogspot.com/2010/02/background-dalam-sesebuah-entri.html

    ReplyDelete
  5. mcm mn ni sy keliru le...?? adus.. pening kpala..tlg plsss..

    ReplyDelete
  6. Salam
    Terima kasih kepada anda yang sudi berkongsi segala ilmu. Semoga sentiasa mendapat rahmat ALLAH dalam apa juga keadaan, senang @ susah.

    ReplyDelete
  7. salam hormat,

    byk info yg boleh diperolehi & dipraktikkan. terima kasih.

    ReplyDelete
  8. saya dah apply and jadi..tq banyak2 ya :)

    ReplyDelete
  9. Salam . Minta tolong sikit ek . Saya dah cari .post blockquote { . Tapi , tak ada . Macam mana nak buat ek ? Harap unwanted bolee tolong (:

    ReplyDelete
  10. ya tu lah . sy pon x jumpa jugak .
    waa mcm nak buat post divider pon sma .
    x jumpa kod tuh .huu

    ReplyDelete
  11. kenapa bila saya search .post blockquote { ,
    dia tak kuar pape eh ?

    ReplyDelete
  12. .post blockquote {

    xjumpa la kod nie... :(

    ReplyDelete
  13. xjumpa lar kod " .post blockquote { "

    cmne nie? xfhm lar...

    ReplyDelete
  14. bile dah save tu bukak new post ek?
    then?

    ReplyDelete
  15. soe .. i ta dpt buat ,, coz i tak de kod too .. cm ne erk ??

    ReplyDelete
  16. mana pergi unwanted nie..ramai tnya tak bls pon......*(((

    ReplyDelete
  17. np i find kod tu at template i tp ta dpt..nk wt cmne eik??

    ReplyDelete
  18. bagi yang tak boleh lagi tu korang cari code

    .post {

    pastu bawah code tu korang paste code

    .post blockquote {
    background:#kodwarna;
    }

    tp kalau xde jgk kod

    .post blockquote {

    dan

    .post {

    kita boleh tmbh dlm html tu...cmnie cre dia...cri

    .post-body {
    position: relative;
    }

    then paste kod nie kt bwh kod yg dicari sebelum nye..

    .post blockquote {
    background:#kodwarna;
    }

    bile dh paste akan jd cmni....

    .post-body {
    position: relative;
    }

    .post blockquote {
    background:#kodwarna;
    }

    preview tuk lihat jd ke x...then save..sy dh wt...jd..p/s:make sure backup template dlu eh..

    ReplyDelete
  19. dah jadi :)

    huh jenuh jugak nk buat

    ReplyDelete
  20. sume pn x leh.. x leh find apa2 pn...

    ReplyDelete
  21. hmm dh try tp xjadi2 pon,..sume cra dh try,..xjmpa apa2 pon,....hmmm =(

    ReplyDelete
  22. blockquote ni nak buat mcam mne ? xjmpe pun kod dia dkat edit html tu :(

    ReplyDelete
  23. btul ckp nuru anahh ,xjumpa pun kod dia !! huh.

    ReplyDelete
  24. knapa kod .post blockquote { tu tak ada dalam template saya?

    ReplyDelete
  25. eh samalah, .post blockquote { tak ada dalam template saya juga (: Macam mana ya?

    ReplyDelete
  26. da cri semua kod2 tue .. tp 1 pon xde .. hadoii ..

    ReplyDelete
  27. cara edit pic dlm header pla?

    ReplyDelete
  28. kalau di tambah background berwarna jadi tambah keren

    ReplyDelete
  29. TAK JADIK LAA~! acanner ni ! penat buat~ fuhh

    ReplyDelete