Blockquote cantik

CARA 1 : ( templete berbeza, so coding pun berbeza..harap maklum )

1.Login ke Blogspot, klik design/ layout > Edit HTML

2. Lepas itu, sila cari code di bawah.. gunakan Ctrl+F untuk memudahkan pencarian

.post-body {

3. Sila Copy code di bawah dan paste kan di ATAS code .post-body {seperti yang korang cari tadi

.post blockquote { background-image:url(URL GAMBAR BACKGROUND BLOCKQOUTE); -moz-border-radius-topleft: 10px; -moz-border-radius-bottomright: 10px; padding: 6px; Border: 3pxsolid #FF0080; margin:1em 20px; }

4. Code yang BL warnakan MERAH, boleh la ditukar mengikut citarasa.

5. URL GAMBAR BACKGROUND BLOCKQOUTE boleh la direplace dengan URL korang nak

6. Preview, No Error, Save! =D

----------------------------------------------------------------------------------------

CARA 2 :Memandangkan ramai yang tak boleh test cara di atas..so BL akan ajar coding ini pula...

1.Login ke Blogspot, clik design/ layout > Edit HTML

2. Lepas itu, sila cari code di bawah.. gunakan Ctrl+F untuk memudahkan pencarian

.post blockquote {

3.Sila Copy code di bawah dan paste kan di BAWAH code .post blockquote { seperti yang korang cari tadi

background: url(URL image);
border-top: 1px dashed #000000;
border-left: 1px dashed #000000;
border-right: 1px dashed #000000;
border-bottom: 1px dashed #000000;

4. Sila letakkan URL anda di URL image 
5. 1px adalah ketebalan : lagi banyak nombor lagi tebal, dashed boleh diubah kepada solid atau dotted.
6. Preview, No Error, Save! =D

-----------------------------------------------------------------------------------------

CARA 3 ( Template Designer ) : Bagi Pengguna Template Designer

1. Sila Klik Dashboard - Design - Edit HTML
2. Klik Download Full Template (kalau takut template korang hancuzz)
3. Tick pada kotak Expand Widget Templates
4. Cari kod di bawah ini di dalam kotak HTML, kalau nak mudah mencari tekan Ctrl+ F sahaja

.post blockquote {
margin:1em 20px;
}

5. Gantikan code yang dicari di atas dengan code ini:

.post blockquote {
background: #F430C0;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
padding: 6px;
Border: 1px solid #020202;
margin:1em 20px;
}

#F430C0 untuk warna background nya.. Kalau nak gantikan dengan gambar sila replace code background: #F430C0; dengan code inibackground-image:url(URL GAMBAR BACKGROUND BLOCKQOUTE);

6. Dan SAVE.. tengoklah hasilnya..

Freebies From The Photobucket...hehhe, Korang pilih la yang warna dia light2 je...kalau tak susah nak nampak tulisan....

SUMBER: Cik Farah  Yang Baik Hati.. =)

p/s: sebenarnya, BL suka cara cik farah ni buat tutor...sebab nya dia suka buat experiment...BL rasa serba salah nak copy tutorial ini, tapi BL dah cek blog dia...dan Beliau pon sudah mengizinkan...=) korang terjah la blog dia nanti...heheh...cute ~.~ OK, Diya, tutor ni untuk awak...next Tutor BL akan ajar cara cute icon muncul bila hover blockquote...=D

Jangan lupa komen OK (^^,)V sELaMaT mEnCuBA!!