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.

Contoh gambar blockquote gunakan berwarna:
contoh gambar blockquote

Contoh gambar blockquote gunakan gambar:

gambar blockquote bergambar guna gambar menarik
STEP 1

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

ciktom

Cik tom seorang part time blogger yang sangat sukakan dunia blogging dan buah tomato. Mula menulis blog 15 Julai 2010. Menaip segala ilham dari akal fikiran dan hati ke dunia alam cyber. Sebarang persoalan atau pengiklanan/advertorial/review sila hubungi ciktom; tomatogurl86[at]gmail.com...gantikan [at] dengan @

31 thoughts on “Tutorial Blockquote Bergambar Bagi Menarik

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Optimization WordPress Plugins & Solutions by W3 EDGE