- Back to Home »
- Tips 'N Trick , Trik Blog »
- Cara Membuat Gambar Di Header Bergeser Saat Disentuh Mouse
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.
Tess1
BalasHapustess 2
BalasHapustess 3
BalasHapusThanks Infonya
BalasHapusoke bang :D
BalasHapusPertamax ...
BalasHapusea :v
BalasHapus:v :v :v
BalasHapusgan mau nanya
BalasHapuswaktu ana mau nyari "div id header-wrapper" kok gak ketemu gan?
bang...
BalasHapusklu header-wrapper gk ad gantinya ap ya..
template bawaan blogger gk ad header-wrappernya..
visit n comment back..
http://kiritoblogs.blogspot.com/
'header' dan jika 'header' ada CSSnya beda lgi sob...
BalasHapusyang CSS #header-wrapper:hover .ARheader { ganti jadi #header:hover .ARheader {