Cara Membuat Gambar di Header Bergerak saat Hover

Cara Membuat Gambar di Header Bergerak saat Hover - Efek Hover pada gambar yang letaknya di Header merupakan salah satu cara untuk mempercantik template blog,kang mimin terinspirasi banget tentang template blognya karya bang Reza,denga nama Template RVD Style yang ada 2 macam yang insya allah bang mimin akan share bila sempat waktunya.

Ok langsung saja tanpa nunggu lama yah udah kebelet nih maen game hehehe :D

1. Login ke Acount Blog sobat dan pilih dahulu donk Blog yang akan kamu pasang Efek Hover gambar di Header.
2. Trus Masuk Ke Template lalu Klik Edit Template.
3. Cari kode ]]></b:skin>,gunakan F3 atau Ctrl+F untuk mempercepat pencarian.
4. 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;}

Ket :
Biru => URL gambar Anime Kamu.
Merah => Nama Kepala Headermu.
"SELANJUTNYA ATUR SENDIRI :P" Biru => URL gambar Anime Kamu. Merah => Nama Kepala Headermu."SELANJUTNYA ATUR SENDIRI :P" Biru => URL gambar Anime Kamu. Merah => Nama Kepala Headermu."SELANJUTNYA ATUR SENDIRI :P"

5. 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'/>

5. Klik PRATINJAU/PREVIEW, untuk melihat jadi apa nggak, Kalau jadi Klik Save.

Sekian Post kali ini,semoga jadi pada tahu deh dan tambah cantik blognya :D