Membuat Efek Kaca Pembesar Pada Gambar
Untuk lebih jelas silahkan arahkan mouse pada gambar dibawah ini :
1. Masuk Blogger > Template > Edit HTML
2. Cari kode </head> lalu copas kode jquery di bawah ini di atas kode </head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
Bila kode diatas sudah ada pada template sobat maka lewati saja langkah diatas.
3. Selanjutnya silahkan copas kode dibawah ini diatas kode </head>
<script src="https://abitalita.googlecode.com/files/zoomlup.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('#pembesargambar').perbesaran({
sorotanu: 2,
kisaranu: [2,10],
anubesar: null,
pembesaranu: [140,140]
})
})
</script>
3. Kemudian Simpan Template
4. Untuk menampilkan efek kaca pembasar sobat bisa gunakan kode berikut ini :
<img id="pembesargambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0d9ZbRT1pizLrvsXzXuIsF7SW6a3bHkcmQVteyUxP7Z3HJ9dc2g-3Y0A2a699eafkXjOJpP44rYoD9vDlN4aeUuySIcATaujFCfKTQfqaCtxpnd85vw7Tt-xINyabdZGc7zQgCEvZanus/s1600/DSC_0720.JPG" style="height: 150px; width: 500px;" />
Keterangan : - Ganti teks warna merah dengan URL gambar sobat.
- Sesuaikan tinggi dan lebar gambar dengan merubah teks warna biru.
Demikian cara membuat efek kaca pembesar pada gambar,semoga bermanfaat.Salam...!
Langganan:
Posting Komentar (Atom)
