Tutorial : Kesan Icon Muncul Apabila Cursor Menyentuh Blockquote

Assalamualaikum dan salam 1 Malaysia

Hari ini, kita akan belajar buat kesan icon
muncul apabila cursor menyentuh blockquote

Owkey, ikut step ini  saje.

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

Langkah 1

Dashboard > Design > Edit HTML

Langkah 2

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

.post blockquote {

Langkah 3

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:

Letakkan url icon yang anda mahu : http://dl6.glitter-graphics.net/pub/440/440576q8wrax7se2.gif-

Gambar-gambar mini icon yang comel anda boleh search di sini.
FFC8F2 - warna background pada kotak blockquote apabila disentuh cursor.

Langkah 4

Klik preview dan jika tiada error, klik save template.

Selamat mencuba! :)

Ranking: 5