Kamis, 20 Oktober 2011

Membuat Lightbox Dengan Jquery

type="html">

Ada sejuta trik blogger untuk mengedit blog khususnya dalam editing tampilan gambar di blogger. Salah satunya dengan membuat lightbox dengan jquery. Trik membuat lightbox itu sendiri sebenarnya sudah lama sekali dibuat oleh master-master blog. Namun akhir-akhir ini banyak website ternama bahkan jejaring sosial Facebook dan Google+ masih menggunakan trik ini.

Sebenarnya apasih lightbox di Blogger itu? Lightbox di blogger bukan diartikan sebagai kotak lampu atau lampion di blogger melainkan menampilkan gambar yang masih dalam halaman posting. Maksudnya menampilkan gambar blogger di halaman posting dengan lebih mengutamakan gambar itu sendiri. Bukan halaman gambar atau alamat gambar. Maka dari itu di luar tampilan gambar agak samar, terarsir, atau bahkan hitam.

Sebagai contoh klik gambar di atas atau yang lebih menarik (lihat Cewek Imut) dan akan terlihat hasilnya seperti saat kita melihat foto di facebook atau google+. Daripada berpanjang lebar malah gak jelas, Mari kita buat lightbox dengan jquery.

1. Login di blogger.

2. Dalam posisi dasboard blog sahabat semua klik Design

3. Klik lagi Edit HTML

4. Centang

5. Jangan lupa backup dulu ya sobat

6. Cari kode di bawah ini :

7. Paste di atasnya kode berikut :

8. Tambahkan di atas kode berikut :
9. Sekarang klik

10. Untuk Uji coba sekarang Posting seperti biasa.

11. Tulis sesuka sobat. Dan Upload Gambar sobat.

12. Setelah Upload gambar. Klik Edit HTML di sebelah kiri Compose. (Dalam keadaan Edit HTML saat posting)

13. Dalam posisi Edit HTML. Gambar akan berubah menjadi kode seperti ini
14. Edit kode gambar sahabat dengan menambahkan  class="spicebox" dan title="Judul Gambar" Sehingga ilustrasi kodenya menjadi :

15. Untuk hasil akhirnya kode gambar no. 13  kurang lebih akan menjadi seperti berikut :

16. Klik atau untuk melihatnya. Dan jadilah lightbox dengan jquery.

Jika sahabat tidak menggunakan cara 1 sampai 16. Dengan cara berikut ini sahabat bisa juga membuat lightboxt di blogger dengan jquery dengan script berikut ini.

Copy kode di atas dan pastekan di atas dan simpan. Sahabat tidak perlu susah payah menambah kode setiap postingan. Cukup posting seperti biasa. Namun jika menggunakan cara tersebut, secara tidak langsung menelanjangi kemampuan atau ilmu sahabat dan mematikan kreatifitas sahabat. Sekarang terserah sahabat semua mau bersusah payah sedikit atau yang praktis tanpa tahu bagaimana membuat lightbox di blogger dengan jquery. 

Bagi sahabat yang menggunakan tampilan dasboard baru, berbeda dengan cara di atas. Sahabat bisa membuat lightbox di blogspot dengan alamat di bawah ini :

http://www.bloggerplugins.org/2011/09/official-blogger-light-box.html
http://bloggerfreelayouts.blogspot.com/2011/08/jquery-blogger-image-gallery-blogspot.html

Happy Blogging! by. Sejuta Trik Blogger

Membuat Lightbox Dengan Jquery Rating: 4.5 Diposkan Oleh: dragon
Terima kasih sudah berkomentar