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.
3. Thumbnail juga sering digunakan sebagai gambar (image) sekunder yang dibuat menjadi sebuah image link. Image link ini kemudian diarahkan pada sebuah alamat (URL) tertentu atau gambar (image) primer (utama), sehingga saat thumbnail di klik akan terbuka alamat berbeda.
   Coba lakukan klik pada dua buah thumbnail di atas!
4. Lightbox atau Lightbox Image Viewer for Blogger yang dimaksudkan dalam posting ini bukanlah lightbox blogger plugins. lightbox ini adalah widget yang kita buat sendiri. Sebagai contoh adalah lightbox yang dapat dibuka melalui link di bawah ini!
   Demo Lightbox
   Atau jika ingin membuatnya silahkan klik melalui link di bawah ini:
   Cara membuat Lightbox

Cara membuat image & thumbnail pada lightbox

Ada dua cara yang dapat kita gunakan untuk membuat thumbnail yang khusus dipergunakan untuk lightbox.

Cara pertama:

Cara ini sudah umum dilakukan dan memang menjadi satu cara terbaik membuat thumbnail sekaligus image lightbox karena ukuran yang dibuat lebih fleksibel (sesuai selera).

• Buat image berukuran besar dan thumbnail (gambar kecil) menggunakan software seperti adobe photoshop misalnya.
• Upload images & thumbnail di blogger atau file hosting yang lain. sehingga kita dapatkan URL thumbnail serta image.
  

Bentuk dasar URL thumbnail : thumbnail.jpg
Contoh kode lengkap URL thumbnail : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixtLRlOoi9BTaLlj3WVMs-GjOa8EhDncuB4EemL-jfF5s26skOk5meXwyROVuJMmVM-LJetT7vFSEcFz6vyQZrDTmICLx79mx1PYMrU0_Yh9EGEXTmtVWfUWRRZ_VMtXFp30Y2cDlT3Ws/s200/penelopecruz_003.jpg

Cara membentuk URL thumbnail menjadi sebuah kode html lengkap agar image bisa ditampilkan di blog. Contoh:

Contoh kode html image-1

<img width="150" height="110" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixtLRlOoi9BTaLlj3WVMs-GjOa8EhDncuB4EemL-jfF5s26skOk5meXwyROVuJMmVM-LJetT7vFSEcFz6vyQZrDTmICLx79mx1PYMrU0_Yh9EGEXTmtVWfUWRRZ_VMtXFp30Y2cDlT3Ws/s200/penelopecruz_003.jpg" style="float:left;margin:5px 12px 5px 0;background:#ddd;padding:4px;border:1px solid #900;" />

Atau bisa dalam bentuk seperti di bawah ini:

Contoh kode html image-2

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixtLRlOoi9BTaLlj3WVMs-GjOa8EhDncuB4EemL-jfF5s26skOk5meXwyROVuJMmVM-LJetT7vFSEcFz6vyQZrDTmICLx79mx1PYMrU0_Yh9EGEXTmtVWfUWRRZ_VMtXFp30Y2cDlT3Ws/s200/penelopecruz_003.jpg" style="width:150px;height:110px;float:left;margin:5px 12px 5px 0;background:#ddd;padding:4px;border:1px solid #900;" />

Apabila kode ini buat menjadi image link lightbox maka bentuknya menjadi:

Image link dengan sebuah thumbnail/image

<a href="big-image.jpg" rel="GRlightbox"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixtLRlOoi9BTaLlj3WVMs-GjOa8EhDncuB4EemL-jfF5s26skOk5meXwyROVuJMmVM-LJetT7vFSEcFz6vyQZrDTmICLx79mx1PYMrU0_Yh9EGEXTmtVWfUWRRZ_VMtXFp30Y2cDlT3Ws/s200/penelopecruz_003.jpg" style="width:150px;height:110px;float:left;margin:5px 12px 5px 0;background:#ddd;padding:4px;border:1px solid #900;" /></a>

Cara Kedua

Cara kedua terhitung lebih praktis sehingga proses bisa selesai lebih cepat. Semua image cukup diupload melalui halaman posting blogger/blogspot. Yang diperlukan untuk cara ini:

