0 MENAMPILKAN LIGHT BOX DEFAULT BLOGGER

Blogger telah menyediakan aksesoris berupa light box. Pengertian light box adalah penampilan gambar pada postingan yang apabila gambar diklik, tampilan blog secara keseluruhan menjadi blur/samar karena tertutup gambar yang anda klik tadi.
Bagi sebagian peblogger kurang menyukai tampilan gambar yang telah dipasang light box, tetapi sebagian lagi sangat menyukai tampilan light box.

jika anda tergolong bagian kedua (menyukai tampilan light box), anda dapat menggunakan light box default Blogger tanpa harus menambah kode tertentu kedalam Template Blog anda. Anda hanya perlu menambah sedikit kode pada saat anda membuat postingan.
Sebelum anda menggunakan Light Box default Blogger, sebaiknya anda cek terlebih dulu pada pengaturan tampilan blog anda dengan langkah-langkah berikut ini :

1. Masuk ke dasbor
2. Pilih blog yang ingin diatur setelan tampilan.
3. Klik Setelan (paling bawah)
4. Pilih Post dan Komentar
5. Pilih ya pada Tampilan Gambar dengan Light Box
6. Simpan perubahan

Setelah selesai pengaturan pada bagian pertama diatas, coba sekarang anda membuat sebuah postingan yang gambar pada postingan tersebut akan ditampilkan dalam bentuk Light Box.

Ada dua buah kode yang dapat anda gunakan untuk menampilkan gambar dalam Light Box.

1. Kode pertama
   <div class="separator" style="clear: both; text-align: center;">
<a href="URL/alamat gambar" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="100" src="URL/alamat gambar" width="100" /></a></div>
   Pada kode diatas terdapat dua URL/alamat gambar. Isi kedua URL/alamat gambar itu dengan gambar yang sama dengan fungsi sebagai berikut:
   1. URL/alamat gambar merupakan URL/alamat gambar yang akan tampil pada Light Box. Tampilannya sesuai dengan ukuran asli dari gambar tesebut.
   2. URL/alamat gambar merupakan URL/alamat gambar yang tampil pada halaman blog anda.
   3. Ganti kata left dengan center agar gambar terletak ditengah dan right untuk dikanan.
   4. Atur ukuran gambar yang tampil pada postingan sesuai dengan ukuran yang ingin anda tampilkan. Pada kode diatas, tampilan gambar pada postingan diatur pada ukuran  height="100" dan width="100". Silahkan anda ubah.
2. Kode Kedua
   <a href="URL/alamat gambar"><img class="imgfl" height="100" src="URl/alamat gambar" width="100" /></a>
   Pada kode kedua diatas pada URL/alamat gambar  harus diisi dengan alamat gambar yang sama serta kode class="imgfl  menunjukan bahwa gambar diletakan dikiri. Ganti kode itu menjadi class="imgfc  untuk tengah dan kode class="imgfr  untuk kanan

Demo : Coba anda klik gambar yang ada pada postingan ini. Tiga gambar diatas merupakan contoh dari kode pertama dan ketiga gambar dibawah merupakan contoh dari kode kedua.


Gambar diatas diatur dengan ukuran lebar 100px dan tinggi 100px untuk tampilan sebelum diklik. Tampilan gambar pada light box merupakan ukuran asli dari gambar tersebut,\.

Artikel Terkait :