Membuat Kode Posting Lightbox Lebih Simple

Posting dengan kode yang berderet terlalu panjang dan rumit pasti membuat siapapun kesulitan untuk melakukan cek ulang, baik saat terjadi kesalahan penulisan ataupun saat harus dilakukan update ulang posting. Posting image, terlebih dalam bentuk gallery adalah salah satunya. Saat banyak image diperlukan untuk melengkapi posting kita akan melihat deretan kode html (di posting mode Edit HTML) yang begitu bejibun bikin kepala pening. Persoalan seperti ini memang perlu penanganan khusus hingga kode html di halaman posting bisa banyak terkurangi. Kode CSS adalah solusi paling tepat yang bisa kita andalkan. Dengan bantuan kode CSS maka bisa jadi kode html di box posting akan terkurangi hingga 50% lebih saat banyak image kita libatkan. Meskipun pada intinya tutorial tentang efisiensi penggunaan kode diposting image ini diperuntukkan pada penggunaan lightbox image viewer di blogger, namun demikian karena kode yang kita buat ini juga berlaku secara umum pada keseluruhan fungsi posting image, maka bisa saja dengan mudah digunakan untuk berbagai posting lain yang tidak bersentuhan dengan lightbox.

Adding CSS3 in Lightbox Slideshow: Membuat Lighbox Slideshow lebih Atraktif

Meninggalkan kode CSS3 saat membuat widget atau kelengkapan blog yang lain rasanya seperti memasak sayur tanpa garam. Kurang lengkap hingga sedikit hambar rasanya! Begitu pula dengan lightbox slideshow yang telah terpostingkan beberapa waktu berselang. Tanpa penambahan kode css3, lightbox slideshow ini memang sudah cukup menarik, namun jika kita berikan sentuhan box shadow, text shadow, border radius, dan sedikit animasi melalui css3 transition dan css3 transform tentunya akan jadi terlihat lebih fantastis. Kejelian menambahkan kode css3 dan memilih bagian yang harus di modifikasi menjadi bahian yang sebenarnya sangat bergantung kepada selera. Oleh karena itu pengembangan lighbox slideshow melalui css3 ini semoga bisa menjadi sumber referensi yang bermanfaat.

Tips & Trik Membuat & Menggunakan Lightbox di blogger

Membicarakan tentang lightbox yang berfungsi sebagai image viewer di blogger tentu tak akan lepas dari lightbox blogger plugins yang sudah terinstall di template. Perlu diketahui bahwa lightbox blogger plugins ini memang telah menjadi satu bagian terintegrasi dalam blog dan akan aktif bersamaan dengan saat kita mulai menggunakan template blogger dan memulai blogging.

Menilik penerapan plugins dengan metode seperti yang dikembangkan blogger (lightbox) sesungguhnya dalam beberapa hal dapat menimbulkan masalah baru apabila pengguna tidak menyadarinya. Pengintegrasian secara langsung menimbulkan masalah baru ketika seorang blogger mencoba menggunakan widget lightbox yang bersumber dari luar blogger dimana sumber kinerja preview image pada lightbox baru tersebut menggunakan kode rel="lightbox". Kode html ini ternyata identik dengan kode yang digunakan pada lightbox blogger plugins sehingga ketika fungsi lightbox dijalankan maka lightbox baru akan bekerja berbarengan dengan lightbox blogger plugins. Agar masalah seperti ini bisa dihindarkan, ada 2 ( dua) cara yang dapat digunakan.

Lightbox » Blogger Plugins : Cara Mengaktifkan dan Menggunakan

Ada lightbox yang tak perlu repot-repot kita buat. Lightbox ini merupakan blogger plugins. Sampeyan hanya perlu mengaktifkan lightbox-nya, kemudian gunakan untuk posting. Lighbox Blogger plugins dilengkapi dengan button Close, mini gallery yang berfungsi sebagai image selector sekaligus juga dillengkapi dengan javascript mousewheel yang memungkinkan pengguna untuk menggeser gallery lightbox dengan memanfaatkan scroller (mouse).