• Login ke Blogger
• Dasbor (Dasboard)
• Pengaturan (Settings)
• Format (Formatting)
• Tampilkan gambar dengan Lightbox (Showcase images with Lightbox) » pilih "No"
• Simpan Setelan (Save Settings).

Langkah di atas dimaksudkan untuk meniadakan fungsi lightbox blogger plugins yang jika tak dinonaktifkan akan mengganggu fungsi lightbox yang coba kita buat sendiri. Langkah berikutnya.

• Buat Image dengan ukuran maksimal 900px (width) dan/atau 550px (height) menggunakan software.
• Upload image melalui halaman posting (Mode Compose). Jangan lupa setting pilihan upload pada ukuran big.
• Setelah proses upload selesai klik tepat pada image.
• Atur ukuran thumbnail dengan pilihan yang tersedia (gunakan small atau medium!).
• Pilih posisi (left, center, right).
• Gunakan URL image dan URL thumbnail untuk difungsikan dalam lightbox.

Kode html image di halaman posting setelah upload

Image dan thumbnail ini diperoleh setelah upload di halaman posting blogger dengan posisi image disebelah kiri (left), ukuran besar (large). Untuk melihat atau mendapatkan kode html ini rubah mode posting pada "Edit HTML".

Kode html image di halaman posting

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFoQBgmT0bzLaqy2OuvZXe-BPy3lMfxp1_cFodz621sLh2w7c144Np243yyc2l5krSzwZUlji6Jn1DGPjAhPUpzGQ2lIFrkfouK4xRY1x2v0NmimreAcwnN8L9mwjH1Cm6v5nKLZhAN1Q/s1600/img_panorama-pantai.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="148" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFoQBgmT0bzLaqy2OuvZXe-BPy3lMfxp1_cFodz621sLh2w7c144Np243yyc2l5krSzwZUlji6Jn1DGPjAhPUpzGQ2lIFrkfouK4xRY1x2v0NmimreAcwnN8L9mwjH1Cm6v5nKLZhAN1Q/s200/img_panorama-pantai.jpg" width="200" /></a></div>

URL image = https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFoQBgmT0bzLaqy2OuvZXe-BPy3lMfxp1_cFodz621sLh2w7c144Np243yyc2l5krSzwZUlji6Jn1DGPjAhPUpzGQ2lIFrkfouK4xRY1x2v0NmimreAcwnN8L9mwjH1Cm6v5nKLZhAN1Q/s1600/img_panorama-pantai.jpg
URL thumbnail = https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFoQBgmT0bzLaqy2OuvZXe-BPy3lMfxp1_cFodz621sLh2w7c144Np243yyc2l5krSzwZUlji6Jn1DGPjAhPUpzGQ2lIFrkfouK4xRY1x2v0NmimreAcwnN8L9mwjH1Cm6v5nKLZhAN1Q/s200/img_panorama-pantai.jpg

Kode Lightbox berdasar URL hasil upload

Kode html lightbox

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFoQBgmT0bzLaqy2OuvZXe-BPy3lMfxp1_cFodz621sLh2w7c144Np243yyc2l5krSzwZUlji6Jn1DGPjAhPUpzGQ2lIFrkfouK4xRY1x2v0NmimreAcwnN8L9mwjH1Cm6v5nKLZhAN1Q/s1600/img_panorama-pantai.jpg" rel="GRlightbox" title="Tuliskan caption lightbox di sini!"><img height="148" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFoQBgmT0bzLaqy2OuvZXe-BPy3lMfxp1_cFodz621sLh2w7c144Np243yyc2l5krSzwZUlji6Jn1DGPjAhPUpzGQ2lIFrkfouK4xRY1x2v0NmimreAcwnN8L9mwjH1Cm6v5nKLZhAN1Q/s200/img_panorama-pantai.jpg" style="width:200px;height:148px;float:left;margin:5px 12px 5px 0;padding:4px;border:1px solid #555;" /></a>

Kode yang telah diwarnai adalah kode modifikasi unruk penyesuaian dengan bentuk kode yang baru. Anda bisa menambahkan kode lain seperti misalnya border-radius, background, box-shadow atau mungkin kode lainnya.