Cara Membuat Efek Hover Background

Berfungsinya efek ini manakala cursor diletakkan tepat

di atas background yang diberi kode efek ini. Contoh

yang bisa anda lihat dari tutorial Cara Membuat Efek

Hover Background ini adalah pada sidebar Link

Exchange. Untuk membuat efek ini, berikut caranya :

1.  Rancangan -> Pilih sidebar mana
     yang ingin anda berikan efek ini,
     lalu sisipkan kode berikut diantara
     kode gadget HTML/JavaScript anda tersebut.

<div class="bgr">

Kode gadget HTML/JavaScript

</div>

CATATAN :

Kode tersebut juga dapat anda sisipkan
diantara tulisan postingan anda,
apabila background pada postingannya
ingin anda tambahkan efek ini.

2.  Masuk ke Edit HTML

3.  Anda cari kode </b:skin>

4.  Di atas kode </b:skin> ini,
     letakkanlah kode berikut :

.bgr {
width: 100%;
margin: 3px auto;
background: #FFFF00;
border: 2px solid #ff0000;
padding: 0px;
color: #888888;
border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-transition: all 2.5s ease-in-out;
-moz-transition: all 2.5s ease-in-out;
-webkit-transition: all 2.5s ease-in-out;  
opacity: 0.5;
filter: alpha(opacity=50);
}

.bgr:hover {
background: #00FFFF;
border: 5px solid #ff0000;
border-radius: 10px; 
-webkit-border-radius: 8px 5px 13px #ff0000;
-moz-border-radius: 8px; 
-webkit-box-shadow: 8px 5px 13px #ff0000;
opacity: 1.0;
filter: alpha(opacity=100);
}

KETERANGAN :

Aturlah warna backgroundnya dengan
warna yang anda kehendaki.

Untuk mengganti warna backgroundnya
dengan image / gambar, gantilah kode :

.bgr:hover {

background: #00FFFF;

dengan

.bgr:hover {

background: url (URL gambar anda di sini) repeat;

Selamat mencoba, good luck!