Lightbox Effect untuk Blogger

Sebuah blog terkadang perlu diberi sedikit efek-efek javascript agar blog bisa terlihat lebih manis dan tidak membosankan. Tetapi terlalu banyak kode javascript juga bisa memberatkan blog. Oleh karena itu, efek-efek yang diberikan pada blog harus pilih-pilih juga tanpa menghilangkan sisi estetisnya :D

Lightbox adalah sebuah plug-in javascript yang bakalan memberi efek pada gambar yang ada di blog. Efek ini akan terlihat ketika gambar tertentu diklik.

Cara pasangnya gampang banget koq. Pertama, masukkin kode CSS buat tampilan Lightbox-nya nanti ke blog:
1. masuk ke Design > Edit HTML
2. cari kode </head> dan ganti dengan kode di bawah ini:

<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>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data: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: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaGGg55G8Wnqs8jOD-oXCK4RdeuqTn-izU4W9yImSSHV00HtlHGnCTr1W5cX3S2zbghS-ikiyUUOyZ1OEO36xvS8coq7NmqJz-NHClN3Sauy2QPwftDe6rkDCs1yqgyDsMM_8g1p2DTNE/) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-eTDF5tiSe9ZQonrCpCSQWqy57n6BMu-DStl_VU0Ehi7sEWt2AnAMsTZgzPU-gAwoC6Kv5EGRe5Le6Wb72uymkBROZtMznG4U2e6Uw17fjllo_61r0TkMk0i713nDeikgn4XqPqJuhnE/) right 15% 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; }
round-color: #000; }
lute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
round-color: #000; }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js' type='text/javascript'/>
<script src='http://files.bloggerplugins.org/lbox/js/scriptaculous.js' type='text/javascript'/>
<script src='http://blogergadgets.googlecode.com/files/lightbox.js' type='text/javascript'/>
</head>

Setelah kode CSS-nya dimasukkan, gimana cara mengaplikasikannya ke blog?
Supaya efek Lightbox-nya ini bekerja pada gambar yang kita inginkan, kita perlu menambahkan beberapa kode HTML ke dalam kode HTML gambar tersebut.
Biasanya, setelah kita memasukkan gambar ke dalam postingan, akan muncul seperti ini:

<a href="http://alamat_gambar1.jpg" rel="lightbox" title="Your Image Caption"><img src="http://alamat_gambar2.jpg"></a>

Tulisan merah di atas diisi dengan alamat/URL gambar yang akan muncul ketika gambar diklik.
Dan tulisan yang berwarna hijau diisi dengan alamat/URL gambar yang akan muncul pada postingan blog kita.
Untuk menambahkan efek lightbox pada gambar, tambahkan rel="lightbox" seperti di atas dan tambahkan juga image title gambarnya yang akan berfungsi sebagai caption gambar tersebut.

note: biasanya kalo sumber gambar yg kita upload berasal dari komputer kita sendiri, alamat gambar yang muncul akan mengandung "-h". Contohnya seperti:

href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTYea9n4wQ4uQslJQXmJnGXtbfsM90on5t0zJeSuD8xH_LgZyyGaCpSLMkaeWmVgosnGXyfZfQ0ry8BAuZfptpyMwrvIj969b-W2KFs3KAaiVIqvgleUNHv97sxGtVoMiJf-o3cEOqnGPL/s1600-h/clear_water_island.png"

Hapus s1600-h/ pada alamat gambar tersebut sehingga menjadi seperti ini:

href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTYea9n4wQ4uQslJQXmJnGXtbfsM90on5t0zJeSuD8xH_LgZyyGaCpSLMkaeWmVgosnGXyfZfQ0ry8BAuZfptpyMwrvIj969b-W2KFs3KAaiVIqvgleUNHv97sxGtVoMiJf-o3cEOqnGPL/"

Sebagai contoh, misalnya ada kode HTML seperti ini:

<a href="http://i51.tinypic.com/1043oz8.jpg" rel="lightbox" title="Gunung Es"><img height="320" src="http://i51.tinypic.com/1043oz8.jpg" width="235" />

Hasilnya akan seperti ini: