Membuat Efek Zoom Image Pada Postingan di Blog - Efek zoom image ini akan tampak seperti halnya pada tampilan zoom image di facebook atau pada pencarian gambar di google. Dan dengan adanya efek zoom image ini maka akan memberikan kesan yang lebih indah dan lebih unik.
Langsung saja bagi anda yang berminat dan ingin mencoba untuk membuat efek zoom image pada postingan di blog silahkan ikuti tutorial di bawah ini :
1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Tata Letak".
3. Klik "Tambah Gadget".
4. Kemudian pilih "HTML/JavaScript".
5. Lalu masukkan script kode berikut ini di dalamnya :
<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/jombinabelogefekzoom/jombinabelog-efekzoom.js" type="text/javascript">
</script>
6. Klik save/simpan, selesai dan lihat hasilnya...
Jika efek zoom image yang telah kita buat tidak berhasil, maka kita tambahkan script kode untuk memanggil kembali script kode efek zoom image yang sudah kita save/simpan tadi. Caranya cukup mudah, yaitu tinggal kita masukkan kode berikut ini pada setiap gambar yang akan di tampilkan pada postingan blog kita.
<img src="#" class="magnify" data-magnifyby="2" style="cursor: url(magnify.cur),
-moz-zoom-in, -webkit-zoom-in, -o-zoom-in, zoom-in; height: auto; width: auto;" />
Note :
Ganti tanda # dengan alamat url gambar yang akan di tampilkan.
Nahh, untuk previewnya kurang lebih seperti gambar di bawah ini :
(Klik gambar di atas, dan lihat hasilnya)
Mungkin cukup sekian dulu postingan tentang cara membuat efek zoom image pada postingan di blog ini. Selebihnya saya ucapkan terima kasih atas kunjungan anda dan semoga bermanfaat. Mohon ma'af atas segala kekurangan yang ada. Special thanks to jombinabelog. Salam sejahtera by ngeposta...
0 comments:
Post a Comment