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 :)




17 komentar:

  1. wah, kalau artikel diatas ditambah dengan Emoticon2 yg lucu2 dan sangat Ekspresif yg ada diblog saya, makin manteb deh blognya, jadi lebih hidup artikelnya :thumbs up

    BalasHapus
  2. itu ada link di footer gambar itu link apa ya?

    BalasHapus
  3. kalo dipake buat wordpress bisa g?

    BalasHapus
  4. keren sob...
    nice job!!
    happy blogging...

    BalasHapus
  5. waah ,, saya sudah tidak pakai blogger :(
    eh mas, Jquery tuh apaan c?? hehe

    BalasHapus
  6. dulu saya sudah pernah pakai ini. tapi loadingnya lama banget.. jadi saya copot dah :D

    BalasHapus
  7. Tampilannya jadi menarik gitu ya.. terimakasih atas triknya

    BalasHapus
  8. Beben
    biasa saja sob
    :D


    Facemot
    sip dah, makasih
    :)


    Sebuah Tips
    Itu watermark sekaligus link ke situs Visual LightBox, silakan baca tulisan yang pertama
    :f

    BalasHapus
  9. honey
    Tentu saja bisa, tapi saya kurang tahu caranya hehe...
    :)


    FADLI
    makasih sob, happy blogging juga
    :D


    nisa sanjaya
    Kata tante Wikipedia, "jQuery adalah pustaka JavaScript kecil bersumber terbuka yang menekankan pada interaksi antara JavaScript dan HTML"
    :@

    BalasHapus
  10. toromorphosis
    Wow, hebat bener sob, saya belum lama tahu mengenai Visual LightBox. Untuk Visual LightBox yang saya bahas ini, CSS dan Javascriptnya sudah saya kompres (minified), jadi tidak terlalu berat lagi untuk menghasilkan efek LightBox yang demikian memesona
    :o


    Bisnis Online Lilis
    Sip, sama-sama
    :)


    Chenk Rahman
    Makasih sob
    :D

    BalasHapus
  11. mohon detailnya untuk saya pasayang di blog, sudah saya coba tapi gk mau mas,,,ini web blog saya
    http://nusapenidalandforsale.blogspot.com

    coba di buka dulu mas.....

    Mohon qrim caranya ya mass ke Email Saya wayanwinasta@yahoo.com


    aku tunggu mas mkasi banyak sebekumnya....


    di tunggu

    BalasHapus
  12. yanvist
    Silakan cek email sob
    :)

    BalasHapus
  13. sangat bermanfaat ...
    ne saya ada pertanyaan .. gimana kalau gambar tersebut kita ganti dengan iframe semisal fan facebook, follow ato shoutbox ... !!? terimakasih sebelumnnya by http://pendakimimpi.blogspot.com/

    BalasHapus
  14. Sebenarnya bisa sob, tapi harus modif sendiri kodenya, karena visual lightbox memang khusus dirancang untuk menampilkan gambar. Kalau ingin menampilkan iframe, silakan merujuk pada tulisan tentang Fancybox, Shadowbox, atau prettyPhoto yang ada di blog ini..

    BalasHapus
  15. mmmm kalau tentang Fancybox, Shadowbox, atau prettyPhoto ntu saya berhasil menerapkannya .. tapi tampilannya ntu agak kurang menarik .. saya lebih suka tampilan lightbox yg kedua ini ..

    hah saya dah coba utak atik kodenya, malahan kode lightbox nd prettyPhoto saya gabungkan jadi satu .. tapi ya itu berantakan jadinya .. hhhhehe

    mm gini kalau tampilan prettyPhoto ntu di ubah tampilannya bisa pa gk ya ...!! saya pusing utak atiknya ...

    BalasHapus

Formulir Kontak

Nama

Email *

Pesan *

[ Instagram M2D ]

[ Favorit ]

Malam Marah Malam Ramah

Apalah yang istimewa dengan malam? malam tak lebih dari kegelapan yang menyelimuti sesuatu yang tak pantas menikmati kelembutan cahaya, kera...

[ Referral ]

Ardhiansyam | Kontak | Sitemap | ke atas ↑