Lightbox for Blogger : Beautifull Blogger Image Viewer

Nggak perlu panjang lebar, semua pasti 'dah pada tahu apa tuh lightbox. Image Viewer yang akan kita buat kali ini nggak pakai jQuery namun menggunakan prototype.js dan scriptaculous.js. Semua javascript dan kode CSS-nya dah lengakap n tinggal pasang di bawah tag pembuka header (<head>). Hanya, ... ini sekedar saran tapi cukup penting : setelah di coba dan berhasil, javascript lightbox dan css lightbox-nya sebaiknya sampeyan upload secara pribadi di file hosting agar bisa digunakan secara pribadi pula. mengapa hal seperti ini penting dilakukan? Ya... tentu saja berkaitan dengan bandwidth. Jika sampeyan upload sendiri pastinya yang akan pakai juga hanya sampeyan sendiri juga, so ... dengan begitu loading bisa cepat dan blog sampeyan tetap car .... lancar ...nggak pakai lelet! He .... he ... You, know?!
Oooiiii.... yah... barangkali ada nyang blom tahu apa itu lightbox, silahkan sampeyan buka demonya di bawah ini. Jika demo mungkin lelet ya mohon dimaafkan karena hanya mampu pakai hosting gratisan, bat... sobat!!

D E M O: Blogger

Cara Membuat Lightbox

Login : Login ke Blogger dengan cara:
- Tulis Alamat Email.
- Tulis Password.
- KLIK "Login".
Dasboard/Dasbor : Akan dijumpai sesaat setelah KLIK "Login". Banyak link atau teks link terdapat di halaman ini. Cari dan klik link "Design/Rancangan".
Kembali lanjutkan dengan klik link "Edit HTML".
Back-up Templates :
- KLIK Download template Lengkap/Download Full Templates.
- Simpan file template di folder PC.
- Kembali di halaman Edit HTML.
Cari kode : <head> Gunakan Ctrl+F untuk mempercepat dan mempermudah pencarian kode! (lihat menu sebelah kiri: special tutorials.
Letakkan Link kode CSS dan javascript lightbox tepat di bawahnya.
Klik Save Template.

Link Javascript dan Kode CSS Lightbox:

Cara Penulisan kode Lightbox:

Single Image

Image Gallery

Catatan/Keterangan:

Seperti yang sudah tersampaikan di atas, agar loading blog sampeyan tidak terganggu karena "tidak boleh tidak" link javascript dan link CSS lightbox yang ada di posting ini pasti akan digunakan oleh banyak pengguna, maka sebaiknya GR_lightbox-2.04.min.js dan GR_lightbox-2.04.css di upload sendiri di file hosting.
Dalam CSS dan javascript ada 4 buah image yang digunakan sebagai background. Upload juga background-image ini dan ganti yang sebelumnya sudah disertakan.
- http://lightbox-image-viewer.googlecode.com/files/prevlabel.gif (GR_lightbox.css)
- http://lightbox-image-viewer.googlecode.com/files/nextlabel.gif (GR_lightbox.css)
- http://lightbox-image-viewer.googlecode.com/files/loadingAnimation.gif (GR_lightbox.min.js)
- http://lightbox-image-viewer.googlecode.com/files/closelabel.gif (GR_lightbox.min.js)
Untuk upload javascript dan kode CSS silahkan lakukan di Google Sites atau Google Code.
Bagi yang membutuhkan panduan upload dan simpan file (javascript, css dll) di Google Sites, silahkan klik di sini!.
Image.jpg = image dalam ukuran besar.
thumbnail.jpg = image dalam ukuran kecil.
gallery-1 = gallery pertama. Jika ada beberapa kelompok buatlah perbedaan gallery dengan gallery-2, galler-3 ... dsb. Gallery bisa diganti dengan nama yang lain!
Jika blog mengalami masalah ketika menggunakan file dari google sites, karena link css menggunakan hosting dari google sites, silahkan download kode cssnya, kemudian copy dan pastekan di atas kode ]]></b:skin> yang terletak di atas kode </head>

Cara Membuat link pada caption

Membuat link pada caption dilakukan dengan cara membuat link pada title dimana symbol atau caracter-nya dituliskan dalam bentuk kode html. Perhatikan contoh di bawah ini disekitar teks yang bercetak tebal (lihat demo single image!).

Penulisan kode secara umum

<a href="image.jpg" rel="GRlightbox[gallery]" title="gubhugreyot.blogdetik.com"><img src="thumbnail.jpg" width="200" height="150" /></a

Menambahkan link pada caption lightbox (dituliskan pada title):

<a href="image.jpg" rel="GRlightbox[gallery]" title="<a href="http://gubhugreyot.blogdetik.com">gubhugreyot.blogdetik.com</a>"><img src="thumbnail.jpg" width="200" height="150" /></a

Test/Percobaan:

Gunakan kode berikut di halaman posting untuk melakukan percobaan:

<div align="center" style="display:block;margin:30px auto;text-align:center;width:410px;">
<a href="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/img_green-frog.jpg" rel="GRlightbox[gallery-1]" title="Kodok ngorek neng pinggir kali."><img src="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/th_green-frog.jpg" width="180" height="130" style="float:left;margin:5px 12px 5px 0;padding:4px;background:#ddd;border:1px solid #888;box-shadow:0 0 10px #000;" /></a><a href="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/img_youtube-lord-ofthe-ring.jpg" rel="GRlightbox[gallery-1]" title="The Lord of The Rings"><img src="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/th_youtube-lord-ofthe-ring.jpg" width="180" height="130" style="float:left;margin:5px 12px 5px 0;padding:4px;background:#ddd;border:1px solid #888;box-shadow:0 0 10px #000;" /></a><a href="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/img_red-flower.jpg" rel="GRlightbox[gallery-1]" title="Indonesia seharusnya seindah bunga ini! Sayang banyak pejabat jadi maling!"><img src="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/th_red-flower.jpg" width="180" height="130" style="float:left;margin:5px 12px 5px 0;padding:4px;background:#ddd;border:1px solid #888;box-shadow:0 0 10px #000;" /></a><a href="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/img_war-horse.jpg" title="War Horse ....<a href="http://gubhugreyot.blogdetik.com" target="_blank">gubhugreyot.blogdetik.com</a>" rel="GRlightbox[gallery-1]"><img src="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/th_war-horse.jpg" width="180" height="130" style="float:left;margin:5px 12px 5px 0;padding:4px;background:#ddd;border:1px solid #888;box-shadow:0 0 10px #000;" /></a>
</div>