Cara mengaktifkan lightbox blogger plugins

Lightbox Slideshow dengan prototype.js dan scriptaculous.js

Sekalipun lightbox ini sama seperti yang telah terpostingkan sebelumnya, namun satu nilai lebih dari lightbox slideshow ini adalah telah dengan ditambahkannya sebuah fungsi slideshow di dalamnya. Ketika sebuah gallery diaktifkan dengan membuka (klik) salah satu thumbnail maka secara otomatis slideshow akan bekerja. Untuk menghentikan slideshow cukup dengan meng-klik button text yang bertuliskan stop slideshow. Untuk menggunakan lightbox slideshow sampeyan harus upload javascript dan css lightbox-slideshow ke file hosting. Agar lebih praktis dan mudah lakukan saja di Google Sites. Tentang bagaimana cara melakukannya, silahkan bula link di bawah ini:

Panduan cara menyimpan file di Google Sites

Lightbox for Blogger : Beautifull Blogger Image Viewer

Nggak perlu panjang lebar, semua pasti 'dah pada tahu apa tuh lightbox. Image Viewer yang akan kita buat kali ini nggak pakai jQuery namun menggunakan prototype.js dan scriptaculous.js. Semua javascript dan kode CSS-nya dah lengakap n tinggal pasang di bawah tag pembuka header (<head>). Hanya, ... ini sekedar saran tapi cukup penting : setelah di coba dan berhasil, javascript lightbox dan css lightbox-nya sebaiknya sampeyan upload secara pribadi di file hosting agar bisa digunakan secara pribadi pula. mengapa hal seperti ini penting dilakukan? Ya... tentu saja berkaitan dengan bandwidth. Jika sampeyan upload sendiri pastinya yang akan pakai juga hanya sampeyan sendiri juga, so ... dengan begitu loading bisa cepat dan blog sampeyan tetap car .... lancar ...nggak pakai lelet! He .... he ... You, know?!
Oooiiii.... yah... barangkali ada nyang blom tahu apa itu lightbox, silahkan sampeyan buka demonya di bawah ini. Jika demo mungkin lelet ya mohon dimaafkan karena hanya mampu pakai hosting gratisan, bat... sobat!!

D E M O: BloggerD E M O

Cara Membuat Lightbox

Cara Membuat JQuery LightBox

Meskipun ada berbagai macam cara membuat lightbox dengan berbagai javascript seperti halnya menggunakan mootool dan prototype.js, namun kita akan utamakan terlebih dahulu cara pembuatan lightbox image viewer menggunakan jquery-1.3.2.js atau jquery.1.3.2.min.js. Tujuannya tak lain adalah sebagai upaya untuk memaksimalkan fungsi jquery-1.3.2.js. Gambaran sederhana tentang light box adalah, saat kita KLIK sebuah image atau thumbnail di halaman blog, maka akan terlihat preview image dalam ukuran yang jauh lebih besar yang ditampilkan seperti layaknya pada sebuah window baru di halaman blog dengan disertai efek layar gelap (transparency effects). Beberapa controll disertakan di dalamnya seperti next, previous dan close. Beberapa lighbox yang lain bahkan menggunakan contoll baru yang berfungsi untuk mengontol fungsi slideshow yang sekaligus disertakan.

Supaya mudah untuk di aplikasikan oleh semua blogger, jquery LightBox ini akan kita buat dalam bentuk "paket langsung tempel" dengan penggunaan kode HTML posting teramat sederhana sehingga siapaun dengan mudah mampu menggunakan dan menciptakan sebuah blog yang luar biasa atraktif. Semua kode telah terupload di file hosting dan dalam bentuk link siap pakai. Silahkan pasang dan simpan di template di bawah kode <head> atau di atas kode </head> kemudian segera coba di ruang posting, terbitkan, buka blog dan nikmati cantiknya tampilan Jquery LightBox.

Cara membuat JQuery LightBox