Cara Membuat Gambar Header Bergeser Saat di Sorot Cursor

Tahap:

1. Login blogger Kalian.
2. Trus Masuk Ke Template.
3. jangan Lupa beri centang pada  Expand Template Widget

Cari kode  ]]></b:skin>, 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: 300px;

    margin-top: 0px;

    position: absolute;

    height: 500px;

    width: 970px;

    }

    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

    <div id='header-wrapper'>

5. Pastekan Kode Di bawah ini Di Bawah kode Di atas

    <div class='SCheader'/>

6. Klik PRATINJAU, untuk melihat jadi apa nggak, Kalau jadi Klik Save.

Anda baru saja membaca artikel yang berkategori Daftar Isi Langkap / Tips Blog dengan judul Cara Membuat Gambar Header Bergeser Saat di Sorot Cursor. Anda bisa bookmark halaman ini dengan URL http://cyberprolite.blogspot.com/2013/01/cara-membuat-gambar-header-bergeser.html. Terima kasih!

Ditulis oleh: Unknown - Minggu, 27 Januari 2013