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.:)
0 comments:
Post a Comment