My Inspiration

Berawal dari blogwalking ke website di negeri barat sana, akhirnya saya nemu ide untuk membuat postingan. Awalnya sih sempat bingung mau memberi judul postingan ini apa ?, tapi akhirnya mentok pada judul di atas yaitu Cara Membuat Efek Zoom pada Gambar di dalam Gambar Blog, yang bahasa kerennya adalah jQuery Inner Zoom, sahabat blogger pemula bingung kan ? saya pun demikian kalau disuruh untuk memahami bahasa pemrograman web yang njlimet dan bikin mumet / puyeng / sakit kepala, yang penting jangan sampai kesambet. he-he.

Tapi baiklah, saya akan coba menjelaskan sedikit menggunakan bahasa yang biasa dan mudah dimengerti baik untuk saya sendiri maupun untuk sahabat blogger pemula lainnya tentang membuat efek zoom pada gambar di dalam gambar tersebut.

Pada umumnya efek zoom gambar itu sama saja dengan yang dijelaskan oleh blogger-blogger master lainnya (saya tidak termasuk), yaitu fasilitas untuk memperbesar ukuran sebuah gambar di dalam postingan blog. Tetapi yang membedakan adalah setiap efek yang digunakan untuk zooming gambar tersebut, untuk jenis-jenisnya saya rasa sahabat blogger sudah banyak yang tahu.

Membuat Zoom pada Gambar di dalam Gambar adalah salah satu contoh efek zooming gambar seperti yang dijelaskan di atas. Maksud dari efek Zoom Gambar di dalam Gambar tersebut adalah ketika sahabat mengarahkan kursor mouse di atas gambar pada sebuah postingan maka otomatis gambar tersebut akan memperbesar ukurannya, tetapi perbedaan efek ini dengan efek zoom yang lain adalah gambar tersebut tidak memperbesar keluar / pop-out melainkan masih tetap berada di dalam frame gambar itu sendiri.

Untuk lebih jelasnya silahkan sahabat blogger arahkan kursor mouse di atas demo zoom gambar di bawah ini dan coba arahkan ke kiri, kanan, atas, dan bawah tetapi masih di atas frame gambar tersebut.

Setelah melihat demo di atas, sekarang kita melangkah pada cara membuat zoom gambar di dalam gambar tersebut dan berikut di bawah adalah caranya :

1. Login pada blogger, Template, lalu pilih menu Edit HTML - Lanjutkan,, selanjutnya jangan lupa untuk memberikan tanda centang (checklist) pada Expand Template Widget
2. Sekarang cari kode di bawah ini dengan mengetiknya pada kotak Find, untuk membuka kotak pencarian Find tekan saja tombol Ctrl+F pada keyboard.

   </head>

3. Setelah kode </head> di atas ketemu, sekarang copy kode di bawah ini dan paste tepat di atas / sebelum kode </head> tersebut.

   <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/> <script src='http://suyb.googlecode.com/files/cloud-zoom.1.0.2.js' type='text/javascript'/>

   catatan : untuk baris kode yang berwarna kuning, jika pada template sahabat blogger sudah ada sebaiknya jangan dicopy juga. Jadi cukup copy baris kode yang berwarna putih saja.

4. Save / simpan template, sekarang sahabat sudah berhasil menyisipkan script jQuery pada template sahabat.
5. Untuk mengaktifkan efek zooming gambar di dalam gambar tersebut, sahabat blogger tinggal menyisipkan satu baris kode / script di bawah ini setiap kali akan menambahkan gambar di dalam postingan.

   class="cloud-zoom" rel="softFocus: true, position:'inside', smoothMove:2"

6. Berikut di bawah adalah contoh menyisipkan kode / script di atas pada posting gambar :

<a class="cloud-zoom" rel="softFocus: true, position:'inside', smoothMove:2" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWl1hVAcIgyWCtESw03OZrmiC5LoZJz5h5jNuVJwIzDrY_5K9I7S8jshs-z_szeuDlqXXojZQKrmXvdrsyHcGQAG5QtdY_9NxoOc2lD_h1O0iRTtLxM630toF0_fIMeoTqsC81i8V-SFJ9/s320/Spybot.png"><<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWl1hVAcIgyWCtESw03OZrmiC5LoZJz5h5jNuVJwIzDrY_5K9I7S8jshs-z_szeuDlqXXojZQKrmXvdrsyHcGQAG5QtdY_9NxoOc2lD_h1O0iRTtLxM630toF0_fIMeoTqsC81i8V-SFJ9/s320/Spybot.png"/></a>

catatan : untuk baris kode yang berwarna kuning di atas ganti dengan url gambar sahabat. (proses mengupload gambar dari hosting)

<div class="separator" style="clear: both; text-align: center;"> <a class="cloud-zoom" rel="softFocus: true, position:'inside', smoothMove:2" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWl1hVAcIgyWCtESw03OZrmiC5LoZJz5h5jNuVJwIzDrY_5K9I7S8jshs-z_szeuDlqXXojZQKrmXvdrsyHcGQAG5QtdY_9NxoOc2lD_h1O0iRTtLxM630toF0_fIMeoTqsC81i8V-SFJ9/s320/Spybot.png" imageanchor="1" =><img border="0" height="409" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWl1hVAcIgyWCtESw03OZrmiC5LoZJz5h5jNuVJwIzDrY_5K9I7S8jshs-z_szeuDlqXXojZQKrmXvdrsyHcGQAG5QtdY_9NxoOc2lD_h1O0iRTtLxM630toF0_fIMeoTqsC81i8V-SFJ9/s320/Spybot.png" width="640" /></a></div>

catatan : untuk baris kode yang berwarna kuning di atas ganti dengan url gambar sahabat. (proses mengupload gambar secara langsung dari komputer)

Demikian sampai disini share tentang bagaiamana Cara Membuat Efek Zoom Gambar di dalam Gambar Blog / jQuery Inner Zoom.

Jika ada sesuatu yang kurang dimengerti dan ingin sahabat tanyakan, jangan enggan untuk meninggalkan komentar.

Selamat Mencoba dan Semoga Sukes..
Salam Hangat dari Blogger Pemula..
Referensi ini lagi-lagi saya ambil dari http://spiceupyourblog.com