Photo efeK Preview

Efek Zoom Preview PADA Gambar di posting Image 

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.

contoh:

KODE UNTUK GAMBAR POSTING 

<div class="separator" style="clear: both; text-align: center;">
<a class="preview" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinal726txRvIRp0V0txGBdW_KPPXR8vamDLzsGYRHT04CGuUlzCzHlfATowPOlvSVaJUrL1BjSWeVJ87gauwrFPfuzSG1BKp-CCO5STgj0dBW8Mz544h3ZPF_rv4H6d5rCPes3p6p6ICQK/s700/563491_135670996573530_1424653217_n.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="alinoka"><img alt="alinoka always love ttemi" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinal726txRvIRp0V0txGBdW_KPPXR8vamDLzsGYRHT04CGuUlzCzHlfATowPOlvSVaJUrL1BjSWeVJ87gauwrFPfuzSG1BKp-CCO5STgj0dBW8Mz544h3ZPF_rv4H6d5rCPes3p6p6ICQK/s700/563491_135670996573530_1424653217_n.jpg" width="212" /></a></div>

KODE JQUERY  VS CSS EFECK PEMBESAR GAMBAR

<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

SEMOGA BERMANFAAT  SALAM SAHABAT: