
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 «