Membuat Galeri Light Box Untuk Berita Foto Blogger Atau Koleksi Foto Pribadi
PERHATIAN!!! ARTIKEL INI SUDAH TIDAK VALID
Bismillah, mudah-mudahan tutorial ini bermanfaat dan berhasil...
Admin yakin kawan blogger sudah pada tahu apa itu light box gallery, atau jika belum tahu, silakah klik salah satu foto di bawah ini:
Nah, itu lah yang dinamakan dengan light box gallery. Bagaimana cara membuatnya? langsung saja:
Pertama:
Copy kode CSSnya dan paste kan di atas kode ]]></b:skin>. Silahkan download kode CSSnya DISINI.
Kedua:
Pastekan kode di bawah ini di atas kode </head>. Kodenya:
<script src='http://yourjavascript.com/131223611310/lightbox.js' type='text/javascript'/>
<script src='http://yourjavascript.com/441151012521/lightboxscript2.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$('#gallery a').lightBox();
});
</script>
Ganti alamat javascript berwarna biru dengan javascript lightbox.js untuk kode yang biru download DISINI, untuk yang ungu DISINI. Setelah itu, upload javascript-javascript yang telah anda download di tempat penyimpanan javascript, contohnya di yourjavascript.com. Lihat langkah-langkahnya di bawah ini:
1. Upload javascript kawan, klik choose file dan masukan kode JS yang telah kawan download.
Pilih File JS yang telah kawan download:
2. Masuk ke email kawan, dan ambil link yang telah yourjavascript kirim:
Copy alamatnya (dari http//... sampai .js) dan ganti kode yang berwarna biru tadi (http://yourjavascript.com/131223611310/lightbox.js) dengan alamat yang ini.
Lakukan hal yang sama untuk mengganti kode yang berwarna ungu.
Ketiga:
Copy dan pastekan kode di bawah ini di bawah kode <body>, kodenya:
Keempat:
Silahkan buat postingan baru dengan judul misalkan "Wisata Ke Kebun Binatang", kemudian isikan kode di bawah ini pada HTML, bukan compose:
<div id="gallery">
<ul>
<li> <a class="lightbox" href="alamat foto kawan" title="Deskripsi foto kawan."> <img alt="" height="72" src="Foto kecil atau thumbnail" width="72" /> </a> </li>
<li> <a class="lightbox" href="alamat foto kawan" title="Deskripsi foto kawan."> <img alt="" height="72" src="Foto kecil atau thumbnail" width="72" /> </a> </li>
</ul>
</div>
Jika ingin menambahkan foto, copy dari <li> ke </li>, dan pastekan di atas kode </ul>. Contohnya:
<li> <a class="lightbox" href="alamat foto kawan" title="Deskripsi foto kawan."> <img alt="" height="72" src="Foto kecil atau thumbnail" width="72" /> </a> </li>
Height (panjang), dan Width (lebar) untuk foto kecil bisa disesuaikan dengan keinginan kawan, rubah saja nilainya dari 72 menjadi 100 misalkan. Publish dan lihat hasilnya, mudah-mudahan berhasil.
Bismillah, mudah-mudahan tutorial ini bermanfaat dan berhasil...
Admin yakin kawan blogger sudah pada tahu apa itu light box gallery, atau jika belum tahu, silakah klik salah satu foto di bawah ini:
Nah, itu lah yang dinamakan dengan light box gallery. Bagaimana cara membuatnya? langsung saja:
Pertama:
Copy kode CSSnya dan paste kan di atas kode ]]></b:skin>. Silahkan download kode CSSnya DISINI.
Kedua:
Pastekan kode di bawah ini di atas kode </head>. Kodenya:
<script src='http://yourjavascript.com/131223611310/lightbox.js' type='text/javascript'/>
<script src='http://yourjavascript.com/441151012521/lightboxscript2.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$('#gallery a').lightBox();
});
</script>
Ganti alamat javascript berwarna biru dengan javascript lightbox.js untuk kode yang biru download DISINI, untuk yang ungu DISINI. Setelah itu, upload javascript-javascript yang telah anda download di tempat penyimpanan javascript, contohnya di yourjavascript.com. Lihat langkah-langkahnya di bawah ini:
1. Upload javascript kawan, klik choose file dan masukan kode JS yang telah kawan download.
Pilih File JS yang telah kawan download:
2. Masuk ke email kawan, dan ambil link yang telah yourjavascript kirim:
Copy alamatnya (dari http//... sampai .js) dan ganti kode yang berwarna biru tadi (http://yourjavascript.com/131223611310/lightbox.js) dengan alamat yang ini.
Lakukan hal yang sama untuk mengganti kode yang berwarna ungu.
Ketiga:
Copy dan pastekan kode di bawah ini di bawah kode <body>, kodenya:
<script type='text/javascript'>
$(document).ready(function(){
//menambahkan lightbox pada setiap element a yang memiliki class 'lightbox'
$('a.lightbox').lightBox({
imageLoading:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcoAyc-3EZwcXUpMLJJXq6yGrFvvnFX4OmaDSzro4PTwWecIcTkb3ShTh31aXuCgzqlZoFDGakwvzesNl01KdJsm3xeOycKjgJOJko75dYbcR8UihkiFLFoiQNvEI9ceqSo_Fp7tqlhlc/s32/lightbox-ico-loading.gif',
imageBtnPrev:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcC-MMhmo8Xu-BENr84pAqRTf10lfipCe9J5bir6eldsveaskQ0IIpaJTef9YSXy6PHrCc4lc8-2tOuAxsqxsyH6tCpj63pXOMxXyGrtTaZ4gw5OOaR4nUdUnbAacHdwbslNIWG3rjGC4/s63/lightbox-btn-prev.gif',
imageBtnNext:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjPx05wA2deRrpKZyGcaEppu17YZj6EwFBCTYxoawaQDDLRSmBKbSjvC-L7zvPw0Yi_jReSy4L94TMc8yi1maRNTDcqLdO26NUQ5ArjBFuoocqFlxU6JgHAL6JKiZeO_06TPN_k3-qJEY/s63/lightbox-btn-next.gif',
imageBtnClose:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7AureIXZTzro9U9vWXWS1GWJ2G50UU2DsAKk3Y_E97VkUJg5f6SJhvqVSn5rDyKiB12TBI9cN9ECx-RqRDfTMvtHqkUaPwEw_CpHcjcItB4SinODnGlGMyFVFcG3Y3SoR155XzPfv_0A/s66/lightbox-btn-close.gif',
imageBlank:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDJMO6uEz1s8cY_2O47WE9CcmBEsL-8hUouayjiAhmJTNok2BbHrV7gRTOW4D8EIENer5XE5HjzSPUplbmahEKt6ZOz9fV0A5nNZv6bBbX5ihfCHZfp0e_2AtLzz8Kha3rIQvEKjRdHyw/s128/lightbox-blank.gif',
txtImage:'Image'
});
});
</script>
Silahkan buat postingan baru dengan judul misalkan "Wisata Ke Kebun Binatang", kemudian isikan kode di bawah ini pada HTML, bukan compose:
Kodenya:
<ul>
<li> <a class="lightbox" href="alamat foto kawan" title="Deskripsi foto kawan."> <img alt="" height="72" src="Foto kecil atau thumbnail" width="72" /> </a> </li>
<li> <a class="lightbox" href="alamat foto kawan" title="Deskripsi foto kawan."> <img alt="" height="72" src="Foto kecil atau thumbnail" width="72" /> </a> </li>
</ul>
</div>
Jika ingin menambahkan foto, copy dari <li> ke </li>, dan pastekan di atas kode </ul>. Contohnya:
<li> <a class="lightbox" href="alamat foto kawan" title="Deskripsi foto kawan."> <img alt="" height="72" src="Foto kecil atau thumbnail" width="72" /> </a> </li>
Height (panjang), dan Width (lebar) untuk foto kecil bisa disesuaikan dengan keinginan kawan, rubah saja nilainya dari 72 menjadi 100 misalkan. Publish dan lihat hasilnya, mudah-mudahan berhasil.
1 Comments 
oh ini toh yg nmanya light box
ReplyDeleteThanks ya mas :)
Salam kenal