Image credit by Kengo @ Flickr.
Menggunakan animated AJAX di Blogger bukanlah hal yang mustahil. Salah satunya adalah animasi expand image yang akan menampilkan gambar dalam ukuran yang sebenarnya jika thumbnailnya diklik. Sebagai contoh klik saja gambar tersebut (semoga berhasil..). Nah, tutorial The Fachia kali ini akan menjelaskan penggunaan script LightBox 2.04 yang berbasis AJAX untuk penggunaan di Blogger based blog. Jangan lupa langsung klik saja gambarnya biar jelas.
Lightbox is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers.
Dengan menggunakan LightBox kita tidak perlu lagi memasang foto/gambar dalam ukuran dimensi sebenarnya yang besar, cukup kita sertakan thumbnailnya saja, dan jika diklik akan menampilkan gambar sebenarnya pada halaman yang sama. Oke, langsungan saja cara penggunaannya, jangan lupa backup template dulu. Selamat mengikuti tutorial AJAX for Blogger modified by The Fachia.
1. Login ke Blogger, menuju Layout > Edit HTML.
2. Lalu masukkan kode di bawah ini di antara tag <head></head>. Atau jika bingung cukup cari tag </head> dan letakkan kodenya pas sebelum tag </head> tersebut. Kemudian simpan dengan mengklik tombol Save.
<link rel='stylesheet' href='http://fariezna.googlepages.com/lightbox.css' type='text/css' media='screen' />
<script type='text/javascript' src='http://fariezna.googlepages.com/prototype.js'></script>
<script type='text/javascript' src='http://fariezna.googlepages.com/scriptaculous.js?load=effects,builder'></script>
<script type='text/javascript' src='http://fariezna.googlepages.com/lightbox.js'></script>
3. Implementasinya. Tulis posting seperti biasa, kemudian saat akan memasukkan gambar/foto masukkan foto seperti biasa dengan menggunakan tag <img src"">. Namun tambahkan kode di bawah ini tepat di antara tag <img> tadi.
<a href="http://lokasigambar.com/anda-yang-ukuran-BESAR.jpg" rel="lightbox" title="Deskripsi"></a>
nanti jadinya akan seperti ini.
<a href="http://lokasigambar.com/anda-yang-ukuran-BESAR.jpg" rel="lightbox" title="Deskripsi"><img src="http://lokasigambar.com/anda-yang-ukuran-KECIL.jpg" border="0" alt="Photobucket"></a>
atau lihat gambar ini sebagai contoh:
4. Ganti Deskripsi dengan deskripsi singkat/penjelasan tentang foto tersebut (optional).
Penjelasan singkat:
Pada tag <a href=""></a> masukkan link url ke file gambar yang ukuran besar. Sedangkan pada tag <img src=""> masukkan link url ke file gambar ukuran kecil.
Oke cukup mudah bukan? Nah, silahkan coba dan kasih tahu saya hasilnya. Siip. Selamat menikmati LightBox AJAX for Blogger By The Fachia : Percantik Image posting di Blogger pakai animasi Ajax.
Read More...
Post
