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/AVvXsEjco46K2s-DpEvB0lAQR6Za-EzJlr-ezjhDWAB97XeiBqlLbSfRHqAGupmGpoXJO1vYq6GxlOLwMA-BAAZz3n1AJUkMaN_RWAzlm60q-MQvfKWQUM0n0CJxdbYQKhrSoAknxyUNCXyH8LM/s32/lightbox-ico-loading.gif',
imageBtnPrev:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRHP5f2g1nSf-VjJ0cligQnyMz8nDZHkP63i3i1HlT0T9hufN-7g88HIR_P3ikbib6SvOED2KNpo5e1K5AFGwwd_KTzrjazgYucoEnyHN6OZAZa2embGu0yGtD-HkaIosrKuPI_K59uZU/s63/lightbox-btn-prev.gif',
imageBtnNext:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe6AAR1mDWKD7DQGWDe9trm7RNjcLFu-xIFrlND_FBj5u6zD_BSV17Lzm-j8TrDOX-RoqHVQj5D1XZXpuB81CjhG5Eh0oMm_dtb0oT0b4EgtMiryIY4W_QpE553TgYOyRpXK2a9qeYooY/s63/lightbox-btn-next.gif',
imageBtnClose:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0IAmAAhXHy7W1ltGKx4ibsw_o64QpzTMyeaYFcEapitYZExmvZ1CfO61_EaQXZqizkAXh579oUa-MPJqWKf5uLj5xUVgbg-jOzvd7THKdhqfq6Ktgulm3MIE_KNUrUOo4qz0PPaFpZQY/s66/lightbox-btn-close.gif',
imageBlank:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGUsEMcLv8orFD4hoZZDMJc7RbSEBhxvzLI2r7iLtlGjBJpwcKotbprhPNczD5x7SCSiZ7vOJCuQCQhri9f6s_Unl6_wYSgUb0vY3LlRWWDoqCvXt2Bq2dxYQVkN39gBmbcvBJbsF3XIY/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.
0 Komentar