Saturday, March 29, 2014

Cara Membuat GAMBAR HEADER BERGERAK SAAT MOUSEOVER

Halo Guys Hari Ini Grew Uchiha akan Share Cara Membuat GAMBAR HEADER BERGERAK SAAT MOUSEOVER
Oke Langsung Aja Cara Nya Ada Di Bawah :1.Login Blogger
2.Pilih Template
3.Pilih Edit Html
4.Lalu Cari Kode  ]]></b:skin>
5.Copy Code di Bawah Ini Lalu Letak Code Ini Di Atas 
 ]]></b:skin>
div.MaskedX {background: url("http://3.bp.blogspot.com/-WkA0o3R3Qfw/UzaiRzBdmEI/AAAAAAAACaA/rZFAVeAddX8/s1600/5071_render_KakashiAnbu2--KZKGGaara-(1).gif") no-repeat ;-webkit-transition: all 560ms ease-out;
-moz-transition: all 560ms ease-out;
-ms-transition: all 560ms ease-out;
-o-transition: all 560ms ease-out;
transition: all 560ms ease-out;
margin-left:300px;
position:absolute;
height: 200px;
width: 277px;
}
#header-wrapper:hover .MaskedX {
margin-left:490px;
opacity:0;
}
div.MaskedX1 {
background: url("http://3.bp.blogspot.com/-BHncsnH2k1g/UzaiR6q2k_I/AAAAAAAACZ8/rWuUGOQWZQU/s1600/5071_render_KakashiAnbu2--KZKGGaara-(2).gif") no-repeat;-webkit-transition: all 560ms ease-out;
-moz-transition: all 560ms ease-out;
-ms-transition: all 560ms ease-out;
-o-transition: all 560ms ease-out;
transition: all 560ms ease-out;
margin-left:405px;
position:absolute;
height: 200px;
width: 277px;
opacity:0;
}

#header-wrapper:hover .MaskedX1 {

margin-left:490px;

opacity:1;

}6.Ganti Url Gambar Yang Berwarna Merah Dengan Url Gambar Kalian.
Ist Belum Selesai !!!
Cari Kode Ini 
<div id='header-wrapper'>
Lalu Copy Kode Di Bawah Ini Lalu Paste Di Bawah Code ini 
<div id='header-wrapper'>
<div class='MaskedX'/>
<div class='MaskedX1'/>
7.Pratinjau dulu sebelum di save

Oke Semoga Bermanfaat :)

Don't Copas Kalau Tidak Memberi Sumber !!!


Bagikan

Jangan lewatkan

Cara Membuat GAMBAR HEADER BERGERAK SAAT MOUSEOVER
4/ 5
Oleh

Subscribe via email

Suka dengan artikel di atas? Tambahkan email Anda untuk berlangganan.