Galeri Gambar dengan Efek Visual LightBox (2)

Tulisan ini adalah lanjutan dari tulisan sebelumnya yang membahas tentang Visual LightBox. Setelah sebelumnya saya membahas sekilas tentang cara penggunaan perangkat lunak Visual LightBox, kali ini akan saya bahas cara penerapan Visual LightBox pada template Blogger atau Blogspot. Seperti yang saya tulis sebelumnya, pemasangan efek Visual LightBox memang cukup rumit bila dijelaskan secara rinci dan runtut dari awal. Daripada pusing membaca tulisan saya (saya sudah buktikan) yang terlalu panjang dan lumayan lebar, maka saya putuskan untuk memangkas beberapa bagian dari tulisan ini. Tentunya hal tersebut tidak akan mengurangi inti dari pemasangan efek JQuery ini. Nsmun bila Anda tetap menginginkan detilnya, silakan hubungi saya via Kirim Pesan pada menu blog ini :)


Oke, langsung kita melangkah (diperbarui tanggal 28 Desember 2011: perbaikan kode)

Langkah 1
Unduh bahan-bahan yang diperlukan.


Langkah 2
Ekstrak bahan-bahan tersebut (kata kunci: akutidakjugakau)


Langkah 3
Buka file Visual Lightbox Droid.css, salin semua isinya lalu tempel tepat sebelum ]]></b:skin>


Langkah 4
Cari kode JQuery di halaman Edit HTML, bila belum ada, tempatkan kode JQuery berikut di atas kode </head>

<!-- jQuery -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>


Langkah 5
Buka file Visual LightBox Droid Js.txt, salin tempel di bawah kode JQuery, lalu simpan template Anda.


Langkah 6
Buat postingan baru, kemudian isi Edit HTML (bukan Compose) dengan kode berikut.

<div class="separator" style="clear: both; text-align: center;">
<a class="vlightbox1" href="https://lh5.googleusercontent.com/-hdcp-cm0KXQ/TvpmhpRsIKI/AAAAAAAAAFI/WcPGWyPg5ls/s800/8bitblues800x600desktopia.net.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="8 bit"><img alt="8 bit" border="0" src="https://lh5.googleusercontent.com/-jZx8oBUsaLk/Tvpml-szRqI/AAAAAAAAAFU/NTOgvbNL_wY/s800/8bitblues800x600desktopia.net.jpg" /></a><a class="vlightbox1" href="https://lh6.googleusercontent.com/-XYsA2FL4QZQ/Tvpmg7lwseI/AAAAAAAAAFE/Yi_w4M54_4A/s800/ljxdn.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="Berenang"><img alt="Berenang" border="0" src="https://lh4.googleusercontent.com/-qjR46dzx_bU/Tvpml5aK04I/AAAAAAAAAFc/wmkNe5ZiCv8/s800/ljxdn.jpg" /></a><a class="vlightbox1" href="https://lh6.googleusercontent.com/-ILqTtjVWBX0/TvpmgLFPDzI/AAAAAAAAAE8/JLgeNzfbhKQ/s800/pendaki_langit.jpg" style="margin-left: 1em; margin-right: 1em;" title="Pendaki Langit"><img alt="Pendaki Langit" src="https://lh4.googleusercontent.com/--64PXSQDIp4/TvpmmB51zeI/AAAAAAAAAFY/q1HoxO9n0No/s800/pendaki_langit.jpg" /></a></div>

<a class="vlb" href="http://visuallightbox.com/" style="display: none;">Digital Photos Album by VisualLightBox.com v4.3.2</a>


Keterangan Warna:
Hijau    : class untuk memanggil efek Visual LightBox
Oranye : Gambar utama
Kuning : Judul gambar
Biru      : Gambar pratinjau (thumbnail)


Silakan edit kode di atas sesuai kebutuhan, kemudian terbitkan. Selain pada postingan, Anda dapat juga memasang Visual LightBox di sidebar maupun elemen laman yang lain. Selamat mencoba :)




Ardhiansyam | Find us on Google+ | Kontak | Follower? klik di sini | Sitemap | Versi Mobile | ke atas ↑