Thumbnail image tampil buka tutup

THUMBNAIL IMAGE TAMPIL DENGAN TOMBOL BUKA TUTUP

Satu lagi cara mengatur tampilan image thumbnail, hanya pada post ini agak sedikit berbeda dari versi sebelumnya.
Perbedaan itu disamping ada tombol close / tombol penutup , juga dilengkapi dengan tombol untuk menampilkan image / tombol pembuka.

LANGKAH PERTAMA :

1. Masuk ke Blogger.
2. Masuk Rancangan dan pilih Edit HTML.
3. Copy script dibawah ini kemudian paste diatas kode </head>
   
   
   
   <link href='http://sites.google.com/site/epgstudiosite/javascript/plusimageviewer1.css' rel='stylesheet' type='text/css'/>
<script src='http://sites.google.com/site/epgstudiosite/javascript/jquery.min.js' type='text/javascript'/>
<script src='http://sites.google.com/site/epgstudiosite/javascript/plusimageviewer2.js' type='text/javascript'>
</script>
4. Simpan Template

LANGKAH KEDUA

1. Masuk ke Entri Baru
2. Copy kode dibawah ini untuk menampilkan gambar thumbnail yang dilengkapi dengan tombol buka tutup
   
   
   
   <img src="alamat gambar " style="width:100px" data-plusimage="alamat gambar" data-plussize="700,466" />
   
   
   1. Yang berwarna merah merupakan alamat gambar yang akan tampil, satu untuk thumbnail dan satunya untuk tampilan penuh dalam ukuran aslinya.
   2. Yang berwarna biru merupakan ukuran yang tampil pada gambar thumbnail.
3. Kode diatas hanya untuk menampilkan satu buah gambar, silahkan anda perbanyak dengan cara yang sama seperti diatas.
4. setelah selesai, silahkan anda terbitka entri dan lihat hasilnya..!!!

Selamat mencoba, semoga bermafaat....