MOHON PERHATIAN!!!........ Sehubungan sedang "ERROR"nya situs HTTP://WWW.RIPWAY.COM, maka bila Anda menemukan tutorial yang menggunakan kode dengan nama situs tersebut, sementara waktu JANGANLAH Anda gunakan. Mohon maaf, semoga anda memakluminya.............................

Mengucapkan Selamat Datang, Semoga Dapat Berkenan Di Hati Anda



SYAMSUDINNAMAKU telah hadir

KUNJUNGI CHANNEL YOUTUBE SAYA

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!


2 comments:

Info Toko Surya62 mengatakan...

Hebas Bos Syamsudin kontennya, share donk ke blog saya, saya tunggu ya, makasih saya sudah sedot ilmunya

PORTOFOLIO mengatakan...

saya coba ya (y)

Posting Komentar