Okay Lets Begin! haha. Pertama tama mari kita panjatkan puja dan
puji syukur kita kepada Tuhan YME atas kehadiratnya kita dapat berkumpul
dan membaca Artikel kecil ini hehe.
Tutorial kali ini juga lebih simple di bandingkan dengan tutorial yang lama tadi itu. perbedaannya adalah dimana tutorial sebelumnya ketika mouse di arahkan ke gambar zoom maka keluar hasil zoomnya di sebelah gambarnya. Sedangkan tutorial kali ini membuat gambar dengan efek zoom dengan kata lain ketika sobat menyorotkan mouse sobat ke gambar (hover), maka mouse berubah menjadi kaca pembesar.
Arahkan Cursor sobat kegambar! Putar Scroll Mouse juga!
Sumber : farixsantips.blogspot.com
Apa yang terjadi? Melihat Efeknya? Sangat indah bukan efeknya? Menurut saya sangat indah dan bisa membantu melihat gambar yang kurang jelas hehe. Berikut cara membuatnya :
Tutorial kali ini juga lebih simple di bandingkan dengan tutorial yang lama tadi itu. perbedaannya adalah dimana tutorial sebelumnya ketika mouse di arahkan ke gambar zoom maka keluar hasil zoomnya di sebelah gambarnya. Sedangkan tutorial kali ini membuat gambar dengan efek zoom dengan kata lain ketika sobat menyorotkan mouse sobat ke gambar (hover), maka mouse berubah menjadi kaca pembesar.
Contohnya Seperti ini
Arahkan Cursor sobat kegambar! Putar Scroll Mouse juga!
Apa yang terjadi? Melihat Efeknya? Sangat indah bukan efeknya? Menurut saya sangat indah dan bisa membantu melihat gambar yang kurang jelas hehe. Berikut cara membuatnya :
- Buka Blogger.com dengan Password dan ID
- Masuk ke Dashboard → Layout/Design → Edit HTML
- Letakan kode berikut diatasnya kode <head> :
- Kemudian Save!
- Selanjutnya sobat hanya perlu membuat kode gambar dan di tambahkan dengan ID="zoom", Contoh. Letakan kode berikut saat sobat ingin posting :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script src='https://sites.google.com/site/farixsantips/scripts/imgzoomer.js' type='text/javascript'>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
$('#zoom').addpowerzoom()
})
</script>
<img id="zoom" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpYyWvRNA94NOkHsvlPfpuPzRaCby1L2hFJrmKcwCtug4RqgNctJty3uBqgXU1Nkioj-DbEe3N4cnlO6B5KIrObLleVQwRShazOPYjLKEHWkUiynHelNj4HglR0na36sozHxM-F-yxbJk/s1600/parissmall.jpg" />Kode bercetakan tebal adalah kode URL gambar yang bisa di ganti terserah kemauan sobat.
JQuery Zoomer Picture (Script buat perbesar gambar)
4/
5
Oleh
Han
Posts
