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

• Login ke Blogger.
• Dasboard
• Setelan (Settings)
• Format (Formatting)
• Tampilkan gambar dengan Lightbox (Showcase images with Lightbox)
• Ya (Yes)
• Simpan Setelan (Save Settings)

D E M O

Buka link demo di bawah ini untuk melihat hasil penggunaan lightbox dan contoh kode html posting lightbox:

D E M O Lightbox

Cara menggunakan kode

Kode yang digunakan untuk membuat lightbox bekerja sangat sederhana karena kita tak perlu menambahkan kode khusus. Penambahan yang terpenting hanyalah menentukan ukuran width dan height thumnail.

• Buatlah image dalam ukuran besar (image.jpg). Sampeyan sebaiknya menggunakan ukuran berkisar 400px (width) hingga 900px (width) dan 200px (height) hingga 500px (height).
  Catatan: Preview image dalam lightbox blogger berukuran sekitar 800px (width) dan 500px (height).
• Buat Posting dalam Mode Compose
• Klik toolbar insert Image untuk upload gambar (image) yang telah dipersiapkan sebelumnya. Tunggu proses upload selesai.
• Klik image di kolom (box) posting.
• Atur Ukuran image:
  • Small : untuk image (thumbnail) berukuran kecil.
  • Medium : untuk image (thumbnail) berukuran sedang.
  • Large : untuk image (thumbnail) berukuran besar.
  Karena image akan dipreviewkan melalui lighbox dalam ukuran besar sebaiknya gunakan small atau medium.
• Atur Posisi Image:
  • Left: untuk image di posisi sebelah kiri.
  • Center: untuk image di posisi tengah.
  • Right: untuk image di posisi sebelah kanan.
• Menambah Teks: Klik Caption kemudian tuliskan teks yang berhubungan dengan image.
• Terbitkan posting.

Gambar Tunggal (Single Image)

Bentuk kode posting lightbox dengan image pada posisi sebelah kiri (Bisa dilihat dengan klik mode Edit HTML).

<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/AVvXsEga9Z-azMYHj7ZQaLazgCUdCBCcGI2U2e6YBvCc-mqRmFWrT0jG3UdLCFoD0uFoO5oVKR4b8G5ZyGdwiMCSLvLnhCHbBWp7BjBoKg3lsnxMk3t3DZOdigAFPUqVNnMyhf5Nt-lq4ma2fxk/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/AVvXsEga9Z-azMYHj7ZQaLazgCUdCBCcGI2U2e6YBvCc-mqRmFWrT0jG3UdLCFoD0uFoO5oVKR4b8G5ZyGdwiMCSLvLnhCHbBWp7BjBoKg3lsnxMk3t3DZOdigAFPUqVNnMyhf5Nt-lq4ma2fxk/s200/.....jpg" width="..." /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Teks di sini</td></tr>
</tbody></table>

Dalam bentuk sederhana dapat dituliskan sbb:

<a href="image.jpg"><img src="thumbnail.jpg" border="0" width="200" height="150" style="float:left;margin:5px 12px 5px 0;" /></a>

Image Gallery

<a href="image-1.jpg"><img src="thumbnail-1.jpg" border="0" width="200" height="150"></a><a href="image-2.jpg"><img src="thumbnail-2.jpg" border="0" width="200" height="150"></a><a href="image-3.jpg"><img src="thumbnail-3.jpg" border="0" width="200" height="150"></a><a href="image-4.jpg"><img src="thumbnail-4.jpg" border="0" width="200" height="150"></a>

Catatan/Keterangan:

Untuk membuat image gallery buatlah kode tanpa terputus (bersambung) antara image pertama hingga terakhir seperti yang terlihat pada contoh kode di atas!

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

» Happy Blogging - gubhugreyot «