14 Jan 2013
Kali ini Didil Akan Share tentang Cara Membuat Gambar Header Bergeser Saat di Sorot Cursor ok, nggak usah berlama-lama langsung sajnehhh...... Sebelumnya liat dulu Screen Previewnya duluTahap:
1. Login blogger Kalian.
2. Trus Masuk Ke Template.
3. jangan Lupa beri centang pada Expand Template Widget
Cari kode , Pastekan Kode Di Bawah Ini Tepat Di atas Kode Tadi.
div.SCheader {
-moz-transition: all 0.75s ease-in-out 0s;
background: url("http://www.deviantart.com/download/209975142/luffy_render_by_namibekkklein-d3h0huu.png") no-repeat;
margin: 0px;
position: absolute;
}
div.SCheader {
-moz-transition: all 0.5s ease 0s;
-webkit-transition: all 900ms ease-out;-moz-transition: all 900ms ease-out;-ms-transition: all 900ms ease-out;-o-transition: all 900ms ease-out;transition: all 900ms ease-out;
background: url("http://www.deviantart.com/download/209975142/luffy_render_by_namibekkklein-d3h0huu.png") no-repeat;
margin-left: 100px;
margin-top: 0px;
position: absolute;
height: 520px;
width: 540px;
}
div.SCheader :hover {
-webkit-transition: all 900ms ease-out;-moz-transition: all 900ms ease-out;-ms-transition: all 900ms ease-out;-o-transition: all 900ms ease-out;transition: all 900ms ease-out;
background: url("http://www.deviantart.com/download/209975142/luffy_render_by_namibekkklein-d3h0huu.png") no-repeat;
}
#header-wrapper:hover .SCheader {
margin-left: 400px;
}
Keterangan :
Orange : URL gambar Kamu.
Hijau : Nama Kepala Headermu.
Kuning : Posisi Awal Gambar
Ungu : Ukuran Gambar Kamu
Pink : Posisi Akhir Gambar
"SELANJUTNYA ATUR SENDIRI :P"
4.oke sekarang kita aktifkan cssnya,Sekarang Cari kode
5. Pastekan Kode Di bawah ini Di Bawah kode Di atas
6. Klik PRATINJAU, untuk melihat jadi apa nggak, Kalau jadi Klik Save.
"BILA ADA YG SALAH TANYAKAN LANGSUNG DI KOMENTAR"
