Jumat, 20 Januari 2012

Tips-Trik Membuat Image & Thumbnail berikut kode Lightbox di Blogger

Sebelum melangkah lebih jauh perlu saya tekankan bahwa yang dimaksud dengan title posting (post title) di atas adalah:
  1. Image adalah gambar (image) berukuran besar yang akan dibuka melalui lightbox.
  2. Thumbnail:
    Sebuah image berukuran kecil dengan ukuran berkisar maksimal 200px (width). Thumbnail disamping biasa dimanfaatkan untuk melengkapi posting juga digunakan untuk lebih memperjelas (mendeskripsikan) maksud yang terkandung dalam rangkaian teks posting (pepatah mengatakan: acapkali apa yang dilihat dari sebuah gambar jauh lebih mudah dimengerti dari pada seribu rangkaian kata!).
    Cobalah deskripsikan thumbnail di atas! Ditanggung orang tak akan tahu apa yang anda terangkan dengan kata-kata/teks. Itulah salah satu kegunaan thumbnail/images.

Cara Membuat Image Gallery untuk Lightbox

Membuat image galley beserta box yang dipergunakan sebagai wadah pada intinya adalah sebuah cara untuk membuat penataan image agar terlihat rapi hingga sebuah web/blog menjadi lebih menarik dan enak dipandang serta nyaman dinikmati pengunjung. Sebuah kunci yang harus dijadikan patokan ketika ingin membuat image gallery adalah keseragaman gambar. Patokan yang tentunya tak berlaku bagi beberapa blogger yang sudah cukup menguasai kode html. Bagi anda yang masih dalam tahap belajar tak perlu berkecil hati tentang pernyataan di atas, karena "sekalipun seseorang telah cukup ahli dalam penguasaan kode html", penataan image dalam sebuah gallery dengan ukuran bervariasi pada kenyataanya tak terlalu banyak digunakan karena kode html yang dipergunakan menjadi terlalu banyak dan bisa dikatakan blogger yang melakukan ini tak ubahnya "mempersulit diri".

Demo & Kode Html Lightbox Image Viewer for Blogger

Demo Single Image dan Image Gallery

Lightbox Image Viewer bisa difungsikan pada satu buah image (single image) atau beberapa buah image yang terangkai dalam sebuah gallery (image gallery). Untuk single image kode yang dituliskan cukup rel="GRlightbox", sedangkan untuk image gallery bisa ditambahkan nama gallery yang sesuai dengan kategori galelery. Kode dasar yang digunakan adalah rel="GRlightbox[gallery]". Kategory [gallery] bisa anda rubah untuk lebih disesuaikan dengan kebutuhan, seperti misanya [photo-keluarga], [pasar-malam] atau [rumah-adat].

Kamis, 19 Januari 2012

Cara Menggunakan Lightbox Blogger Plugins u Posting

Blogger kini telah melengkapi diri dengan sebuah plugin baru berupa lightbox. Lightbox Blogger Plugins ini telah diset dalam kondisi "ready to use" sehingga setting ulang tak perlu lagi dilakukan jika anda ingin menggunakannya. Saat anda membuat sebuah blog di blogger maka secara otomatis lighbox langsung bisa digunakan sebagai sebuah image viewer yang berfungsi untuk menampilkan sebuah image berukuran besar melalui image link (berupa thumbnail=image berukuran kecil). Semua proses untuk mem-fungsikan lightbox dapat dilakukan secara langsung di boks posting, baik melalui mode "Edit HTML ataupun "Compose". Image Viewer Lightbox Blogger Plugins sendiri sama sekali tidak memanfaatkan efek-efek tertentu yang biasanya digunakan oleh banyak media preview lainnya. Jika boleh dikatakan, Lightbox Blogger Plugins ditampilkan sesederhana mungkin hingga akhirnya justru terlihat amat sangat sederhana atau bahkan bisa dikatakan kurang menarik. Hal yang sebenarnya amat sangat disayangkan karena sebuah widget yang sebenarnya bisa dibuat semenarik akhirnya justru terlihat tampil ala kadarnya. Sekalipun demikian, toh setiap blogger sebenarnya punya selera yang tak sama. Bagi yang suka tampilan minimalis barangkali lightbox ini justru akan sangat cocok untuk digunakan.

Mengenal Lightbox Media Viewer

Lightbox dalam dunia blog lebih dikenal sebagai sebuah image viewer yang berguna untuk mempreviewkan sebuah image dengan ukuran besar melalui fungsi klik dari image lain yang berukuran jauh lebih kecil (thumbnail/miniatur) atau bisa juga preview image berukuran besar tersebut dihasilkan dari sebuah teks link. Dalam arti yang lebih luas, lightbox adalah sebuah media viewer yang pada saat bekerja memanfaatkan efek cahaya latar guna memperindah fungsi. Lightbox yang ada pada saat ini dikenal dengan beberapa nama dengan fungsi tak lagi hanya sebagai sebuah image viewer namun banyak berkembang sebagai sebuah media vierwer. Kebanyakan dari media viewer tersebut terinspirasi oleh lightbox yang pada awalnya dikembangkan oleh Leandro Vieira Pinho (Brazil-jQuery plugins) dan Lokesh Dhakar yang menggunakan scripttaculous.js dan prototype.js.

Beberapa media seperti image file, video file, html file (iframe) kini tak lagi harus ditampilkan secara langsung di halaman blog, namun cukup dengan memanfaatkan sebuah link berupa teks atau image. Metode seperti ini memberi keuntungan besar bagi blogger karena image, video atau iframe dalam jumlah sedikit atau banyak tak harus melalui loading secara bersamaan dengan bagian blog yang lain. Loading file yang berupa gambar (image), video atau iframe hanya akan terjadi ketika sebuah link (berupa teks atau thumbnail) di klik (umumnya memanfaatkan fungsi klik). Blog atau web yang menggunakan lightbox tak perlu lagi menampilkan gambar (image), video atau iframe berukuran besar yang justru menjadi beban tersendiri bagi blog. Beberapa buah image dalam ukuran kecil (thumbnail) atau teks link bisa menjadi sarana bagi "dimunculkanya" file-file berukuran besar seperti dimaksud di atas.

berbagai macam lightbox kini tersedia dalam bentuk gratisan. Anda bisa menggunakannya secara bebas sekaligus bisa memilih media viewer yang diinginkan. Ada yang hanya berfungsi sebagai image viewer, namun banyak pula yang berupa media viewer.