Join This Site
Back
  • Cheaterz-Comunity
.
Diberdayakan oleh Blogger.
Posted by : Asfar Sabtu, 10 Agustus 2013

Oke Sob, Masih kembali bersama saya sasasa saya jeremy tetti :v :v dibogor dibogor gor gor, ahahhahaha koq jadi lagu yak?

oke sekarang ciyus loh, saya akan membagikan tutorial yang selama ini sobat cari atau selama ini tidak tahu, yaitu membuat gambar di header bergeser saat disentuh mouse.
untuk melihat Demonya Sobat bisa Liat Diheader Saya , Atau tidak nih gambarnya:


Sebelum Disentuh Mouse


Setelah Disentuh Mouse

Jika Tertarik Nih Ikuti Caranya:

Pertama, Login Blogger
Kemudian, Klik Template ----> Edit Html --->Ctrl + F Cari Kode ini ]]></b:skin>
Copy kode ini diatas kode ]]></b:skin>



div.ARheader {
-moz-transition: all 0.75s ease-in-out 0s;
background: url("http://i1248.photobucket.com/albums/hh491/Asfarul_BiasebiaseJak/sasuke.png") no-repeat;
margin: 0px;
position: absolute;
}
div.ARheader {
-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://i1248.photobucket.com/albums/hh491/Asfarul_BiasebiaseJak/sasuke.png") no-repeat;
margin-left: 0px;
margin-top: 0px;
position: absolute;
height: 300px;
width: 540px;
}
div.ARheader :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://i1248.photobucket.com/albums/hh491/Asfarul_BiasebiaseJak/sasuke.png") no-repeat;
}
#header-wrapper:hover .ARheader {
margin-left:270px;
}

Keterangan:
Hijau : Ukuran Gambar, Height: Tinggi, Width: Lebar
Merah: Url Gambar Sobat, Usahain jangan ikut gambar diatas ya XD tapi kalo genting atau gak ada gambar lagi ya pakai aja jika pas.
Orange: Letak Gambarnya, Kalo gak diatur ya jadinya seperti saya XD

lalu, Cari Kode <div id='header-wrapper'>

Letakkan Kode Dibawah ini Tepat Diatas Kode <div id='header-wrapper'>


<div class='ARheader'/>


Jika Ragu-ragu Klik Pratinjau Dahulu.
Kemudian, Jika sudah pas Simpan Template
Selesai, Lihat Apa yang terjadi.

Demikianlah Artikel Hari ini Yang Dapat Saya Bagikan Untuk Sobat Kurang lebihnya Tentang Cara Membuat Gambar Di Header Bergeser Saat Disentuh Mouse Mohon Dimaafkan ya. untuk yang mau share artikel ini jangan lupa tulis sumbernya.

11 komentar

My Banner
Anonymous 468x60
Anonymous Revenge 88x31
Copyright © 2013 Anonymous Revenge | Powered by Blogger | Design by Margatama-kun | Re-Design By: Anonymous Revenge | Ori. Djogsz and Renadel Dapize | All Rights Reserved |