Cara Membuat Box dengan background mouseover

 Cara membuat Box dengan background efekmouseover ,Ini adalah sebuah teknik sederhana untuk menciptakan perubahan pada background blog, yang terutama banyak dimanfaatkan untuk widget blog. Jika sebelumnya untuk menciptakan efek atraktif yang menyertai fungsi ini hanya dapat dilakukan dengan bantuan jQuery, motool dan javascript yang lain, kini berkat CSS3, beberapa efek fantastis bisa kita buat hanya dengan kode CSS. Perubahan background (background color dan background image) dapat dibarengi dengan menyertakan bentuk animasi pada efek transparansi, transisi warna dan mungkin jika diinginkan bisa kita sertakan juga perubahan pada border (border-color, border-width), serta dapat juga dengan menambahkan perubahan di border-radius(efek rounded corners).  

Untuk mendapatkan hasil seperti gambaran di atas, beberapa kode baru yang berupa CSS3 harus kita tambahkan pada syntax yang ada di template blog. Satu kunci utama yang lain adalah dengan menambahkan hover pada syntax yang ingin di rubah backgroundnya, sehingga perubahan akan terlihat ketika cursor berada di atas bagian dimaksud (onmouseover).
Langkahnya sebagai berikut:

1. Login ke Blogger.

2. Beberapa saat setelah klik login maka halaman dasboard akan nongol di hadapan sampeyan. Cari dan klik link "Design (Rancangan)".

3. Di Page Elements (Elemen Laman) ini juga terdapat beberapa link. Satu di antaranya "link Edit HTML". Temukan link ini dan klik.

4. Setelah halaman Edit HTML terbuka, silahkan sampeyan cari kode: ]]></b:skin>

5.Copy dan pastekan Kode CSS di bawah ini tepat di atas: ]]></b:skin>, kemudian klik "SAVE Templates (Simpan Template)".

.bgboxtunggal {
 width: 450px;
 margin: 15px auto;
 background: #111;
 border: 1px solid #666;
 padding: 30px;
 color: #eee;
 border-radius: 25px;
 -moz-border-radius: 25px;
 -webkit-border-radius: 25px;
 -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.6;
 filter: alpha(opacity=60); /* for IE */ 
 }
.bgboxtunggal:hover {
 background: #000099 url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/bgGradRedBlackV300H1.gif) top left repeat;
 border: 1px solid #777;
 border-radius: 30px; 
 -moz-border-radius: 30px;
 -webkit-border-radius: 30px; 
 box-shadow: 1px 1px 8px #fff;
 -moz-box-shadow: 1px 1px 8px #fff;
 -webkit-box-shadow: 1px 1px 8px #fff;
 opacity: 1.0;
 filter: alpha(opacity=100); /* for IE */  
 }

Letakkan Kode di bawah ini ke Tambah Gadged:

<div class="bgboxtunggal">Letakkan isi box disini!</div>

Selamat Mencoba!!
Semoga Bermanfaat....