Cara Menambah Efek Zoom Pada Gambar

Efek ini berfungsi untuk membuat gambar menjadi besar atau zoom ketika gambar di klik dan untuk mengembalikannya lagi ke ukuran semula tinggal di klik lagi. contohnya seperti di bawah ini


ketika kamu arahkan crusor pada gambar di atas, dan klik satu kali. untuk mengembalikan seperti semula klik gambar yang sudah di perbesar tadi. Langkah untuk membuatnya cukup copy paste (copas) code di bawah ini. Setelah itu buka Rancangan - Edit Html. cari code </head> dengan cara tekan Ctrl + F . setelah ketemu copy paste (copas) kode di bawah ini di atas code </head>

 

Selanjutnya simpan.

Langkah selanjutnya adalah penerapan gambar. di sarankan untuk upload gambar di image host seperti photobucket.com , imageshack.com dan lain-lain. caranya :
Ambil Url gambar yang kamu pasang, contoh :

kemudian tambahkan code class="magnify" di dalam code gambar tadi, hasilnya seperti ini : 
code class="magnify" harus kamu copy di setiap kode gambar kamu.

untuk menentukan besarnya zoom gambar, tinggal tambahkan code class="magnify" width="100px;" height="150px;"  . Keterangan : width = lebar, height = tinggi. codenya akan seperti ini


jika anda meng upload gambar dari blogger. maka hapus beberapa code. contoh code saat upload gambar

hapus semua code seperti ini <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGesKdQNBll9Tnr4TIBW1uYlqCpr9f0Q-dypeKB9BMPOOnrJviiHb-fQrTJDJa7aRFssCHUXjW6sRUt41wAfdHRUrNiB5UbGfyuz1qSawIMLj7VMUa9fiZcMtYpp1OQe8qtFGFLgtrwwg/s1600/animation+copy.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">

maka kodenya seperti ini :



sekian tutorial dari saya, semoga berguna dan bermanfaat bagi anda sekalian.

11 komentar:

Ladida's Blog said...

pake javascript yah . ,

nina said...

wow...coba deh X3

ryuuku sena said...

@ladida : iya sob pake jquery
@nina : silahkan..

enda fivers said...

waah .keren sob :))
izin coba yah :)

"Sukses slalu sob"

trenfo said...

ok2

4simpleblog said...

thanks gan infonya ...

baguss ..

Kusen Aluminium Murah said...

Makasih Mas Sena.. saya mau perbesar gambar yang ada di web saya, agar orang yang datang ke web bisa melihat gambar dengan jelas

honda freed said...

bagus juga, bisa dicoba nih. makasih

Sangpecinta said...

kalo ambil gambarnya dari local computer gmn???

http://s4ngpecinta.blogspot.com/

Unknown said...

thank info gan .,
mampir ea bayu-cemment.blogspot.com

Unknown said...

Mampir ke blog ane sob...

Post a Comment

Previous
 

Ryuuku Sena Blog Design by Ryuukusena © 2011