tutorial blockQuote berubah bila ada cursor

Pada pagi yang ceria dan membosankan ini, Tiqa teringin nak kongsi sesuatu.
Cara buat blockquote berubah bila ada cursor.
Okay, first thing first, what is blockquote?

ini adalah blockquote saya

okayy, bagi mereka yang dah selalu buat tutorial, mesti dah tahu macam mana nak hias blockquote korang. Contoh macam tukar background dia, tukar border dia semua. Tapi macam mana nak buat blockquote tu berubah bila ada cursor datang?

Bagi memudahkan semua, Tiqa buat dua part.

Blockquote part one - blockquote sebelum cursor datang. [ bagi yang dah hias blockquote mereka, abaikan part ni, korang hanya perlu buat part two]

Blockquote part two - blockquote bila ada cursor.



BLOCKQUOTE PART ONE



First,
Pergi Dashboard, pilih Design, pilih  Edit HTML, tick Expand Widget Templates,
Tekan serentak kekunci ctrl dan huruf F dan paste kan code dibawah;

.post blockquote {

Second,
Padam semua code yang terletak DIANTARA code .post blockquote { dan code .post img { 

jangan padam code .post blockquote { dan .post img { !! padam perkataan DIANTARA code tu je.


Third,
Paste kan code dibawah ini bagi menggantikan code yang telah di padam.
diantara code .post blockquote { dan .post img {

background: url( url background blockquote anda );

-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
padding: 6px;
Border: 3px solid #FF9999;
margin:1em 20px;
}

backgroud : kalau nak blockquote ada background, masukkan url background kat "url background blockquote anda", kalau nak warna je, masukkan je code warna yg dikhendaki. code warna boleh cari kat sini : CODE WARNA

bentuk bucu kotak blockquote : korang boleh bereksperimen sendiri dengan menukar 10px tuh, tukar 5px ke 7px ke 2px ke.. suka hati korang lah yer..

border : ketebalan border boleh edit 3px tuh, nak lagi tebal, buat 4px ke 5px ke. bentuk border boleh ubah solid ikut gambar dibawah. #FF9999 tu warna border, boleh ubah ikut suka, just tukar code warna je. Code warna boleh cari kat sini : CODE WARNA

 Dah siap ! tekan Save Template.
 
 
 
BLOCKQUOTE PART TWO
 
 
Yang ni pulak cara nak buat blockquote tadi berubah bila ada cursor !
 
First,
Pergi Dashboard, pilih Design, pilih Edit HTML, tick Expand Widget Templates,

Tekan serentak kekunci ctrl dan huruf F dan paste kan code dibawah;

]]></b:skin>

Second,
Paste kan code dibawah, DIATAS code ]]></b:skin> yang korang cari tadi.

blockquote {
margin: 0 20px;
padding: 20px 70px 20px 20px;
}

blockquote:hover {
background: url ( url background anda ) repeat ;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
Border: 3px dashed #FF6666 ;
}

blockquote p {
margin: 0;
padding-top:10px;
}

Jangan lupa tukar perkataan warna merah ikut suka hati korang macam yang Tiqa ajar kat BLOCKQUOTE PART ONE kat atas tadi. Backgroud blockquote mestilah lain, baru dia boleh tukar tukar bila ada cursor.

Dah siap? tekan je Save Template.

Selamat mencuba ! Kalau ada masalah, tanya je okayy ;D

UPDATED!!!

Pon Pon ! pengunguman !
Ada ramai yang kompelen kat Tiqa yang dorang semua tak dapat cari kod .post blockquote { !
ramai ke padahal DUA orang je, hik hik hik ;P
Tape jangan risau, kalau tade, korang paste je kod kat bawah ni DIATAS kod ]]></b:skin>

.post blockquote {

background: #FFCC99;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
padding: 6px;
Border: 1px solid #ff0d62;
margin:1em 20px;
}

.

p/s : WAH ! tak sabar sabar nak tunggu filem LU LANGSI LU MATI keluar, tengok preview filem tu macam best giler sbb SAM cakap kelantan! HAHA ;D

.