Cara membuat Image Preview menggunakan tombol

Image Preview ini berfungsi untuk melihat gambar dalam ukuran yang lebih bersar, dan cara kerjanya menggunakan tombol perbesar dan tombol normal, yaitu bila diklik tombol perbesar maka gambar menjadi ukuran besar dan klik tombol normal untuk mengembalikan gambar pada posisi ukuran semula.
Buat sobat blogger yang web atau blognya banyak menampilkan gambar, cara ini dapat jadi alternatif untuk dimanfaatkan agar pengunjung bisa melihat gambar anda secara jelas.

Berikut bentuk Image Preview menggunakan tombol  :

Cara buat web

LIHAT DENO dengan gambar yang banyak.

Nah.... bola anda berminat, silahkan anda ikuti langkah berikut :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.

4. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

5. Copy kode di bawah ini dan taruh sebelum kode </head> :

<script type="text/javascript">
function gambarbesar1()
{document.getElementById("gambar1").height="200"; document.getElementById("gambar1").width="200";}
function gambarnormal1()
{document.getElementById("gambar1").height="100"; document.getElementById("gambar1").width="120";}
</script>

<style type="text/css">
div.galleryagambar{position:relative; margin: 2px; padding:8px; border: 2px solid #ccc; background-color:#E3E3E3; float:left;}   
div.gallerya{position:relative; margin: 2px; border: 2px solid #D8D8D8; background-color:#ECECEC; float:left; text-align: center;}   
div.gallerya img{ border: 2px solid #ccc; margin-top: 5px;}
div.gallerya a:hover img{ border: 2px solid #000000;/* for IE */ filter:alpha(opacity=40);/* CSS3 standard */ opacity:0.4;}
div.labela{ border: 0px solid #D2D2D2; background-color:#ccc; text-align: center; font-weight: normal; height: 40px;width:115px; padding:3px;}
</style>

Catatan :
Untuk menambah gambar, anda tinggal menambah kode yang berwarna merah dan mengganti nomor yang berwarna biru menjadi nomor 2 dan seterusnya. (yang penting setiap gambar dan scriptnya memiliki ID yang unik)

6. SIMPAN TEMPLATE

Langkah selanjutnya anda tinggal menambahkan kode HTML yang ada dibawah dibawah, pada saat menulis artikel. Jangan lupa tambahkan kode HTML pada bagian Edit HTML . Cara ini bila gambar akan ditampilkan pada halaman posting. 

Tapi bila anda ingin menampilkan Gallery pada sidebar blog anda. Berrarti anda tinggal menambah gadget. Perhatikan langkah berikut :

1. Klik Rancangan dan pilih Elemen Laman

2. Tambah Gadget

3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript

4. Copy dan paste kode dibawah ini pada gadget tersebut :

<div class="galleryagambar">

<div class="gallerya">
<table border="0" width="">
<tbody>
<tr>
<td bgcolor="#ECECEC"><a href="ULR ARTIKEL" target="_blank"><img height="100" id="gambar1" src="ULR GAMBAR" width="120" /></a><br />
<div align="center">
<input onclick="gambarbesar1()" type="button" value="Perbesar" />
<input onclick="gambarnormal1()" type="button" value="Normal" />
</div>
</td>
</tr>
<tr>
<td bgcolor="#ccc"><div class="labela">
LABEL GAMBAR</div></td>
</tr>
</tbody></table>
</div>

</div>

Catatan :
Untuk menambah gambar, anda tinggal menambah kode yang berwarna merah dan mengganti nomor yang berwarna biru menjadi nomor 2 dan seterusnya. (yang penting setiap gambar dan scriptnya memiliki ID yang unik)
5. Simpan.

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini, atau berlangganan artikel melalui tombol dibawah ini.

Related Articles :
Baca artikel lain :

Informasi Artikel :
	Judul : "Cara membuat Image Preview menggunakan tombol" Diulas Oleh : Noercholis | Sabtu, 02 Juli 2011 | 22.11 Description : Image Preview ini berfungsi untuk melihat gambar dalam ukuran yang lebih bersar, dan cara kerjanya menggunakan tombol perbesar dan tombol... Label : css,HTML,JavaScript Rating : 6.4 Dari 10, Berdasarkan 600+ Dari 6 000+ Pengunjung.
Sampai saat ini baru ada : 6 komentar >>> Silahkan tambahkan komentar Anda...