Thursday, December 9, 2010

Tutorial: Cantikkan Blockquote.

Assalamualaikum..

Kali ni nak kongsi tutorial macam mana nak cantik kan blockquote yang ada. kalau yang asal mesti plain/kosong je kan. meh kite kasi ade kaler dan ade background yang cantik.

Sebelum tu nak kenalkan blockquote tu ape.


Tulisan di highight dan tekan blockquote yang ditunjukkan oleh anak panah. dan hasil nye macam di bawah:
Ok dah paham kan ape tu blockquote. Jom ikot step di bawah.

Step 1: Dashboard ---> Design ---> Edit HTML ---> Tick, Expand Widget Template

Step 2: Cari code ]]></b:skin> (kalau nak senang tekan CTRL+F dan paste kan code tadi.

Step 3: Dah jumpa code tadi copy code di bawah dan paste kan code tu di atas code ]]></b:skin>

.post blockquote {
 background-image:url(URL IMAGE);
 -moz-border-radius-topleft: 10px;
 -moz-border-radius-bottomright: 10px;
 -webkit-border-radius: 10px;
 padding: 5px;
 Border: 2px solid #000000;
 margin:1em 20px;
}
Sila tukar URL IMAGE dengan URL yang anda mahukan. Contoh URL IMAGE di bawah:

('http://content.mycutegraphics.com/backgrounds/pink/pink5.gif')

('http://content.mycutegraphics.com/backgrounds/pink/pink7.gif')

('http://www.mycutegraphics.com/backgrounds/flower/flowerbg21.gif')

*kalau tak nak ade image, bole tukar untuk jadi berwarna saje. contoh code macam di bawah:

.post blockquote {
 background: #pink;
 -moz-border-radius-topleft: 10px;
 -moz-border-radius-bottomright: 10px;
 -webkit-border-radius: 10px;
 padding: 5px;
 Border: 2px solid #000000;
 margin:1em 20px;
}

Step 4: Cuba preview, kalau jadi boleh save.





Terima Kasih sudi baca,jangan lupa baca lagi ^_^

4 comments:

Nabila Huda said...

nak pinjam tutorial boleh. tapi tak copy, just buat sendiri. ilham dari sini..

Anis Athia said...

thanks for the tutor ;)

Cik T-pah said...

Nabila Huda: bole aje :)

Cik T-pah said...

Anis Athia: ur welcome anis.. :)