Efek LightBox sangat menarik dan indah untuk menampilkan gambar-gambar pada Blogger. Ketika pengunjung meng-klik gambar yang disertakan pada artikel, maka gambar akan muncul dengan ukuran sebenarnya pada halaman yang sama dengan warna latar hitam transparan. Jika pernah menggunakan software semacam Picasa, maka seperti itulah efek LightBox yang akan kita terapkan pada Blog*Spot kali ini. Efek LightBox dibuat dan dikembangkan oleh Lokesh Dhakar, versi terbaru adalah Lightbox JS v2.04.
Blogger TuneUp menerapkan efek LightBox ini pada gambar-gambar artikel Electronic Project, silahkan dilihat terlebih dahulu untuk meyakinkan bahwa anda menyukai efek LightBox ini. Pada awalnya Blogger TuneUp mengalami kegagalan pada saat mencoba menerapkannya pada Blog*Spot, gambar tidak mampu diload (ditampilkan). Ternyata setelah tanpa lelah mencoba kesalahan ditemukan, dan kesalahan itu bukan pada proses pemasangan berbagai kode LightBox tapi terdapat pada karakter kode gambar Blog*Spot itu sendiri.
Pemasangan Efek LightBox pada Blog*Spot:
Langkah 1Login ke Blogger
Langkah 2
Masuk ke bagian "Tata Letak - Edit HTML"
Langkah 3
Cari kode dibawah ini:
]]></b:skin>Langkah 4
Masukan kode CSS dibawah ini diatas kode pada Langkah 3:
#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(http://www.lokeshdhakar.com/projects/lightbox2/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://www.lokeshdhakar.com/projects/lightbox2/images/nextlabel.gif) 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; }
Langkah 5Cari kode dibawah ini:
</head>Langkah 6
Masukan kode dibawah ini diatas kode pada Langkah 5:
<script src='http://www.lokeshdhakar.com/projects/lightbox2/js/prototype.js' type='text/javascript'/>Langkah 7
<script src='http://www.lokeshdhakar.com/projects/lightbox2/js/scriptaculous.js?load=effects,builder' type='text/javascript'/>
<script src='http://www.lokeshdhakar.com/projects/lightbox2/js/lightbox.js' type='text/javascript'/>
Simpanlah Template, sampai Langkah 7 ini proses pemasangan efek LightBox pada Blog*Spot sudah selesai, tetapi efek LightBox ini tidak akan berjalan jika tidak ditambahkan beberapa kode pada gambar yang disertakan pada artikel. Lanjutkan membaca langkah berikutnya...
Proses Modifikasi Kode Gambar:
Langkah 1Pada saat memasukan gambar pada artikel, biasanya menggunakan metode seperti gambar dibawah ini:
Langkah 2Setelah gambar berhasil di-upload lakukan penambahan kode pada mode "Edit Html" posting seperti gambar dibawah ini:
Hal yang harus diperhatikan:- Kode rel="lightbox" harus selalu ditambahkan pada gambar yang disertakan pada artikel, sehingga pada saat pengunjung meng-klik gambar, maka gambar akan ditampilkan dengan efek LightBox (lihat contoh dibawah ini, kode rel="lightbox" dengan warna biru).
- Jika gambar pada artikel lebih dari satu, tambahkan kode rel="lightbox[roadtrip]" pada setiap kode gambar. Dengan penambahan kode ini maka gambar akan ditampilkan dengan efek LightBox dan efek Slide. Semua gambar akan dikumpulkan dalam satu frame dan akan ditampilkan seperti slideshow.
- Buang kode "-h" (tanpa tanda kutip) pada gambar yang disertakan pada artikel, karena jika kode "-h" ini tidak dibuang maka gambar tidak akan mampu diload/ditampilkan (lihat contoh dibawah ini, kode "-h" dengan warna merah).
Kode LightBox jika hanya satu gambar!
<a onblur="try {parent.deselectBloggerImageGracefully();}catch(e) {}"href="http://2.bp.blogspot.com/AAAAB9g/s1600-h/image.jpg" rel="lightbox"><img style="cursor:pointer;" src="http://2.bp.blogspot.com/AAAAB9g/s400/image.jpg" alt="" id="BLOGGER_PHOTO_ID_XXXXX" border="0"></a>
Kode LightBox jika lebih dari satu gambar!<a onblur="try {parent.deselectBloggerImageGracefully();}catch(e) {}"href="http://2.bp.blogspot.com/AAAAB9g/s1600-h/image.jpg" rel="lightbox[roadtrip]"><img style="cursor:pointer;" src="http://2.bp.blogspot.com/AAAAB9g/s400/image.jpg" alt="" id="BLOGGER_PHOTO_ID_XXXXX" border="0"></a>
Langkah 3Artikel telah siap lepas landas dengan efek gambar LightBox plus Slide dan KLIK Terbitkan!
Keterangan:
- Blogger TuneUp tidak menjamin semua source yang berupa Gambar, dan JavaScript akan selalu tersedia, dari itu silahkan anda upload sendiri pada hosting pribadi anda.
- Efek LightBox ini menggunakan source disini (klik kanan save as)
- Ubahlah arah URL source diatas ke arah URL source hosting anda (perhatikan "Pemasangan Efek LightBox pada Blog*Spot" berwarna biru yang ada pada langkah 4 dan langkah 6).
