Tutorial #6: Blockquote hover (image)

25.6.11


Yuuhuu, peeps! Seperti yang telah diberitahu, lately nie aku tak tahu nak post pasal apa sangat. So, lebih baik aku buat tutorials. Selain dapat membantu orang ramai (eceh), bergerak jugaklah entry kat blog terlampau nih. Erk? Haha. Tutorial ni di'request' oleh Kak Ila yang aku tak tahu blog beliau. Tapi boleh didapati request tersebut kat shoutbox >>>

Tutorial macam mana nak buat bila cursor menghala ke blockquote, ada Encik Keropi kat bawah kotak bquote tu. Contoh; sila halakan cursor korang dekat ayat ni. Tengoklah, ada katak comell muncul x]

It's easy. Like I said, easy come, easy go XD

HOVER IMAGE ICON.

1. Go to Design -- Edit HTML.
2. Search (CTRL+F) for .post blockquote { dan akan keluar lebih kurang macam ni,
.post blockquote {
border: #ffffff;
background: #000000;
margin: 5 5 5 30px;
padding: 10px 10px 10px 10px;
}
4. Okey, lepas } tu, korang kena letak code nie;
.post blockquote:hover {
background-image:url(URL ICON KORANG EG KEROPI KE KEROPOK KE -,-);
background-position:bottom right;
background-repeat:no-repeat;
}
5. Tambahan, ada sesetengah template tu dia tak guna .post blockquote { , jadi try korang cari .blockquote { . Ikut jelah step 3 dan 4.


Ouh, maybe ramai jugak tercari-cari macam mana nak buat macam bquote bertukar warna/rupa bila cursor dihalakan ke bquote. So, ramai-ramai korang boleh singgah blog ini;


Banyak jugak tutorials. Hehe. Nanti aku letak kat page tutorials haku.

BUHBYEE!

Wassalam.
Post a Comment