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 di klik tombol perbesar maka gambar menjadi ukuran besar dan di klik tombol normal untuk mengembalikan gambar pada posisi ukuran semula.
Jika di web atau blog anda banyak menampilkan gambar , cara ini dapat jadi alternatif untuk dimanfaatkan agar pengunjung bisa melihat gambar anda secara jelas.

Berikut contoh bentuk Image Preview menggunakan tombol.

Widget

Sticky Bar
Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :

1. Login ke akun Blogger anda

2. Pilih Template
3. Pilih Edit HTML
4. Tekan tombol Ctrl+F
5. Cari kode </head>
6. Massukan script dibawah ini tepat diatas kode </head>
<script type='text/javascript'>function gambarbesar1(){document.getElementById(&quot;gambar1&quot;).height=&quot;200&quot;; document.getElementById(&quot;gambar1&quot;).width=&quot;200&quot;;}function gambarnormal1(){document.getElementById(&quot;gambar1&quot;).height=&quot;100&quot;; document.getElementById(&quot;gambar1&quot;).width=&quot;120&quot;;}</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: bold; height: 12px;width:120px; padding:3px;}</style>
Catatan :
Untuk menambah gambar , anda tinggal menambah kode yang berwarna merah dan simpan dibawah kode yang berwarna merah tersebut tapi ganti nomor yang berwarna biru menjadi nomor 2 dan seterusnya.

7. Klik simpan template

Langkah selanjutnya anda tinggal menambahkan kode HTML pada saat menulis artikel.

Jangan lupa tambahkan kode HTML pada bagian HTML bukan Compose.
Cara ini bila gambar akan ditampilkan pada halaman posting. 

Tapi bila anda ingin menampilkan Gallery pada sidebar blog anda , berarti anda tinggal menambah gadget.
Silahkan ikuti langkah berikut ini :


1. Pilih Tata Letak >> Tambah Gadget >> HTML/JavaScript
2. Masukkan script dibawah ini
<div class="galleryagambar">
<div class="gallerya"><table border="0" width=""><tbody><tr><td bgcolor="#ECECEC"><a href="http://AlamatLinkAnda" target="_blank"><img height="100" id="gambar1" src="URL 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 simpan dibawah kode yang berwarna merah tersebut tapi ganti nomor yang berwarna biru menjadi nomor 2 dan seterusnya.

3. Klik simpan


Semoga bermanfaat...!!!


Subscribe

0 Komentar Blogger
Komentar Facebook

0 komentar:

Pasang Widget Otomatis



Submit Web / Blog Ke 20+ Search Engines

Cek Ukuran dan Kecepatan Loading Blog / Web

Masukkan URL blog max 10 URL
( Tools by Dhecun Blog : Get Widget )

Update Artikel Dhecun Blog

Berlangganan Artikel Gratis Lewat Email

Berlangganan artikel via email.

Dapatkan update artikel terbaru dari Dhecun Blog

yang akan dikirim ke email anda secara gratis...!

Jangan lupa buka Email anda untuk verifikasi.
RSS feeds















Space Iklan

Pasang Iklan

Pasang Iklan

Pasang Iklan

Pasang Iklan

Pasang Iklan

Kategori pasang iklan

Rp.10.000 per bulan
Rp.100.000 per tahun
Judul iklan
Deskripsi iklan
Gambar (220x150)

Iklan Sponsor 1

About Me

Profil Google+
My Facebook
Kirim SMS Gratis
Download Gratis
Print

Contact

Contact on Email
Contact on Facebook

Rekomendasi

Follow

RSS feeds

Widget Populer

Widget Zoom Detail Gambar

Widget Share Button Melayang

Share

Tukar Link

Traffic

Semua Artikel




Tampilkan semua artikel

10 Artikel Terbaru






Masukkan email anda

untuk berlangganan artikel




Dhecun Blog

Followers

Google+ Followers

Google+ Badge