Tutorial Buat Blockquote Cantik dan Berwarna
Kali ni request dari arekyn. Cik tom akan ajar tutorial cara buat blockquote yang ada warna bagi cantikkan lagi entry blog korang. Tapi maybe ramai tak tahu. Blockquote tue macam mana rupanya ye? Haa ni la rupanye;
Contoh blockquote
Terdapat 3 kemungkinan soalan yang akan korang tanya. So, cik tom dah siapkan 3 incase kalau 1st tutorial takde. Korang boleh follow up next incase. Tapi kalau dah boleh buat just ignore other incase ye. Jom follow up tutorial ni.
STEP 1
DASHBOARD>DESIGN>EDIT HTML>tick kotak EXPAND WIDGET TEMPLATES>DOWNLOAD FULL TEMPLATE
*Apa-apa pun sebelum edit html, korang mestilah buat backup sebagai langkah berjaga-jaga.
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;
border: 3px solid #000000;
border-left: 3px solid #000000
}
Pada coding di atas ni korang boleh tukar code warna tue ye;
1) color= code warna teks dalam blockquote
2) background= warna background kotak blockquote
3) border=untuk adjust ketebalan, jenis dan warna border
**Untuk pilihan warna boleh lihat kat SINI atau google code warna yang korang suka.
STEP 4
Klik SAVE TEMPLATE.
~~~Incase 2, blog korang ada code blockquote tapi takde code warna, background or border.~~~
Contoh;
blockquote {
margin: 10px 10px 10px 20px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;
border: 3px solid #000000;
border-left: 3px solid #000000
}
Korang just boleh tambah je code tue seperti dibawah;
blockquote {
margin: 10px 10px 10px 20px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;
color: #000000;
background: #F535AA;
border: 3px solid #000000;
border-left: 3px solid #000000
}
~~~~Incase 3, blog korang memang takde coding blockquote. ~~~
STEP 1
Tekan keyboard, CTRL+F secara serentak.Cari code;
]]></b:skin>
STEP 2
Copy dan paste code di bawah, sebelum code ]]></b:skin>
blockquote {
margin: 10px 10px 10px 20px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;
color: #000000;
background: #F535AA;
border: 3px solid #000000;
border-left: 3px solid #000000
}
**Untuk pilihan warna boleh lihat kat SINI atau google code warna yang korang suka.
STEP 3
Klik SAVE TEMPLATE dan cuba buat post entry guna blockquote. Menjadi tak??
~~~Incase 4, bagi yang tak tahu macam mana nak buat blockquote ialah pada new posts/edit post(tak kira la yang old or new editor)~~
Korang taip dulu entry korang tue.. Pastu bold/highlight kan perkataan/perenggan yang ingin di blockquote dan klik icon “blockquote” seperti dibawah;
p/s: sila baca dan follow up betul2 step yang cik tom bagi ni ye. cuba buat dulu. kalau tak dapat baru tanya. erk bukan bermaksud tak nak jawab soalan korang/tak bagi tanya ye tapi kadang2 ada soalan yang di tanya tanpa mencuba dulu.
Sharing is caring
hehe wah cik tom makasih tuto ni hehe
dok mencri gak sbb nak tukar border fatin tu hehe
nipis sgt hehe
masih 😀
cantek lah ciktom!
belalang dah lupa yg ciktom ajar belalang dulu…leh la rujuk sini…
hee
fuh, cik tom mmg terbaik la.
tabik sifu!!
bagusnya ada sumber rujukan baru…
chaiyok2
yea! cik tom dah kembali to d real cik tom!! hihi
bes la tuto nih..nk try la nti..hihi
salam,,
syira tag cik tomm
joint tau..
http://contestdiblog.blogspot.com/2010/12/kontest-blog-terkemas.html
nak tanya jugak ! hahaha. cik tomato, kalau background yang liplap liplap tu macam mane n dri mane dpt background tuh? 🙂
dh ikut step. tp x blh pn. ikut incase3..
As'salam…
Thanks cik tom..
nak try la nnt
dulu penah try tp x jd pon. nnt yaty nak try buat lagi lah. tq cik tom 🙂
akak akan cuba..
nak buat la untuk next entry ni..
kalau tak jadi tak pe la..
sekurang2 nye dah cuba.
SERONOK DPT BYK MASA BELJAR MCM2 🙂
nice sharing, cik tom
thanks banyak2 cik tom. nak jinak2 guna ni la lps ni. heee. ^_^
br jd bt.. tersalah letak kot.. =p
tak faham..(belum try)
ok tom..thanks bg info ni..akan datang nanti nak buat jugak blockquote ni
nice infoooo cik tomm
da ada kaler da
How much do u LOVE me? | First Two Wheels Moment | Direview oleh blogger OTAI. Wootwoot!
suspek la cik tom ni, mcm2 taw patutla blog cik tom comey jer..dla xdan nak blaja, kene cr ms..rasa nk amik tuisyen jer ngan cik tom..bukak kelas la cik tom, dla jd anak murid yg tua..hawhaw..wat kelas kat batu buruk..heheh
trima kasih cik tom.. sblum ni pon sy tertanya2 jugak camne cik tom wat blockquotes tu.. dan skrg ni jugak baru taw yg tu namanya blockquotes.. hehe.. jakun kan?
yeah!! finally…
cik tom buat gak tutor yang akyn request tuh…
akyn dah try.. trimass yerp…
jasamu d kenang 🙂
mcm kenal je coding n step tu. hehe. nice sharing ciktom.
mekasih cik tom.
saya buat polka dot blockquote. hehe~
http://kitty-nini.blogspot.com/2010/12/godeh2-blockquote.html
🙂
xjadilah cik tom..kita nye yg step2 tuh…kat sidebar blog kita, 'contest' je yg ada blockquote tuh.. adeii pening udah ..
wah…best2..leh try…
satu lg..leh x cik tom ajar cmne cra nak letak icon kt tajuk/url bloglist tu?yg cik tom punye icon tomato comel tu…sukela…tingin gak nk mcm tu…hehe
I think one of your advertisements caused my internet browser to resize, you might want to put that on your blacklist.
sye dh try smua tp x jadi, coding plak yg kuar kt blog atas, camne?
@Ayuni: sori br terjah..cik tom tgk menjadi je blockquote blog ayuni..
@FiZ:
https://www.ciktom.com/2010/12/tutorial-letak-icon-comel-pada-sidebar.html
Salam Cik Tom, templetes sy langsung tak ade blockquotnie…hehehe.sy dah cube jaya letak…time kasih yer
My recent post ►Fesyen : Fesyen Lenyap, Style Sama
tqvm! 🙂
cik tom! time kasih bebanyak..dah terai byk kali dr tutorial org lain tp tak jadi sbb tak diexplain mcm mana kalo case takde ‘blockquote’..
Jom baca entri terkini MamaYatie …Entry Meraih Undi – Please Vote Me!!
cik tom. first time buat terus menjadik. trimas! 🙂
Jom baca entri terkini kinn …LAGU TEMA NORA ELENA
terima kasih cik tom 🙂
thanks cik tom! sangat membantu~~
Jom baca entri terkini wardah alisya …Jom blogwalking ramai-ramai
tak jdik lah D:
cmne ek?
code yg nk di blockquote tu jdi center ketengah je
takde cm kotak kotak nye pun :’c
macam mana tue ye??ada tersilap copy code kot..ciktom nak tlg pun xdpt tgk blog misa sbb private…so cik tom edit balik entry kat bahagian code…cuba misa copy balik code tue..menjadi x?
thank you cik tommm!! 😛
dah jadi dah!!
Jom baca entri terkini cik bambam …Tips melarikan diri dari PEROGOL!
your welcome…tahniah dah jadi!
Tgh dok usha2 tuto kat sini…hehehe
Jom baca entri terkini yas …Kenapa banyak sangat parti politik di Malaysia?
oh ok..usha elok2..
x jadi pun… bila buat blockquote dia x kluar..
cuba follow satu persatu step..maybe ada tertinggal apa2 code..
ciktom tolong buatkan blockquote utk blog sya 🙂
sori yunk..ciktom busy dengan kerja skang..xdpt nak tolong…cuba aien buat sendiri dulu ye…
ci tom boleh tlg saya tak (: .. tlg buatkan .. nti sya bg password kat ciktom .. tgok2 blog sya ne (: http://aienhaslinda95.blogspot.com/
sori yunk..ciktom busy..cuba follow dulu step dalam tutorial ni..kalau xdapat buat/ sangkut mana2 inform or boleh tanya dengan cik tom..