cara Membuat Light Box Image Viewer untuk Blogger

Light Box adalah sebuah penampil gambar yang sangat menarik layaknya slideshow dengan menggunakanjavascript. Dengan menggunakan script ini visitor akan mudah melihat gambar yang mereka inginkan. Tinggal klik gambarnya lalu gambar akan membesar secara otomatis lalu tampilan windows akan gelap kemudian gambar itu akan berada di tengahnya dengan ukuran yang sebenarnya dan mudah untuk di navigasi. Kalau blog kamu merupakan blog yang content atau isinya kebanyakan gambar seperti blog photo gallery, script Light Box Image Viewer ini merupakan hal yang wajib bagi kamu untuk di pasang di blog.

Buat kamu yang masih blom tau apa itu Light Box Image Viewer silakan perhatikan Demo gambar dibawah ini.

Live Demo

Bagi yang tertarik untuk memasangnya silakan ikuti langkah-langkah dibawah ini.

Langkah 1
Pastikan kamu sudah login di blog dan buka halaman Dashboard

Langkah 2
Sekarang pergi ke Template > Edit HTML

Langkah 3
Temukan kode </head> lalu letakkan kode berikut ini sebelum / diatas kode tersebut.

<!--Light Box Code Starts hitsuke.blogspot.com-->
<style>
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer&gt;#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: urlundefineddata:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: urlundefinedhttps://lh4.googleusercontent.com/-aqmvci4OuOk/Tn2tMmwcBgI/AAAAAAAAJf4/bV457vvo3oM/Prev-A.png) left 50% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: urlundefinedhttps://lh5.googleusercontent.com/-Kmwdi8LhPdk/Tn2tMqWZvTI/AAAAAAAAJf8/lweSU7XcvpE/Next-A.png) right 50% no-repeat; }
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }
#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js' type='text/javascript'/>
<script src='https://sites.google.com/site/hitsukeproject/lightbox.js' type='text/javascript'/>
<!--Light Box Code Ends hitsuke.blogspot.com-->

Langkah 4
Simpan perubahan tadi dan selesai.
Nah, sekarang bagaimana caranya agar gambar yang di klik berada pada Light Box Image Viewer?
Perhatikan instruksi berikut ini.

<a href="Naruto.jpg" rel="lightbox[NamaAlbum]" title="NamaGambar" ><img src="/s512/Naruto.jpg"></img></a>

Upload gambar yang kamu inginkan kemudian tambahkan kode rel="lightbox[NamaAlbum]" title="NamaGambar" dengan posisi seperti kode diatas pada bagian Edit HTML di post editor blogger kamu.

kamu juga bisa membuat beberapa album dalam satu postingan dengan cara merubah NamaAlbum nya sesuai selera. Jadi album dengan nama yang sama akan ditampilkan secara berurutan dengan bantuan tombol Navigasi di bagian kiri dan kanan gambar.


Catatan:
Kalau light box image viewer ini tidak bekerja coba hilangkan dulu Light Box Image Viewer yang dari blogger. Untuk menghilangkan Light Box Viewer yang original dari Blogger masukkan kode dibawah ini sebelum / diatas kode </body>

<script type='text/javascript'> document.getElementById('Blog1').id = 'Blog222'; var bp_dummy = document.createElement("div"); bp_dummy.id = 'Blog1'; bp_dummy.style.display='none'; document.getElementsByTagName("body")[0].appendChild( bp_dummy ); </script>

sumber