Sunday, 1 April 2012

TUTORIAL: Post Blockquote

Hi There   ^ ^
How are you guys ???

Okay, lets straight to the point seja lah kan. Malam-malam ni saya mau share satu tutor untuk kamu. Nama tutor kali ni Post Blockquote. Tau tak apa ka benda nya itu ? HEHE.. Oke mari tengok bawah ni .

klik untuk jelas.

1. Design > Edit Html > Tick Expand Widget
2. Tekan F3 dan cari code : post blockquote {
3. Copy code di bawah ni :

background:url(URL BACKGROUND);
border-top: 2px solid #000000;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
border-bottom: 2px solid #000000;
border-radius: 5px;
margin:1em 20px;
padding: 5px;
}
.post blockquote:hover {
background-position:bottom right;
background-repeat:no-repeat;
-moz-box-shadow: 0 0 10px #BDBDBD;
-webkit-box-shadow: 0 0 18px #BDBDBD;
}

4. Paste di BAWAH code yang kamu cari tadi tu.

5. Tukar code di atas tu mengikut kesesuaian :

** PINK : Letak Url background. 
** BLUE : Warna border 
** RED : Bentuk border. Boleh tukar : solid / dashed / dotted (pilih ja salah satu)
** PURPLE : Warna shadow 

6. Preview dulu! Tiada error boleh SAVE :)

***
Macam mana nak guna blockquote ?

Mari tengok gambar di bawah ni 

klik untuk jelas.

- Taip dahulu perkataan di ruangan post tu.
- Sudah siap taip, highlight kan perkataan tu menggunakan mouse (kaler biru-2 tu lahh..hehe).
- kemudian tekan button Quote macam gambar di atas tu. 


4 comments:

Nurul Aisyah said...

nice :)

D' Black Writer said...

Wah. Dah lama cari :)
Sekarang takde masa >,< Nanti nak cube :D anyway thanks for the tuto ~

Iswilma said...

tapi try buat tak keluar2 jugak ne , macam mna tuh kak ?

Tengku Laurel Adamila said...

Kena carikk kod ]]> dulu .
lepas tu paste kod post blockquote { ats ]]> . then paste kod number 3 di bawah post blockquote { . baru jadi yg tu . >,<