Cara Buat Blockquote Comel..

Sunday, June 10, 2012

Assalamualaikum...hehe, hari ni nak buat tutorial on request....siapa yang tak tahu blockquote tu apa meyhh tengok sini...yang comel macam kat blog saya, macam ni haaa...tadaaa!!

Cara nak buat blockquote, mula2 korang kena highlight kan words, time edit post tu, pastu tekan " kat bahagian atas macam ni:

Awak sangat comel

Then tekan

hehe, credits to cik farah untuk pic ni... =)

Jadilah macam ni!!

Awak sangat comel

OK, penerangan atas untuk newbies...hehe jom teruskan cara nak cantikkan dia....SILA BACKUP DULU!

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: 3px solid #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 ini background-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....nahh amik SINI

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!!