Tutorial : Blockquote Hover With Cute Icon

Assalamualaikum :)
Blockquote ni macam bila awak hover nanti ada keluar gambar comel di hujung. Sangat omey yeee haha :p Credit : KAK AMYLIA Dalam tuto INI saya ada janji nak buat tuto blockquote jenis ni. Hope you understand.

1. Sign In Blogger >> Layout >> Edit HTML >> Proceed

2. Ctrl+F code ni :

.post blockquote{

3. Kalau awak ada guna blockquote yang lain sebelum ni, delete semua code blockqute lama tu and ganti dengan code bawah ni. Copy code bawah and pastekan di BAWAH .post blockquote{


background-color: #FFFFFF;
border-left: 2px dashed #FFFFFF;border-right: 2px dashed #FFFFFF;
border-bottom: 2px dashed #FFFFFF;
border-top: 2px dashed #FFFFFF;
padding: 9px;
-moz-border-radius-bottomright: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.post blockquote:hover {
background-image:url(URL ICON COMEL COMEL );
background-position:bottom right;
background-repeat:no-repeat;
}
margin: 0em 10px;
}
.post blockquote p {
margin: .75em 0;
}


BIRU : Warna background blockquote. Cari SINI
OREN : Ketebalan border. Boleh tukar ikut suka hati
PINK : Jenis border. Boleh tukar kepada dashed / dotted / solid
MERAH : Warna border. Cari SINI
HIJAU : Tukar kepada mana mana url icon comel yang uolls jumpa. Dulu dekat Drikoti.net melambak tapi dia dah tukar url blog so dah takdak dah T__T

4. Preview and Save :)



No comments:

Post a Comment

Kalau dah jadi tu commentlah sikit sikit . Sebaris kata pun boleh. Asal jangan harsh words thank you :D