Kotak blockquote dengan hover

Assalamualaikum!~

Sebelum ini, ikaa ada buatkan tutorial tentang kotak comel ataupun dikenali sbg kotak blockquote untuk korang, tapi kali ini still lagi kotak blockquote tapi berhover. Mesti lagi cantikkan. Tapi berhover macam mana erk. Ok berhover tue bermaksud, apabila korang acukan cursor ke arah kotak blockquote korang, ia kan bertukar kaler ataupun keluar icon kecil dibawahnya. Terpulang pada korang yang meletakkannya.

Tapi sebelum itu, pasti korang dah pasang kotak blockquote a.k.a kotak comel ini dulu :

1. Dashboard > Design > Edit html > Add a gadget > Tick widget expand

2. Search code ini dulu

.post blockquote {

3. Lepas itu, copy pula code dibawah ini.

blockquote:hover {
background-color: #FFFFFF;
-webkit-transition-duration: 3.5s;
background-image:url(URL ICON);
background-position:bottom right;
background-repeat:no-repeat;
 }

4. Pastkan code tersebut bawah/selepas code no 2.

5. Preview dulu, tiada error baru save.


Purple : Boleh ganti dengan kode INI
Hijau : Gantikan dengan url image INI


cth url icon :


    http://dl8.glitter-graphics.net/pub/434/434518xlbzh5vtds.gif
http://dl2.glitter-graphics.net/pub/550/550422iuv8tgsqnr.gif
 
4 Komentar untuk "Kotak blockquote dengan hover"

sebelum nie ade jugak ika cuba buat bnda nir tp selalu je tak menjadi.so, dah putus asa. haha

@Cik Rongoks ooyeke..nk buat yg hover nie..dia kena pasang blockqueto biasa dulu,bru leh letak hover

hehehe.. dua2 yang berbalas komen kat atas ni nama ika. haha :P

Terima kasih untuk komen yang berharga anda, datang lagi.

 
Copyright © 2014 Bakul2011.com - All Rights Reserved
Template By. Catatan Info