LightBox AJAX for Blogger By The Fachia
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.
Note: English version of this post can be read here.
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.
18 comments:
akhirnya dapt pertamax juga he..he..!! Wah keren nih bro..pasti nanti tak coba deh, Tutorial yang cukup berbobot! terima kasih bro
Yo'i apa saya bilang mas.., nih ditunggu posting di blognya masnya,..pertamaxx saya siap meluncur..
keduaxx deh :D
cobain ah, thx infonya mantap :D
weeedeewww,..
gud idea juga neh nge offload ke googlepages.com.
keren keren,...
ada juga javascript yg bisa bekerja serupa dg ajax ini mas. hasilnya ketika di arahkan mouse/ketika diklik mouse (tergantung perintah javascriptnya).. maka akan muncul gambar dg ukuran sebenarnya.
oh ya mas.. kalo pake ajax ini gimana pengaruhnya terhadap loading page? apakah tidak terlalu berpengaruh atau otomatis memperlambat loadingnya?
wahhh.. jadi pengen nyoba nihhhh, tapi musti banyak belajar dulu nihhh, maklum masih newbie, heheheee
@ Tipis, silahkan coba..gratis koq
@ Bayu, thanks..
@ Chodirin, yup, JS yang jalan asyncronous..(walah apalagi ini). Kalo pengaruh loading page ya jelas ngaruh lah..soalnya dia manggil script yang hosted di tempat lain.
@ dinirie, sama saya juga newbie koq..
Save as dulu ah. Tutorialnya keren mas fachia.
makasih mas fachia tutorialnya, baru tahu saya.
2 Putra eka, sama-sama mas. Yang penting bermanfaat buat para blogger..amiien.
@ Abi bakar,.. sama-sama..wakkaa..
ini berlaku jg di WP ga sih?
ah, tak pikir tadi Ajax club sepakbola dari amsterdam hehhhehe
@ theloebizz, bisa mas,..tinggal dimodif dikit aja koq.
@ mercuryfalling, iya saya mikirnya jg gitu tadinya mas (alah gaya dikit..)
Hi Fariez the fachia! I am very happy that I have found your blog and implemented the 'Lightbox' into my site/blog. A big 'Thank You' for you and your effort in sharing your knowledge with others. I don't have much experience and this is my so called 1st official blog that I have created. Please have a look and feel free to comment. It's http://bleachunitedwallpapers.blogspot.com/ Thanks and you are great :)
@ Bleachunited Team, thank You for your comment too. You may read this tutorial from its english version.
Hai, terima kasih tutorialnya! :D I've been looking for this and you've compiled it very simple and easy to use. Silahkan cek hasilnya di blog portfolio saya www.halomomo.com Thx again for sharing!
Hadi
Akhirnya dapet juga yg tak cari2!!
Bro, gimana caranya buat ajax yg pop itu bukan gambar, tapi suatu laman. contohnya di situs download ringtone zedge.n*t
ww.zedge.net/wallpaper/5280213/
kalau di klik downloadnya akan muncul tips layar kotak dgn background hitam transparan dgn latar laman sebelumnya...
makasih bro...
Post a Comment