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.

Bagi anda tertarik untuk memanfaatkan Lightbox Blogger Plugins dan menggunakannya dalam posting, silahkan ikuti langkah berikut ini:

1. Siapkan sebuah image (gambar) dengan ukuran lebar maksimal 680px (lebar ini sesuai dengan yang dipergunakan pada preview image pada lightbox blogger plugins).
2. Login ke Blogger.
3. Dasbor (Dasboard).
4. Posting | Entri Baru (Posting | New Post) » Create New Post.
5. Gunakan "Mode Compose".
6. Insert Image » Tunggu beberapa saat!
7. Pilih Berkas » Tunggu beberapa saat!
8. Add Selected.
9. Anda akan masuk kembali di box posting. Klik pada gambar (image).
10. Pengaturan Image dan Teks (Caption)
    • Ukuran gambar (image) » klik small, medium atau large.
    • Pengaturan Posisi gambar (image) » Atur posisi untuk gambar sebelah kiri, tengah atau kanan dengan klik Left, Center atau Right
    • Apabila ingin menambah teks, klik caption kemudian tuliskan teks yang diinginkan.
    • Terbitkan Entri (Publish Post)).
    • Buka blog dan lihat hasilnya dengan klik image (thumbnail di halaman posting (Go to the blog and see the results).

Catatan/Keterangan:

Jika setting image posisi gambar di sebelah kiri (left) dengan ukuran image (thumbnail) small dan ada penambahan teks, maka bentuk kode htmlnya sbb (anda bisa klik "mode Edit HTML untuk melihat kodenya!):

Kode html lightbox

<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoap7Nz96eHYvWSU9D02bzaHcUvdnXqhddD0XtcWMlAOkKgnJqmog_7XU17kuVOtVhjkeKNyBmGPIo8UpIaiSAq8k1m6CcaRUV-3zQIXPpM9eBzfb8pCmvYPrhlBTHpdPUF3r4ELiejok/s1600/.....jpg" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="..." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoap7Nz96eHYvWSU9D02bzaHcUvdnXqhddD0XtcWMlAOkKgnJqmog_7XU17kuVOtVhjkeKNyBmGPIo8UpIaiSAq8k1m6CcaRUV-3zQIXPpM9eBzfb8pCmvYPrhlBTHpdPUF3r4ELiejok/s200/.....jpg" width="..." /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Teks di sini</td></tr>
</tbody></table>

Dalam bentuk yang lebih simpel kode menjadi seperti berikut:

Kode html lightbox dalam bentuk ringkas

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoap7Nz96eHYvWSU9D02bzaHcUvdnXqhddD0XtcWMlAOkKgnJqmog_7XU17kuVOtVhjkeKNyBmGPIo8UpIaiSAq8k1m6CcaRUV-3zQIXPpM9eBzfb8pCmvYPrhlBTHpdPUF3r4ELiejok/s1600/.....jpg" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img style="float:left;margin:5px 12px 5px 0;" border="0" height="..." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoap7Nz96eHYvWSU9D02bzaHcUvdnXqhddD0XtcWMlAOkKgnJqmog_7XU17kuVOtVhjkeKNyBmGPIo8UpIaiSAq8k1m6CcaRUV-3zQIXPpM9eBzfb8pCmvYPrhlBTHpdPUF3r4ELiejok/s200/.....jpg" width="..." /></a>

Contoh Lightbox Blogger Plugin

Titanic

Contoh Lightbox Blogger Plugin dg Kode lebih simpel