Tutorial Bina Blog: Efek Icon Muncul Apabila Cusor Menyentuh Blockquote

Apabila cursor dilalukan pada petikan blockquote, icon akan muncul pada penjuru bawah kanan kotak blockquote. Ikuti tutorial di bawah untuk mengaplikasikannya pada blog anda.

1) Sign in akaun blogger

2) Dashboard > Design > Edit HTML

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod ini

.post blockquote {

4) Kemudian copy dan paste kod ini SELEPAS / DI BAWAH kod .post blockquote { tadi

blockquote:hover {
background-color: #FFC8F2;
-webkit-transition-duration: 3.5s;
background-image:url(http://dl6.glitter-graphics.net/pub/440/440576q8wrax7se2.gif);
background-position:bottom right;
background-repeat:no-repeat;
}

Nilai yang anda boleh adjust dalam kod di atas:
http://dl6.glitter-graphics.net/pub/440/440576q8wrax7se2.gif - letakkan url icon yang anda mahu. Gambar-gambar mini icon yang comel anda boleh search di sini. Cara nak dapatkan url gambar pula, rujuk tutorial ini.
FFC8F2 - warna background pada kotak blockquote apabila disentuh cursor. Rujuk kod warna di bawah
( untuk paparan lebih besar, klik di sini)

5) Klik preview dan jika tiada error, klik save template.

Selamat mencuba! :)

Special: