Cara Buat Efek Zoom Gambar Pada Blog Image Preview

Berbagi-Kreativitas.blogspot.com - بِسْــــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِي Salam Blogger! Setelah mereview situs-situs layanan kode untuk desain menggunakan kode Jquery Saya putuskan kode ala ajax.googleapis adalah pilihan untuk Cara Buat Efek Zoom Gambar Pada Blog Image Preview. Kode yang Saya lihat sering teman-teman blogger lain banyak pakai, mengingat itu kode Saya comot dari situs orang dan ingin tetap mengekspos apa yang Saya dapat dari situs tersebut terlampirlah asal mula tips ini dengan ala-Nya tapi versi Berbagi Kreativitas.

Cara Buat Efek Zoom Gambar Pada Blog Image Preview

Ketentuan untuk gambar sendiri misal, dari ukuran yang akan diposting Anda setting menjadi 50x50 lebih kecil, dengan menggunakan tips ini gambar tersebut akan membesar.

Perlu dicacat, ini tips ala Saya jadi ada ketentuan yang Saya buat yakni Efek Zoom Gambar akan bekerja jika Anda men-setting gambar yang hendak diposting menjadi lebih kecil dari ukuran gambar sebenarnya. dan akan membesar gambar nanti ketika mouse menyentuh-Nya sesuai ukuran asli, Ngerti? Dari pada panjang lebar langsung live saja dibawah dan lihat gambar sebagai demo berikut.

Size sebarnya: 500x700 sett 212x320px

Kode-Nya lihat berikut.
Kode untuk gambar

<div class="separator" style="clear: both; text-align: center;">
<a class="preview" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTNRIS1nIilNvoXTE4SRgCFWkSPAOEN6NwVIP5IWr7yLR9lDjIOpOrwl4XALNMZbZkRHjB-j-ebWXdcdc1VZGky2AxJay43rgdJWDQ52BR3iDuFuA-7WgJzLuv_QT23hyWEbve8aWoA9k/s1600/Cantik_Imut_Manis_Sholehah_Berjilbab.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="Ema Kurnia"><img alt="Suhendri Mr Vs Ema Kurnia" border="0" height="320" src="http://3.bp.blogspot.com/--Zxf7DeeFPo/T7gkscVaWgI/AAAAAAAADWM/Cgaq1gL7Mpc/s320/Ema-Kurnia-Cantik.jpg" width="212" /></a></div>

Kode jQuery vs CSS Efek Zoom

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.js' type='text/javascript'/>
<script src='http://berbagi-kreativitas.googlecode.com/files/imagePreview.js' type='text/javascript'/>

<style type='text/css'>
#preview{
  position:absolute;
  border:5px solid #fff;
  background:#333;
  padding:10px;
  display:block;
  color:#000;
  font-weight:bold;
  text-align:center;
}
</style>

Implementasi cara pemasangan kodenya, letakan kode jQueri dan CSS tersebut tepat diatas kode </head> pada template Edit HTML blog Anda. Letakan kode gambar pada postingan, Simapan dan lihat hasilnya. Inilah tips ala Suhendri Mr untuk Efek Zoom Gambar kali ini dan untuk Anda selamat mencoba semoga sukses.

Cacatan:
Ubah kode warna background, border, dan lain-lain pada kode CSS jika Anda mengerti atau ikuti saja yang sudah ada tetep ok. Agar kode bekerja lebih optimal tambahkan title dan alt yang berfungsi untuk menambahkan caption gambar, letak ada dibawah sentuh gambar dan geser dengan scroll mouse agar terlihat. Maklumkan tuh gambar besar jadi harus jeli lihat masing-masing sisi-Nya. Letakan kode gambar dimanapun Anda suka, postingan, Gadget selama itu masih pada template blog Anda