meletakkan BLOCKQUOTE dalam blog


permintaan tutorial dari cik wany.
dia nak minta ajar camna nak buat 'blockquote' a.k.a kotak-kotak comel dalam blog.

camne hah!

 da nampak da?..so,jeles tak?.haha.takyah nak jeles-jeles.meh I ajar korang wat k!.


1st:...pergi DASHBOARD -> Design -> Edit Html -> tekan Expand Widget Templates -> cari ]]></b:skin>(untuk memudahkan pencarian,paste je script tu kat ruangan Find korang dengan cara Ctrl+F dari keyboard.oke!)

2nd:..bila korang da jumpa code tu..copy code yang I bagi ne dan paste kat atas/sebelum code diatas tue.

code 1
.post blockquote {
border-top: 1px solid #FF82AB;
border-left: 1px solid #FF82AB;
border-right: 2px solid #FF82AB;
border-bottom: 2px solid #FF82AB;
background: #ffffff;
margin: 6px 20px 6px 20px;
padding: 8px 8px 8px 8px;
font-size: 1em;
font-style:italic;
line-height:1.4em;
}
oke,jom kita main-main dengan code diatas....
yang I kalerkan dengan kaler biru tu: adalah sisi setiap border blockquote korang tu.kat situ ada 4 kan?..top-left-right-bottom.korang boleh ubah setiap dari border tu.
cara nak ubah::
kelebaran border:2px...korang ubah la kepada 3px,5px atau berapa-berapa je.

yang kaler pink tu pula jenis border yang korang nak.boleh ubah juga.tukar solid kepada jenis border yang korang nak.kat bawah ne ada contoh:


kaler merun tu pula,kaler border korang.boleh pilih kaler kat sini.|link|

oke,border korang da siap.sekarang tengok pula yang colorcode yang I kalerkan warna merah tue.Itu adalah kaler dalam blockquote korang.nak ubah,pergi amik kode kat colorcode yang I bagi link kat atas tue.oke!.If korang taknak kaler,means nak letak background pun boleh.caranya ubah code bahagian Background.Contoh kat atas yang I bagi tu:

background:#ffffff
ubah kepada=>
background-image:url(URL IMAGE)
background korang boleh tengok kat sini:|link|

code 2
diatas tu panjang pula kod nya kan.So,I bagi yang mudah sikit.Kod ne I guna dalam blog I.

.post blockquote
{ background-image:url(URL IMAGE);
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
padding: 6px;  
Border: 3px solid #FF0080;
margin:1em 20px; }
Background boleh tengok kat sini juga: |link|
Heran eh tengok yang I da highlightkan dengan kaler biru tu?.tengok gambar kat bawah neyh,perhatikan yang I da bulatkan tue:
da siap da,korang SAVE je oke.sekarang I nak bagi contoh sikit:





jadilah camne::


so,hopefully korang dapat la buat k.klu tak dapat,jangan malu nak tanya I oke.I tak makan orang...I makan Tomyam Udang kat Mei Wei Cafe je.muahaha.

{ 11 comments.. read them below or add one }

xcyber xcyber 01 February, 2011
dah lama cari..thanks yer
ecadwinkyasha ecadwinkyasha 01 February, 2011
@xcyber ur welcome....nasib U paam gak tutorial ne....hehe.
AnonymousAnonymous 20 April, 2011
dah jadi . thanks yea :)
ecadwinkyasha ecadwinkyasha 20 April, 2011
@Miss Cokelat great :) tahniah2x da berjaya..anda menang penginapan dua hari tiga malam di rumah sendiri :P
heheehe...
BasiRah BasiRah 02 June, 2011
nak tnye.. macam mne leh buat 5 colum kt atas tu...
yang ade : |eca's story| |all about her| |contact eca|
|eca's tutorial| |lets exchange link| ?????
INaseha INaseha 10 June, 2011
thnks for the blockquote. simple n easy tutorial.
ecadwinkyasha ecadwinkyasha 10 June, 2011
@BasiRah ooo,nak wat menu tab eh?.oke oke.coming up with tutorial.tunggu k.
sHiMaRoO sHiMaRoO 23 June, 2011
terima kasih atas tutorial nie...
amat membantu saya....
bolehlah belajar tutorial lain pula...
Cik Azizah Cik Azizah 11 August, 2011
menarik!! yayunk! kenapa akak buat tulisan tu tak jadi tengah2..dia tepi pulak.huuuuu n tulisan dalam xnmpk..mgkin sbb background hitam yer..

Terima Kasih atas komen anda.
Eca akan balas & terjah anda secepat mungkin.
*-*