Membuat gambar dipop-upkan di Blog

Pernahkah Anda mendownload file dari situs Ziddu.com? Jika Anda membuka pertama kali, maka ketika nge-klik yang pertama, maka akan keluar jendela baru (inilah pop up) yang menampilkan iklan secara otomatis. Nah, sekarang yang saya maksud disini bukan pop up yang seperti itu. Pop up ini adalah untuk membuka halaman baru, tapi bukan untuk membuka iklan, dsb. Pop up ini bertujuan untuk membuka web tanpa meninggalkan halaman yang kita baca aja. Misal aja gambar: Gambar di blog terlalu kecil, maka kita bisa membuat pop-up di gambar tersebut. Dengan meng-klik maka akan muncul layar baru (pop up) yang memunculkan gambar itu dalam ukuran yang sebenarnya.

contoh:

Mantapkan hati Anda untuk melihat gambar ini
Jangan di-klik jika memang tidak kuat!!! I'm Serious!

Nah, perhatikan gambar ini.
Ada 3 gambar dengan penyetingan berbeda.
1. Setingan pertama (default)
Jika kita menambah atau upload gambar, maka secara default (otomatis) jika gambar diklik akan berganti halaman yang memunculkan hanya gambar tersebut.
Coba aja gambar dibawah ini:

Kodenya:
<div class="separator" style="clear: both; text-align: center;"><br /> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu5286R9aodHi-wUJVD-sFp1QfeAv-_5lSUMu3IV-o-uygnBy4BCEGWWUuvD69i0N7-LkEnEtzEKEu97toGQ2Z5P42Rurytq8ZYscQmttT6MW1-f_M9Dw311VcHmtswYVVKsdXhSTc246v/s1600/images.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="167" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu5286R9aodHi-wUJVD-sFp1QfeAv-_5lSUMu3IV-o-uygnBy4BCEGWWUuvD69i0N7-LkEnEtzEKEu97toGQ2Z5P42Rurytq8ZYscQmttT6MW1-f_M9Dw311VcHmtswYVVKsdXhSTc246v/s320/images.jpg" width="167" /></a></div>

Ini kadang membuat saya kurang nyaman, karena mau tidak mau harus meng-load lagi halaman sebelumnya.

2. Setingan kedua: Saya membuat gambar saat diklik muncul pada halaman baru. sehingga kita tidak perlu meniggalkan halaman yang kita baca. Kita cukup menambahkan tag "_blank" pada url gambarnya. Contohnya:

Kodenya:
<div class="separator" style="clear: both; text-align: center;"><br /> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu5286R9aodHi-wUJVD-sFp1QfeAv-_5lSUMu3IV-o-uygnBy4BCEGWWUuvD69i0N7-LkEnEtzEKEu97toGQ2Z5P42Rurytq8ZYscQmttT6MW1-f_M9Dw311VcHmtswYVVKsdXhSTc246v/s1600/images.jpg" imageanchor="1" target="_blank" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="167" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu5286R9aodHi-wUJVD-sFp1QfeAv-_5lSUMu3IV-o-uygnBy4BCEGWWUuvD69i0N7-LkEnEtzEKEu97toGQ2Z5P42Rurytq8ZYscQmttT6MW1-f_M9Dw311VcHmtswYVVKsdXhSTc246v/s320/images.jpg" width="167" /></a></div>

3. Setingan kedua: saya memodif menjadi pop-up yang muncul di layar baru dengan ukuran sesuai dengan gambarnya, atau sesuai dengan ukuran tertentu.
Coba di klik gambar berikut.

Kodenya:
<div class="separator" style="clear: left; float: center; margin-bottom: 1em; margin-right: 1em; text-align: center;"> <img border="0" height="167" onclick="window.open(' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu5286R9aodHi-wUJVD-sFp1QfeAv-_5lSUMu3IV-o-uygnBy4BCEGWWUuvD69i0N7-LkEnEtzEKEu97toGQ2Z5P42Rurytq8ZYscQmttT6MW1-f_M9Dw311VcHmtswYVVKsdXhSTc246v/s1600/images.jpg','popupwindow','scrollbars=no, width=250,height=250');return true" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu5286R9aodHi-wUJVD-sFp1QfeAv-_5lSUMu3IV-o-uygnBy4BCEGWWUuvD69i0N7-LkEnEtzEKEu97toGQ2Z5P42Rurytq8ZYscQmttT6MW1-f_M9Dw311VcHmtswYVVKsdXhSTc246v/s320/images.jpg" width="167" /></div>

Nah, saya lebih suka setingan yang kedua dan ketiga.

Dan biasanya saya menggunakan kode ke-4 berikut:

dengan kode sbb:
<div class="separator" style="clear: both; text-align: center;"> <span id="gambar4"> <a href="#gambar4" onclick="window.open(' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu5286R9aodHi-wUJVD-sFp1QfeAv-_5lSUMu3IV-o-uygnBy4BCEGWWUuvD69i0N7-LkEnEtzEKEu97toGQ2Z5P42Rurytq8ZYscQmttT6MW1-f_M9Dw311VcHmtswYVVKsdXhSTc246v/s1600/images.jpg','popupwindow','scrollbars=no, width=250,height=250');return true"><br /> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu5286R9aodHi-wUJVD-sFp1QfeAv-_5lSUMu3IV-o-uygnBy4BCEGWWUuvD69i0N7-LkEnEtzEKEu97toGQ2Z5P42Rurytq8ZYscQmttT6MW1-f_M9Dw311VcHmtswYVVKsdXhSTc246v/s320/images.jpg" width="167"></a></span></div>

Cara penggunaan, tinggal mengganti url/alamat gambar yang ingin ditampilkan aja.
Mungkin perlu ditambahkan kode unik (untuk kode ke-4).
<span id="kode_unik">Text pada gambar/keterangan</span>
Sehingga kode #  yang tersisip pada kode <a href="#" dst... bisa diisi dengan #kode_unik
sehingga menjadi:
<a href="#kode_unik" dst...