Tutorial Blockquote Bergambar Bagi Menarik
Sebelum ini cik tom ada buat Tutorial Buat Blockquote Cantik dan Berwarna.Pada yang tidak tahu apa itu blockquote, boleh rujuk pada tutorial tue. Tutorial tue hanya ajar cara buat blockquote pada background berwarna. So, sekarang cik tom nak kongsikan tutorial cara buat blockquote bergambar yang menarik. Korang boleh buat blockquote dengan background menggunakan image yang disukai.
Sebelum edit html, korang mestilah buat backup sebagai langkah berjaga-jaga.
DASHBOARD>DESIGN>EDIT HTML>tick kotak EXPAND WIDGET TEMPLATES>DOWNLOAD FULL TEMPLATE
STEP 2
Tekan keyboard, CTRL+F secara serentak.Cari code;
blockquote
STEP 3
Ini contoh coding blog cik tom. Berkemungkinan coding setiap blog berlainan.
blockquote {
margin: 10px 10px 10px 20px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;
color: #000000;
background: #F535AA;
}
STEP 4
Sila copy dan paste code di bawah dan gantikan pada code yang di bold (background) dalam step 3.
background-image:url(URL GAMBAR) no-repeat;
Contoh url image: http://farm4.static.flickr.com/3391/4602462381_c04705bf3f_b.jpg
Hasilnya:
blockquote {
margin: 10px 10px 10px 20px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;
color: #000000;
background-image:url(URL GAMBAR) no-repeat;
}
***URL GAMBAR tue boleh upload gambar ke blogspot dan pastu ambil url gambar/upload ke mana2 storage gambar dan copy url gambar di beri/ambil url gambar di mana-mana website yang disukai
***Bagi yang tak jumpa code blockquote atau tak reti cara nak gunakan blockquote, boleh rujuk pada entry Tutorial Buat Blockquote Cantik dan Berwarna. Sebab kat entry ni cik tom ada ajar beberapa step incase takde code blockquote dan cara guna blockquote dalam entry.
STEP 5
Klik SAVE dan try buat blockquote dalam entry dan publish. Tengok menjadi tak?
Sharing is caring
Tutorial yang ellen suka dan pasti akan di cuba..thanks Tom..Muahhh!!
tak boleh nk cuba wawawa
sdih coding sy selalu tak leh pakai..tloglah ciktom.heheee boleh tak crikn templte mesra coding gitu2 lorr..
salam
menarik,tp kalau ada gambar lambat la nak loading..hehee,,better taruk warna je..
huihhhhh mmg pakar coding la cik tom nih!!! 😀
Jemput-jemput: Saat Aku Kau Pilih
Cara Dapat Side Income Dengan HeartBeat!
nak buat …
nak bubuh gambo katon2 boleh kan???
akak diana tuh nak kartun je.huhhh.akak!letak la gmber bintatang yg maisara lukis.huhhu
sis mmg teringin punyai blog yg cantik..tp..huk3
nampak macam mudah jer kan…hihi
muohoohh..bagus ni
Wahh~ Nak cuba lah nanti! ;D
terima Kasih sayam!
trimas cik tom!! mesti best cuti kat redang..ehehehehe
nak tanye cik tom, camne nak buat pic yang cik tom letak kat bawah skali tu?
yang tomato girl's life..redesign by cik tom tu..hehehe
nice entry..sy ska entry ni!
@Woofer Storm: banyak website template yang ada…insyaAllah nanti cik tom cuba cari yang ok ye..
@Ellen: selamat mencuba ye ellen sayam..
@bee: memanglah ni coding untuk blogspot…wordpress punya tak tahu..huk3..
@sissyira: yup lagi better warna sbb nak load bergambar ni makan masa..
@Jiji-Fify: xdelah..biasa2 je..
@diana: boleh je akak..mana2 pic pun boleh..huhu
@echah mashuri: ok jgk cadangan tue…tp nanti xnmpk pulak tulisan utk blockquote..huhu
@Lydia Miza(Aidyl Azim): blog sis LM memang dah cantik la..
@ghost writer: memang mudah..selamat mencuba..hehe
@JIJI YU: cubalah 😉
@Puan Besar Shag Yahaya:selamat mencuba sayam!
@Taufiq Tiramisu: yang bawah tue footer…erm nanti cik tom akan cuba share dlm tutorial akan datang ye..insyaAllah 🙂
@srikandi cinta: alhamdulillah baguslah ^_^
ijah try buat part nk letak url gmbr mcm tak menjadi sgt. heheh. kenapa eh?
hukhuk. tak menjadi 🙁
dah follow semua step tp xmenjadi ke??
cb tgk balik ade tersilap mana2 x ms copy code..
wah artikelnya keren kak, hanya saja jika di blog aku tidak cocok 🙁
Jom baca entri terkini Puput Maharani …BBM Mod Delta v3.5.5 Versi 2.13.1.14 Apk Clone+Unclone