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.

Contoh bentuk dasar kode posting lightbox

Di bawah ini ada 2 (dua) macam contoh kode yang digunakan untuk posting menggunakan lightbox. Kode pertama adalah kode html yang dibuat tanpa bantuan penambahan kode css penyederhana posting image, sedang contoh yang kedua telah menggunakan fungsi baru hasil penambahan kode css.

Kode posting lightbox yg tanpa bantuan css:

<a href="big-image.jpg" rel="lightbox[gallery-1]" title="bla...bla...bla..."><img height="..px" src="thumbnail.jpg" width="..px" style="float:left;margin:5px 15px 5px 0;padding:10px;border-radius:6px;box-shadow:0 0 8px #000;border:1px solid #aaa;" /></a>

Kode posting lightbox yg lebih simple (dg css):

<a href="big-image.jpg" rel="lightbox[gallery-1]" title="bla...bla...bla..."><img class="imgfl" src="thumbnail.jpg" /></a>

Dari contoh di atas bisa dilihat betapa dengan bantuan kode css jumlah kode html yang digunakan menjadi sangat jauh terkurangi. Itu hanya untuk sebuah image. Silahkan perkirakan berapa persen kira-kira efisiensi kode yang tercipta jika kita postingkan 10 buah image. Yah ... pasti jauh lebih besar dari yang terbayangkan.

Untuk mendapatkan tutorial cara mengefektifkan dan meminimalisasi penggunaan kode html untuk posting image, silahkan klik link di bawah ini:

Tips dan trik membuat kode posting image lebih simpel

Setelah memahami bagaimana cara membuat bentuk kode posting image yang paling ringkas dengan hasil yang super melalui panduan yang dibuka melalui link di atas, kini kita tinggal menambahkan kode untuk lightbox. Jika pakai lightbox yang umumnya digunakan blogger kita hanya perlu tambahkan kode rel="lightbox[gallery-1]" pada tag "a", sehingga bentuk kodenya menjadi seperti berikut:

Contoh kode pada lightbox (umum)

<a href="big-image.jpg" rel="lightbox[gallery-1]" title="bla...bla...bla..."><img class="imgfl" src="thumbnail.jpg" /></a>

Jika menggunakan lightbox berdasar kode dan panduan di gubhugreyot, kode htmlnya sbb:

Lightbox Image Viewer for Blogger

Contoh kode pada lightbox image viewer:

<a href="big-image.jpg" rel="GRlightbox[gallery-1]" title="bla...bla...bla..."><img class="imgfl" src="thumbnail.jpg" /></a>

Lightbox slideshow

Contoh kode pada lightbox slideshow

<a href="big-image.jpg" rel="grsslightbox[gallery-1]" title="bla...bla...bla..."><img class="imgfl" src="thumbnail.jpg" /></a>

Penggunaan kode posting image dengan menggunakan lightbox berdasarkan penempatan (poisisi) image.

Image di posisi sebelah kiri (left)

Image di sbl kiri (left):

<a href="big-image.jpg" rel="grsslightbox[gallery-1]" title="bla...bla...bla..."><img class="imgfl" src="thumbnail.jpg" /></a>

Image di posisi sebelah kanan (right)

Image di sbl kanan (right):

<a href="big-image.jpg" rel="grsslightbox[gallery-1]" title="bla...bla...bla..."><img class="imgfr" src="thumbnail.jpg" /></a>

Image di tengah (centre)

Image di tengah (centre):

<a href="big-image.jpg" rel="grsslightbox[gallery-1]" title="bla...bla...bla..."><img class="imgfc" src="thumbnail.jpg" /></a>

Image di posisi Tak Satupun (none)

Image poisis Tak satupun (right):

<a href="big-image.jpg" rel="grsslightbox[gallery-1]" title="bla...bla...bla..."><img class="imgfn" src="thumbnail.jpg" /></a>

Image di posisi Tak Satupun (none)

Gallery:

<div style="float:left;padding:0 0 10px 10px;margin:20px 0;border:2px solid #555;"><a href="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/img_gubhugreyot-bali-dance.jpg" rel="grsslightbox[gallery-1]"><img class="imgfn" src="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/th_gubhugreyot-bali-dance.jpg" /></a><a href="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/img_gubhugreyot-bridge-bw01.jpg" rel="grsslightbox[gallery-1]"><img class="imgfn" src="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/th_gubhugreyot-bridge-bw01.jpg" /></a><a href="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/img_gubhugreyot-red-flower.jpg" rel="grsslightbox[gallery-1]"><img class="imgfn" src="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/th_gubhugreyot-red-flower.jpg" /></a><a href="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/img_gubhugreyot-night-01.jpg" rel="grsslightbox[gallery-1]"><img class="imgfn" src="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/th_gubhugreyot-night-01.jpg" /></a></div>
<div style="clear:both"></div>

Catatan/Keterangan:

1. rel="GRlightbox[gallery-1]" diperuntukkan untuk lightbox image viewer for blogger. Panduan membuat lightbox ini bisa dibuka melalui link di bawah ini:
   Panduan Membuat Lightbox Image Viewer for Blogger
2. rel="grsslightbox[gallery-1]" diperuntukkan untuk lightbox slideshow. Panduan membuat lightbox slideshow bisa dibuka melalui link di bawah ini:
   Panduan Membuat Lightbox slideshow

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Posting » Setu LEGI, January, 28, 2012

» Happy Blogging - gubhugreyot «