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
Contoh background dengan background bergambar
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
5. Apabila selesai, save template dan lihat hasilnya.:)
Suka tutorial ini.?
45 comments:
Tak berat ke nanti..
nak tanya soalan yg sama jugak.hehehe
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.:)
oke . T'kasih ;)
nape kasih buat xjadi ye...then cmne nak apply blockquote 2 dalam entry mase post new en3
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
mcm mn ni sy keliru le...?? adus.. pening kpala..tlg plsss..
Salam
Terima kasih kepada anda yang sudi berkongsi segala ilmu. Semoga sentiasa mendapat rahmat ALLAH dalam apa juga keadaan, senang @ susah.
salam hormat,
byk info yg boleh diperolehi & dipraktikkan. terima kasih.
saya dah apply and jadi..tq banyak2 ya :)
Salam . Minta tolong sikit ek . Saya dah cari .post blockquote { . Tapi , tak ada . Macam mana nak buat ek ? Harap unwanted bolee tolong (:
ya tu lah . sy pon x jumpa jugak .
waa mcm nak buat post divider pon sma .
x jumpa kod tuh .huu
kenapa bila saya search .post blockquote { ,
dia tak kuar pape eh ?
.post blockquote {
xjumpa la kod nie... :(
nak wat cam mane??? :(
tak jumpa kod!
menjadi! tenkiu! :)
xjumpa lar kod " .post blockquote { "
cmne nie? xfhm lar...
xdapat buat
bile dah save tu bukak new post ek?
then?
kenapa x jumpa pun code tu :'(
soe .. i ta dpt buat ,, coz i tak de kod too .. cm ne erk ??
mana pergi unwanted nie..ramai tnya tak bls pon......*(((
:)
np i find kod tu at template i tp ta dpt..nk wt cmne eik??
tak dapat post nak find :(
x jadik laa..help! help!
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..
dah jadi :)
huh jenuh jugak nk buat
sume pn x leh.. x leh find apa2 pn...
ta dpt ppe pon ?
nothing happen ! --' how .
salam..dah try xjadik:(
hmm dh try tp xjadi2 pon,..sume cra dh try,..xjmpa apa2 pon,....hmmm =(
dah jadi..tq safwah
blockquote ni nak buat mcam mne ? xjmpe pun kod dia dkat edit html tu :(
btul ckp nuru anahh ,xjumpa pun kod dia !! huh.
thx
knapa kod .post blockquote { tu tak ada dalam template saya?
eh samalah, .post blockquote { tak ada dalam template saya juga (: Macam mana ya?
dapat jadik!!!
da cri semua kod2 tue .. tp 1 pon xde .. hadoii ..
cara edit pic dlm header pla?
kalau di tambah background berwarna jadi tambah keren
TAK JADIK LAA~! acanner ni ! penat buat~ fuhh
Post a Comment