Letak Background Gambar Pada Blockquote ~ ! Tutorial Blog

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

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:

PEJUANG KESENIAN EXTREMEJuly 14, 2010 at 8:55 AM
Tak berat ke nanti..
m6hidrogenJuly 15, 2010 at 4:18 PM
nak tanya soalan yg sama jugak.hehehe
unJuly 15, 2010 at 11:37 PM
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.:)
IKRAMJuly 17, 2010 at 2:36 AM
oke . T'kasih ;)
ayu toink2July 19, 2010 at 4:45 PM
nape kasih buat xjadi ye...then cmne nak apply blockquote 2 dalam entry mase post new en3
unJuly 19, 2010 at 5:42 PM
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
jayyernJuly 28, 2010 at 8:15 PM
mcm mn ni sy keliru le...?? adus.. pening kpala..tlg plsss..
Cikgu ZainunJuly 28, 2010 at 10:43 PM
Salam
Terima kasih kepada anda yang sudi berkongsi segala ilmu. Semoga sentiasa mendapat rahmat ALLAH dalam apa juga keadaan, senang @ susah.
Lela DafinahJuly 29, 2010 at 11:29 AM
salam hormat,

byk info yg boleh diperolehi & dipraktikkan. terima kasih.
zuhanismohamedAugust 19, 2010 at 10:03 PM
saya dah apply and jadi..tq banyak2 ya :)
Aqilah YayaOctober 31, 2010 at 2:51 PM
Salam . Minta tolong sikit ek . Saya dah cari .post blockquote { . Tapi , tak ada . Macam mana nak buat ek ? Harap unwanted bolee tolong (:
husnaradziNovember 11, 2010 at 9:42 PM
ya tu lah . sy pon x jumpa jugak .
waa mcm nak buat post divider pon sma .
x jumpa kod tuh .huu
wannababessDecember 24, 2010 at 2:11 PM
kenapa bila saya search .post blockquote { ,
dia tak kuar pape eh ?
4min93~~December 28, 2010 at 3:15 AM
.post blockquote {

xjumpa la kod nie... :(
umie humairahJanuary 7, 2011 at 1:10 PM
nak wat cam mane??? :(
anonymousJanuary 7, 2011 at 3:43 PM
tak jumpa kod!
GaDiS OGi' JoRo'January 15, 2011 at 2:02 AM
menjadi! tenkiu! :)
aYuMieRrJanuary 30, 2011 at 10:53 PM
xjumpa lar kod " .post blockquote { "

cmne nie? xfhm lar...
casperryenaFebruary 3, 2011 at 3:27 PM
xdapat buat
razzmatazzFebruary 14, 2011 at 11:39 PM
bile dah save tu bukak new post ek?
then?
Hanis ZakirahMarch 9, 2011 at 5:34 PM
kenapa x jumpa pun code tu :'(
Nurul Farahhanim RamlanMarch 11, 2011 at 2:42 PM
soe .. i ta dpt buat ,, coz i tak de kod too .. cm ne erk ??
yallaMarch 27, 2011 at 5:17 PM
mana pergi unwanted nie..ramai tnya tak bls pon......*(((
yallaMarch 27, 2011 at 5:17 PM
:)
TeddyTortoiseMarch 30, 2011 at 11:27 AM
np i find kod tu at template i tp ta dpt..nk wt cmne eik??
Zara ♥April 10, 2011 at 9:11 AM
tak dapat post nak find :(
♥mrs.azadApril 21, 2011 at 11:09 PM
x jadik laa..help! help!
safwahApril 28, 2011 at 1:53 AM
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..
AnonymousMay 26, 2011 at 2:12 PM
dah jadi :)

huh jenuh jugak nk buat
Love HunterJune 20, 2011 at 1:40 AM
sume pn x leh.. x leh find apa2 pn...
FYJune 26, 2011 at 4:55 PM
ta dpt ppe pon ?
yanalieyana82July 20, 2011 at 4:59 PM
nothing happen ! --' how .
Miss uCuJuly 28, 2011 at 11:53 AM
salam..dah try xjadik:(
KinaAugust 2, 2011 at 1:18 PM
hmm dh try tp xjadi2 pon,..sume cra dh try,..xjmpa apa2 pon,....hmmm =(
Adam SahajaAugust 30, 2011 at 4:10 AM
dah jadi..tq safwah
AnahonniSeptember 29, 2011 at 2:50 PM
blockquote ni nak buat mcam mne ? xjmpe pun kod dia dkat edit html tu :(
eyzaaOctober 6, 2011 at 12:30 PM
btul ckp nuru anahh ,xjumpa pun kod dia !! huh.
UnknownDecember 5, 2011 at 4:45 PM
knapa kod .post blockquote { tu tak ada dalam template saya?
Shahizan AzmiDecember 22, 2011 at 1:19 AM
eh samalah, .post blockquote { tak ada dalam template saya juga (: Macam mana ya?
FazElixierJanuary 3, 2012 at 11:30 AM
dapat jadik!!!
Eza AkmalFebruary 13, 2012 at 3:37 PM
da cri semua kod2 tue .. tp 1 pon xde .. hadoii ..
AnonymousMarch 28, 2012 at 8:41 PM
cara edit pic dlm header pla?
obat herbal wasirDecember 3, 2012 at 3:28 PM
kalau di tambah background berwarna jadi tambah keren
Misz Pinky GurlzJanuary 5, 2013 at 3:00 AM
TAK JADIK LAA~! acanner ni ! penat buat~ fuhh
obat herbal kanker payudaraJuly 16, 2013 at 2:30 PM
terima kasih atas infonya
Ace MaxsJuly 22, 2013 at 10:33 AM
terima kasih atas infonya
Obat herbal kanker paru paruJuly 26, 2013 at 10:46 AM
terima kasih atas infonya

! Tutorial Blog | Cara Buat Sendiri

Tutorial Blog, Tips Blogging, DIY, Buat Duit Online, Internet + Komputer.

Menu

Letak Background Gambar Pada Blockquote

47 comments:

Followers

Followers