Cara Buat Blockquote Hover

Hari ini saya ingin berkongsi satu tutorial iaitu tutorial BLOCKQUOTE HOVER. (Wah brigat tk pergi sekolah !) haha. Okay, blockquote hover ni macam di bawah. Blockquote ini macam nak menunjukkan sesuatu atau ingin memberi penekanan akan sesuatu ayat, terutamanya dialog. Hover pula adalah anda sentuh tempat tersebut dengan cursor, ia dipanggil anda hover tempat tersebut. Cuba hover blockquote di bawah. Kalau nak buat tutorial hover, kena ikut tutorial background dahulu jom kita tengok tutorial background

Jadi berubah macam ni apabila dihover :}

Cantik tak? Jadi tadi saya check email ada request dari Cik Aisyah, dia request suruh buat tutorial blockquote hover, ops tanpa membuang masa ! jom kita mulakan sesi tutorial blog pada hari ini.

TUTORIAL BACKGROUND BLOCKQUOTE

STEP 1

Blogger >> Dashboard >> Design >> Edit HTML

STEP 2

.post-body blockquote {

Cari kod CTRL + F



STEP 3

Tambah KOD di bawah di BAWAH kod step 2

background-image: url(URL BACKGROUND);

Step 3

Tekan Preview kalau da jadi SAVE

TUTORIAL HOVER PULA

Step 1

Dashboard >> Design >> Edit HTML

Step 2

blockquote:hover {

Cari kod di atas CTRL + F

Step 3

blockquote:hover {
background: url(http://i838.photobucket.com/albums/zz306/sweetlilcraft/Background/w22.gif)
repeat right bottom ;
}

Kalau tak ada kod di step 2 , sila tambah kod atas di bawah kod di bawah

.post-body blockquote {
background-image: url(URL GAMBAR);
}
SINI YER LETAK KOD

\SAVE DAN PREVIEW

Okay hari ini siap 2 Tutorials ! Kepada sesiapa bermasalah dengan tutorial ini, tak paham ke tak jadi ke boleh tanya melalui komen ye, ataupun post di wall Azhunk World (FACEBOOK) Sekian.