.jpg)
Meskipun ada berbagai macam cara membuat lightbox dengan berbagai javascript seperti halnya menggunakan mootool dan prototype.js, namun kita akan utamakan terlebih dahulu cara pembuatan lightbox image viewer menggunakan jquery-1.3.2.js atau jquery.1.3.2.min.js. Tujuannya tak lain adalah sebagai upaya untuk memaksimalkan fungsi jquery-1.3.2.js. Gambaran sederhana tentang light box adalah, saat kita KLIK sebuah image atau thumbnail di halaman blog, maka akan terlihat preview image dalam ukuran yang jauh lebih besar yang ditampilkan seperti layaknya pada sebuah window baru di halaman blog dengan disertai efek layar gelap (transparency effects). Beberapa controll disertakan di dalamnya seperti next, previous dan close. Beberapa lighbox yang lain bahkan menggunakan contoll baru yang berfungsi untuk mengontol fungsi slideshow yang sekaligus disertakan.Supaya mudah untuk di aplikasikan oleh semua blogger, jquery LightBox ini akan kita buat dalam bentuk "paket langsung tempel" dengan penggunaan kode HTML posting teramat sederhana sehingga siapaun dengan mudah mampu menggunakan dan menciptakan sebuah blog yang luar biasa atraktif. Semua kode telah terupload di file hosting dan dalam bentuk link siap pakai. Silahkan pasang dan simpan di template di bawah kode <head> atau di atas kode </head> kemudian segera coba di ruang posting, terbitkan, buka blog dan nikmati cantiknya tampilan Jquery LightBox.
Cara membuat JQuery LightBox
- Login ke Blogger.
- Halaman Dasbor (Dasboard).
- Klik Rancangan (Design).
- Klik Edit HTML.
- Cari kode <head>. Gunakan Ctrl + F untuk mempermudah pencarian.
- Copy dan paste-kan seluruh kode css dan javascript di bawah kode <head> atau di atas kode </head>.
- Klik Simpan Template (Save Template).
- Segera coba dengan melakukan posting untuk melihat hasilnya.
Link kode CSS dan Javascript jQuery Lightbox Image Preview.
Sekalipun semua kode dalam bentuk siap paka miliki, untuk pemakian permanen di blog anda sebaiknya seluruh kode css dan javascript (kecuali jQuery) sebaiknya anda upload difile hosting yang bisa digunakan secara pribadi. Cara seperti ini perlu dilakukan agar bandwidth tetap terkendali hingga fungsi lightbox dan loadingnya selalu dalam kondisi maksimal. Kode CSS dan Javascript Lightbox:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <script src="https://sites.google.com/site/gubhugreyotprojects/juli-2010/javascript/GR_jQlightbox01.js" type="text/javascript"></script> <link href="https://sites.google.com/site/gubhugreyotprojects/juli-2010/css/GR_jQlightbox01.css" rel="stylesheet" type="text/css"/>
Kode Posting jQuery Lightbox
Kode Dasar jQuery Lightbox
<a href="big-image-1.jpg" class="GRjQlightbox" title="Caption here"><img src="thumbnail-1.jpg" style="width:..px;height:..px;padding:..px;border:..px;background:#..;" /></a> <a href="big-image-2.jpg" class="GRjQlightbox" title="Caption here"><img src="thumbnail-2.jpg" style="width:..px;height:..px;padding:..px;border:..px;background:#..;" /></a> <a href="big-image-3.jpg" class="GRjQlightbox" title="Caption here"><img src="thumbnail-3.jpg" style="width:..px;height:..px;padding:..px;border:..px;background:#..;" /></a> <a href="big-image-4.jpg" class="GRjQlightbox" title="Caption here"><img src="thumbnail-4.jpg" style="width:..px;height:..px;padding:..px;border:..px;background:#..;" /></a>
Contoh Kode Posting jQuery Lightbox
Contoh Kode Dasar jQuery Lightbox
<a class="GRjQlightbox" href="https://sites.google.com/site/gubhugreyotprojects/juli-2010/images/img_gubhugreyot-ngligo.jpg" title="Calon isteri pertama."><img src="https://sites.google.com/site/gubhugreyotprojects/juli-2010/images/th_gubhugreyot-ngligo.jpg" width="200" height="150" style="border:2px solid #555;padding:8px;margin:10px 0 0 10px;"/></a><a class="GRjQlightbox" href="https://sites.google.com/site/gubhugreyotprojects/juli-2010/images/img_gubhugreyot-baju-kuning.jpg" title="Calon isteri kedua."><img src="https://sites.google.com/site/gubhugreyotprojects/juli-2010/images/th_gubhugreyot-baju-kuning.jpg" width="200" height="150" style="border:2px solid #555;padding:8px;margin:10px 0 0 10px;"/></a><a class="GRjQlightbox" href="https://sites.google.com/site/gubhugreyotprojects/juli-2010/images/img_gubhugreyot-baju-putih.jpg" title="Calon isteri ketiga."><img src="https://sites.google.com/site/gubhugreyotprojects/juli-2010/images/th_gubhugreyot-baju-putih.jpg" width="200" height="150" style="border:2px solid #555;padding:8px;margin:10px 0 0 10px;"/></a><a class="GRjQlightbox" href="https://sites.google.com/site/gubhugreyotprojects/juli-2010/images/img_gubhugreyot-kaos-kuning.jpg" title="Calon isteri keempat."><img src="https://sites.google.com/site/gubhugreyotprojects/juli-2010/images/th_gubhugreyot-kaos-kuning.jpg" width="200" height="150" style="border:2px solid #555;padding:8px;margin:10px 0 0 10px;"/></a>
Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :
Update » Senin PAHING, January, 30, 2012
» Happy Blogging - gubhugreyot «
wah ko ga bisa ya... mksh infox
BalasHapusالسلام عليكم
BalasHapusbingung saya, harus manggil apa ? karna nama blognya gubhugreyot.
tapi karna pengalamannya akan tekhnik blogging yang dah luas, jadi saya panggil kakang aja.
mungkin sedikit lancang, karna dah ngambil script/trik blogger dari blognya kakang nih tanpa posting koment satu pun :(
terima kasih udah bisa berbagi.
tapi, sya masih bingung ??? karena sering terjadi kesalahan kalo dah beres setting di blognya.
gimana ya, supaya terhindar dari hal yg seperti demikian ?
والسلام
postingan keren,kemaren kemaren ane make trik nempelin modul Cms joomla di blogspot untuk yang ini jarang banget yang make ini...semua artikel disini kayaknya udah komplit banget,tinggal 1 lagi yg gak ada,forum,stelah blogspot punya forum, sempurna dah blogspot meski harus sedikit maksa...gan di share dong cara ngerubah blogspot template menjadi forum,meski gak sempurna mirip jg gpp..ada ketemu blog luar tapi nerjemahinnya susah..trims
BalasHapusTutorialnya keren2 gan.. :D
BalasHapusmonggo mampir http://erhyck.blogspot.com
kunjungan hangat.. kunjung balik ya. jangan lupa follow nya.. :D
BalasHapus