Cara Membuat Image Gallery untuk Lightbox

Membuat image galley beserta box yang dipergunakan sebagai wadah pada intinya adalah sebuah cara untuk membuat penataan image agar terlihat rapi hingga sebuah web/blog menjadi lebih menarik dan enak dipandang serta nyaman dinikmati pengunjung. Sebuah kunci yang harus dijadikan patokan ketika ingin membuat image gallery adalah keseragaman gambar. Patokan yang tentunya tak berlaku bagi beberapa blogger yang sudah cukup menguasai kode html. Bagi anda yang masih dalam tahap belajar tak perlu berkecil hati tentang pernyataan di atas, karena "sekalipun seseorang telah cukup ahli dalam penguasaan kode html", penataan image dalam sebuah gallery dengan ukuran bervariasi pada kenyataanya tak terlalu banyak digunakan karena kode html yang dipergunakan menjadi terlalu banyak dan bisa dikatakan blogger yang melakukan ini tak ubahnya "mempersulit diri".

Beberapa yang perlu diperhatikan untuk membuat image gallery

• Perhatikan luas (lebar/width) ruang/kolom/halaman posting yang dipergunakan.
• Berapa image akan ditempatkan dalam satu lajur/deret kolom yang tersedia.
• Tentukan ukuran lebar image berdasar lebar kolom yang tersedia dan jumlah image yang akan ditempatkan dalam deret tersebut.
• Berikan toleransi untuk digunakan sebagai border, margin dan padding (jika padding diperlukan).
• Buat percobaan terlebih dahulu dengan 1 (satu) buah image (ukuran tak ditentukan/sembarang). Dalam percobaan ini beberapa kode html yang diperlukan seperti width, height, border, margin serta padding dan kode html lain yang mungkin dibutuhkan seperti misalnya floating position (float:left; atau mungkin float;right;) langsung diterapkan dalam percobaan (dalam tag img atau tag a).
  Contoh:
  <img src="thumbnail.jpg" style="width:..px;height:..px;border:..px solid #444;padding:..px;background:#ddd;margin:..px ..px ..px ..px;" />

Contoh Penataan Image dalam Image Gallery-1

Kode html yang dipergunakan:

<div style="border-radius:12px;border:2px solid #555;margin:20px auto;padding:0 0 10px 10px;position:relative;text-align:center;width:482px;">
<a href="image-01.jpg" rel="GRlightbox[gadisku-1]"  title="Tulis teks di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhf-sbA7l8H7rmfnyrn6hhg8u1Gh-VmiQhxc4oDfa_id4_KYupYjVMzUrjt32rqYDCp_l_WGq1G5GBbePB-OXRXDWySGP8-rawkMjIwA-ScNgzK8U3dfFYoLvuIs5FoVtVYnuFWRy3VV0/s200/th_pretty-girl.jpg" style="background:#777;border:1px solid #ddd;height:80px;margin:10px 10px 0 0;padding:4px;width:100px;box-shadow:0 0 4px #000;border-radius:5px;" /></a>
<a href="image-02.jpg" rel="GRlightbox[gadisku-1]" title="Tulis teks di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhf-sbA7l8H7rmfnyrn6hhg8u1Gh-VmiQhxc4oDfa_id4_KYupYjVMzUrjt32rqYDCp_l_WGq1G5GBbePB-OXRXDWySGP8-rawkMjIwA-ScNgzK8U3dfFYoLvuIs5FoVtVYnuFWRy3VV0/s200/th_pretty-girl.jpg" style="background:#777;border:1px solid #ddd;height:80px;margin:10px 10px 0 0;padding:4px;width:100px;box-shadow:0 0 4px #000;border-radius:5px;" /></a>
<a href="image-03.jpg" rel="GRlightbox[gadisku-1]"  title="Tulis teks di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhf-sbA7l8H7rmfnyrn6hhg8u1Gh-VmiQhxc4oDfa_id4_KYupYjVMzUrjt32rqYDCp_l_WGq1G5GBbePB-OXRXDWySGP8-rawkMjIwA-ScNgzK8U3dfFYoLvuIs5FoVtVYnuFWRy3VV0/s200/th_pretty-girl.jpg" style="background:#777;border:1px solid #ddd;height:80px;margin:10px 10px 0 0;padding:4px;width:100px;box-shadow:0 0 4px #000;border-radius:5px;" /></a>
<a href="image-04.jpg" rel="GRlightbox[gadisku-1]" title="Tulis teks di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhf-sbA7l8H7rmfnyrn6hhg8u1Gh-VmiQhxc4oDfa_id4_KYupYjVMzUrjt32rqYDCp_l_WGq1G5GBbePB-OXRXDWySGP8-rawkMjIwA-ScNgzK8U3dfFYoLvuIs5FoVtVYnuFWRy3VV0/s200/th_pretty-girl.jpg" style="background:#777;border:1px solid #ddd;height:80px;margin:10px 10px 0 0;padding:4px;width:100px;box-shadow:0 0 4px #000;border-radius:5px;" /></a>
<a href="image-05.jpg" rel="GRlightbox[gadisku-1]"  title="Tulis teks di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhf-sbA7l8H7rmfnyrn6hhg8u1Gh-VmiQhxc4oDfa_id4_KYupYjVMzUrjt32rqYDCp_l_WGq1G5GBbePB-OXRXDWySGP8-rawkMjIwA-ScNgzK8U3dfFYoLvuIs5FoVtVYnuFWRy3VV0/s200/th_pretty-girl.jpg" style="background:#777;border:1px solid #ddd;height:80px;margin:10px 10px 0 0;padding:4px;width:100px;box-shadow:0 0 4px #000;border-radius:5px;" /></a>
<a href="image-06.jpg" rel="GRlightbox[gadisku-1]" title="Tulis teks di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhf-sbA7l8H7rmfnyrn6hhg8u1Gh-VmiQhxc4oDfa_id4_KYupYjVMzUrjt32rqYDCp_l_WGq1G5GBbePB-OXRXDWySGP8-rawkMjIwA-ScNgzK8U3dfFYoLvuIs5FoVtVYnuFWRy3VV0/s200/th_pretty-girl.jpg" style="background:#777;border:1px solid #ddd;height:80px;margin:10px 10px 0 0;padding:4px;width:100px;box-shadow:0 0 4px #000;border-radius:5px;" /></a>
<a href="image-07.jpg" rel="GRlightbox[gadisku-1]"  title="Tulis teks di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhf-sbA7l8H7rmfnyrn6hhg8u1Gh-VmiQhxc4oDfa_id4_KYupYjVMzUrjt32rqYDCp_l_WGq1G5GBbePB-OXRXDWySGP8-rawkMjIwA-ScNgzK8U3dfFYoLvuIs5FoVtVYnuFWRy3VV0/s200/th_pretty-girl.jpg" style="background:#777;border:1px solid #ddd;height:80px;margin:10px 10px 0 0;padding:4px;width:100px;box-shadow:0 0 4px #000;border-radius:5px;" /></a>
<a href="image-08.jpg" rel="GRlightbox[gadisku-1]" title="Tulis teks di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhf-sbA7l8H7rmfnyrn6hhg8u1Gh-VmiQhxc4oDfa_id4_KYupYjVMzUrjt32rqYDCp_l_WGq1G5GBbePB-OXRXDWySGP8-rawkMjIwA-ScNgzK8U3dfFYoLvuIs5FoVtVYnuFWRy3VV0/s200/th_pretty-girl.jpg" style="background:#777;border:1px solid #ddd;height:80px;margin:10px 10px 0 0;padding:4px;width:100px;box-shadow:0 0 4px #000;border-radius:5px;" /></a>
<a href="image-09.jpg" rel="GRlightbox[gadisku-1]"  title="Tulis teks di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhf-sbA7l8H7rmfnyrn6hhg8u1Gh-VmiQhxc4oDfa_id4_KYupYjVMzUrjt32rqYDCp_l_WGq1G5GBbePB-OXRXDWySGP8-rawkMjIwA-ScNgzK8U3dfFYoLvuIs5FoVtVYnuFWRy3VV0/s200/th_pretty-girl.jpg" style="background:#777;border:1px solid #ddd;height:80px;margin:10px 10px 0 0;padding:4px;width:100px;box-shadow:0 0 4px #000;border-radius:5px;" /></a>
<a href="image-10.jpg" rel="GRlightbox[gadisku-1]" title="Tulis teks di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhf-sbA7l8H7rmfnyrn6hhg8u1Gh-VmiQhxc4oDfa_id4_KYupYjVMzUrjt32rqYDCp_l_WGq1G5GBbePB-OXRXDWySGP8-rawkMjIwA-ScNgzK8U3dfFYoLvuIs5FoVtVYnuFWRy3VV0/s200/th_pretty-girl.jpg" style="background:#777;border:1px solid #ddd;height:80px;margin:10px 10px 0 0;padding:4px;width:100px;box-shadow:0 0 4px #000;border-radius:5px;" /></a>
<a href="image-11.jpg" rel="GRlightbox[gadisku-1]"  title="Tulis teks di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhf-sbA7l8H7rmfnyrn6hhg8u1Gh-VmiQhxc4oDfa_id4_KYupYjVMzUrjt32rqYDCp_l_WGq1G5GBbePB-OXRXDWySGP8-rawkMjIwA-ScNgzK8U3dfFYoLvuIs5FoVtVYnuFWRy3VV0/s200/th_pretty-girl.jpg" style="background:#777;border:1px solid #ddd;height:80px;margin:10px 10px 0 0;padding:4px;width:100px;box-shadow:0 0 4px #000;border-radius:5px;" /></a>
<a href="image-12.jpg" rel="GRlightbox[gadisku-1]" title="Tulis teks di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhf-sbA7l8H7rmfnyrn6hhg8u1Gh-VmiQhxc4oDfa_id4_KYupYjVMzUrjt32rqYDCp_l_WGq1G5GBbePB-OXRXDWySGP8-rawkMjIwA-ScNgzK8U3dfFYoLvuIs5FoVtVYnuFWRy3VV0/s200/th_pretty-girl.jpg" style="background:#777;border:1px solid #ddd;height:80px;margin:10px 10px 0 0;padding:4px;width:100px;box-shadow:0 0 4px #000;border-radius:5px;" /></a>
</div>

Kode html Image Gallery-1 dapat dibuat lebih ringkas/praktis dengan memanfaatkan kode css. Kode CSS disimpan di atas kode ]]></b:skin>

Kode CSS

.galeriku-1{
        border-radius:12px;
        border:2px solid #555;
        margin:20px auto;
        padding:0 0 10px 10px;
        position:relative;
        text-align:center;
        width:482px;
}.galeriku-1 a{
        margin:0;
        padding:0;
        border:none;
}
.galeriku-1 a img{
        background:#777;
        border:1px solid #ddd;
        height:150px;
        margin:10px 10px 0 0;
        padding:4px;
        width:100px;
        box-shadow:0 0 4px #000;
        border-radius:5px;
}

Kode html Lightbox

<div class="galeriku-1">
<a href="image-01.jpg" rel="GRlightbox[gadisku-1]"  title="Tulis teks di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5KS7B58mL-IJaULEr33VlqiunXM5a9rxWOMTWWKpVenuJ_Ddo7wiI6frmdmL6WXrt-hNwKSJKR1R_y6bri8CGHGGw2vMB8dLOnPLRTBbz2u0L_1Jg2pUo-CiBx3aWnRsSCamJiI9Hh3E/s200/img_pretty-girl.jpg" /></a>
<a href="image-02.jpg" rel="GRlightbox[gadisku-1]" title="Tulis teks di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5KS7B58mL-IJaULEr33VlqiunXM5a9rxWOMTWWKpVenuJ_Ddo7wiI6frmdmL6WXrt-hNwKSJKR1R_y6bri8CGHGGw2vMB8dLOnPLRTBbz2u0L_1Jg2pUo-CiBx3aWnRsSCamJiI9Hh3E/s200/img_pretty-girl.jpg" /></a>
<a href="image-03.jpg" rel="GRlightbox[gadisku-1]"  title="Tulis teks di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5KS7B58mL-IJaULEr33VlqiunXM5a9rxWOMTWWKpVenuJ_Ddo7wiI6frmdmL6WXrt-hNwKSJKR1R_y6bri8CGHGGw2vMB8dLOnPLRTBbz2u0L_1Jg2pUo-CiBx3aWnRsSCamJiI9Hh3E/s200/img_pretty-girl.jpg" /></a>
<a href="image-04.jpg" rel="GRlightbox[gadisku-1]" title="Tulis teks di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5KS7B58mL-IJaULEr33VlqiunXM5a9rxWOMTWWKpVenuJ_Ddo7wiI6frmdmL6WXrt-hNwKSJKR1R_y6bri8CGHGGw2vMB8dLOnPLRTBbz2u0L_1Jg2pUo-CiBx3aWnRsSCamJiI9Hh3E/s200/img_pretty-girl.jpg" /></a>
<a href="image-05.jpg" rel="GRlightbox[gadisku-1]"  title="Tulis teks di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5KS7B58mL-IJaULEr33VlqiunXM5a9rxWOMTWWKpVenuJ_Ddo7wiI6frmdmL6WXrt-hNwKSJKR1R_y6bri8CGHGGw2vMB8dLOnPLRTBbz2u0L_1Jg2pUo-CiBx3aWnRsSCamJiI9Hh3E/s200/img_pretty-girl.jpg" /></a>
<a href="image-06.jpg" rel="GRlightbox[gadisku-1]" title="Tulis teks di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5KS7B58mL-IJaULEr33VlqiunXM5a9rxWOMTWWKpVenuJ_Ddo7wiI6frmdmL6WXrt-hNwKSJKR1R_y6bri8CGHGGw2vMB8dLOnPLRTBbz2u0L_1Jg2pUo-CiBx3aWnRsSCamJiI9Hh3E/s200/img_pretty-girl.jpg" /></a>
<a href="image-07.jpg" rel="GRlightbox[gadisku-1]"  title="Tulis teks di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5KS7B58mL-IJaULEr33VlqiunXM5a9rxWOMTWWKpVenuJ_Ddo7wiI6frmdmL6WXrt-hNwKSJKR1R_y6bri8CGHGGw2vMB8dLOnPLRTBbz2u0L_1Jg2pUo-CiBx3aWnRsSCamJiI9Hh3E/s200/img_pretty-girl.jpg" /></a>
<a href="image-08.jpg" rel="GRlightbox[gadisku-1]" title="Tulis teks di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5KS7B58mL-IJaULEr33VlqiunXM5a9rxWOMTWWKpVenuJ_Ddo7wiI6frmdmL6WXrt-hNwKSJKR1R_y6bri8CGHGGw2vMB8dLOnPLRTBbz2u0L_1Jg2pUo-CiBx3aWnRsSCamJiI9Hh3E/s200/img_pretty-girl.jpg" /></a>
<a href="image-09.jpg" rel="GRlightbox[gadisku-1]"  title="Tulis teks di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5KS7B58mL-IJaULEr33VlqiunXM5a9rxWOMTWWKpVenuJ_Ddo7wiI6frmdmL6WXrt-hNwKSJKR1R_y6bri8CGHGGw2vMB8dLOnPLRTBbz2u0L_1Jg2pUo-CiBx3aWnRsSCamJiI9Hh3E/s200/img_pretty-girl.jpg" /></a>
<a href="image-10.jpg" rel="GRlightbox[gadisku-1]" title="Tulis teks di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5KS7B58mL-IJaULEr33VlqiunXM5a9rxWOMTWWKpVenuJ_Ddo7wiI6frmdmL6WXrt-hNwKSJKR1R_y6bri8CGHGGw2vMB8dLOnPLRTBbz2u0L_1Jg2pUo-CiBx3aWnRsSCamJiI9Hh3E/s200/img_pretty-girl.jpg" /></a>
<a href="image-11.jpg" rel="GRlightbox[gadisku-1]"  title="Tulis teks di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5KS7B58mL-IJaULEr33VlqiunXM5a9rxWOMTWWKpVenuJ_Ddo7wiI6frmdmL6WXrt-hNwKSJKR1R_y6bri8CGHGGw2vMB8dLOnPLRTBbz2u0L_1Jg2pUo-CiBx3aWnRsSCamJiI9Hh3E/s200/img_pretty-girl.jpg" /></a>
<a href="image-12.jpg" rel="GRlightbox[gadisku-1]" title="Tulis teks di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5KS7B58mL-IJaULEr33VlqiunXM5a9rxWOMTWWKpVenuJ_Ddo7wiI6frmdmL6WXrt-hNwKSJKR1R_y6bri8CGHGGw2vMB8dLOnPLRTBbz2u0L_1Jg2pUo-CiBx3aWnRsSCamJiI9Hh3E/s200/img_pretty-girl.jpg" /></a>
</div>

Image Gallery dengan kode yang sedikit berbeda

Dalam image gallery ini digunakan floating position (float).

Kode CSS

.galeriku-2{
        float:left;
        border-radius:12px;
        border:2px solid #555;
        margin:20px auto;
        padding:0 0 10px 10px;
}
.galeriku-2 a{
        margin:0;
        padding:0;
        border:none;
}
.galeriku-2 a img{
        background:#777;
        border:1px solid #ddd;
        height:150px;
        margin:10px 10px 0 0;
        padding:4px;
        width:100px;
        box-shadow:0 0 4px #000;
        border-radius:5px;
}

Kode html Lightbox

<div class="galeriku-2">
<a href="image-01.jpg" rel="GRlightbox[gadisku-2]" title="Tulis teks di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5KS7B58mL-IJaULEr33VlqiunXM5a9rxWOMTWWKpVenuJ_Ddo7wiI6frmdmL6WXrt-hNwKSJKR1R_y6bri8CGHGGw2vMB8dLOnPLRTBbz2u0L_1Jg2pUo-CiBx3aWnRsSCamJiI9Hh3E/s200/img_pretty-girl.jpg" /></a>
<a href="image-02.jpg" rel="GRlightbox[gadisku-2]" title="Tulis teks di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5KS7B58mL-IJaULEr33VlqiunXM5a9rxWOMTWWKpVenuJ_Ddo7wiI6frmdmL6WXrt-hNwKSJKR1R_y6bri8CGHGGw2vMB8dLOnPLRTBbz2u0L_1Jg2pUo-CiBx3aWnRsSCamJiI9Hh3E/s200/img_pretty-girl.jpg" /></a>
<a href="image-03.jpg" rel="GRlightbox[gadisku-2]" title="Tulis teks di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5KS7B58mL-IJaULEr33VlqiunXM5a9rxWOMTWWKpVenuJ_Ddo7wiI6frmdmL6WXrt-hNwKSJKR1R_y6bri8CGHGGw2vMB8dLOnPLRTBbz2u0L_1Jg2pUo-CiBx3aWnRsSCamJiI9Hh3E/s200/img_pretty-girl.jpg" /></a>
<a href="image-04.jpg" rel="GRlightbox[gadisku-2]" title="Tulis teks di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5KS7B58mL-IJaULEr33VlqiunXM5a9rxWOMTWWKpVenuJ_Ddo7wiI6frmdmL6WXrt-hNwKSJKR1R_y6bri8CGHGGw2vMB8dLOnPLRTBbz2u0L_1Jg2pUo-CiBx3aWnRsSCamJiI9Hh3E/s200/img_pretty-girl.jpg" /></a>
<a href="image-05.jpg" rel="GRlightbox[gadisku-2]" title="Tulis teks di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5KS7B58mL-IJaULEr33VlqiunXM5a9rxWOMTWWKpVenuJ_Ddo7wiI6frmdmL6WXrt-hNwKSJKR1R_y6bri8CGHGGw2vMB8dLOnPLRTBbz2u0L_1Jg2pUo-CiBx3aWnRsSCamJiI9Hh3E/s200/img_pretty-girl.jpg" /></a>
<a href="image-06.jpg" rel="GRlightbox[gadisku-2]" title="Tulis teks di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5KS7B58mL-IJaULEr33VlqiunXM5a9rxWOMTWWKpVenuJ_Ddo7wiI6frmdmL6WXrt-hNwKSJKR1R_y6bri8CGHGGw2vMB8dLOnPLRTBbz2u0L_1Jg2pUo-CiBx3aWnRsSCamJiI9Hh3E/s200/img_pretty-girl.jpg" /></a>
<a href="image-07.jpg" rel="GRlightbox[gadisku-2]" title="Tulis teks di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5KS7B58mL-IJaULEr33VlqiunXM5a9rxWOMTWWKpVenuJ_Ddo7wiI6frmdmL6WXrt-hNwKSJKR1R_y6bri8CGHGGw2vMB8dLOnPLRTBbz2u0L_1Jg2pUo-CiBx3aWnRsSCamJiI9Hh3E/s200/img_pretty-girl.jpg" /></a>
<a href="image-08.jpg" rel="GRlightbox[gadisku-2]" title="Tulis teks di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5KS7B58mL-IJaULEr33VlqiunXM5a9rxWOMTWWKpVenuJ_Ddo7wiI6frmdmL6WXrt-hNwKSJKR1R_y6bri8CGHGGw2vMB8dLOnPLRTBbz2u0L_1Jg2pUo-CiBx3aWnRsSCamJiI9Hh3E/s200/img_pretty-girl.jpg" /></a>
<a href="image-09.jpg" rel="GRlightbox[gadisku-2]" title="Tulis teks di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5KS7B58mL-IJaULEr33VlqiunXM5a9rxWOMTWWKpVenuJ_Ddo7wiI6frmdmL6WXrt-hNwKSJKR1R_y6bri8CGHGGw2vMB8dLOnPLRTBbz2u0L_1Jg2pUo-CiBx3aWnRsSCamJiI9Hh3E/s200/img_pretty-girl.jpg" /></a>
<a href="image-10.jpg" rel="GRlightbox[gadisku-2]" title="Tulis teks di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5KS7B58mL-IJaULEr33VlqiunXM5a9rxWOMTWWKpVenuJ_Ddo7wiI6frmdmL6WXrt-hNwKSJKR1R_y6bri8CGHGGw2vMB8dLOnPLRTBbz2u0L_1Jg2pUo-CiBx3aWnRsSCamJiI9Hh3E/s200/img_pretty-girl.jpg" /></a>
<a href="image-11.jpg" rel="GRlightbox[gadisku-2]" title="Tulis teks di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5KS7B58mL-IJaULEr33VlqiunXM5a9rxWOMTWWKpVenuJ_Ddo7wiI6frmdmL6WXrt-hNwKSJKR1R_y6bri8CGHGGw2vMB8dLOnPLRTBbz2u0L_1Jg2pUo-CiBx3aWnRsSCamJiI9Hh3E/s200/img_pretty-girl.jpg" /></a>
<a href="image-12.jpg" rel="GRlightbox[gadisku-2]" title="Tulis teks di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5KS7B58mL-IJaULEr33VlqiunXM5a9rxWOMTWWKpVenuJ_Ddo7wiI6frmdmL6WXrt-hNwKSJKR1R_y6bri8CGHGGw2vMB8dLOnPLRTBbz2u0L_1Jg2pUo-CiBx3aWnRsSCamJiI9Hh3E/s200/img_pretty-girl.jpg" /></a>
</div>

Catatan/Keterangan:

• Yang perlu diperhatikan saat membuat image gallery adalah lebar kolom yang tersedia di halaman posting dan lebar image (thumbnail).
• Height tak banyak berpengarush terhadap susunan gallery jika ukuran thumbnail seragam (sama ukurannya).
• Jika mox gallery menggunakan floating position maka lebar (width) box gallery tak perlu dicantumkan.
• Akan lebih menguntungkan dan lebih praktis dalam menggunakan kode html lightbox apabila kita membuat image gallery dengan bantuan kode css.
• image-01.jpg s/d image-12.jpg diganti dengan image yang akan dipreviewkan melalui lightbox (image berukuran besar).
• Thumbnail » Dalam kode di atas digunakan URL :
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5KS7B58mL-IJaULEr33VlqiunXM5a9rxWOMTWWKpVenuJ_Ddo7wiI6frmdmL6WXrt-hNwKSJKR1R_y6bri8CGHGGw2vMB8dLOnPLRTBbz2u0L_1Jg2pUo-CiBx3aWnRsSCamJiI9Hh3E/s200/img_pretty-girl.jpg
  Ganti URL ini dengan thumbnail sesuai dengan pengganti image-01.jpg s/d image-12.jpg
• Lightbox Gallery ini bisa juga digunakan sebagai image gallery biasa dengan cara menghilangkan kode rel="..."
• Anda dapat menambah atau mengurangi kode untuk disesuaikan dengan kebutuhan atau selera.
• Penyimpanan kode css di atas kode ]]></b:skin> dilakukan melalui halaman Edit HTML.
  
  1. Login ke blogger
  2. Halaman dasbor
  3. Rancangan (Design).
  4. Edit HTML
  5. Cari dan temukan kode ]]></b:skin>
  6. Copy dan Pastekan kode CSS di atasnya.
  7. Save Template (Simpan Template).
• Saat menggunakan kode html lightbox di halaman posting stiap kode harus disusun berderet tanpa terputus.

Contoh kode berderet tanpa putus di halaman posting

Membuat kode html posting berderet tanpa putus

<div class="galeriku-2"><a href="image-01.jpg" rel="GRlightbox[gadisku-2]" title="Tulis teks di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5KS7B58mL-IJaULEr33VlqiunXM5a9rxWOMTWWKpVenuJ_Ddo7wiI6frmdmL6WXrt-hNwKSJKR1R_y6bri8CGHGGw2vMB8dLOnPLRTBbz2u0L_1Jg2pUo-CiBx3aWnRsSCamJiI9Hh3E/s200/img_pretty-girl.jpg" /></a><a href="image-02.jpg" rel="GRlightbox[gadisku-2]" title="Tulis teks di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5KS7B58mL-IJaULEr33VlqiunXM5a9rxWOMTWWKpVenuJ_Ddo7wiI6frmdmL6WXrt-hNwKSJKR1R_y6bri8CGHGGw2vMB8dLOnPLRTBbz2u0L_1Jg2pUo-CiBx3aWnRsSCamJiI9Hh3E/s200/img_pretty-girl.jpg" /></a><a href="image-03.jpg" rel="GRlightbox[gadisku-2]" title="Tulis teks di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5KS7B58mL-IJaULEr33VlqiunXM5a9rxWOMTWWKpVenuJ_Ddo7wiI6frmdmL6WXrt-hNwKSJKR1R_y6bri8CGHGGw2vMB8dLOnPLRTBbz2u0L_1Jg2pUo-CiBx3aWnRsSCamJiI9Hh3E/s200/img_pretty-girl.jpg" /></a><a href="image-04.jpg" rel="GRlightbox[gadisku-2]" title="Tulis teks di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5KS7B58mL-IJaULEr33VlqiunXM5a9rxWOMTWWKpVenuJ_Ddo7wiI6frmdmL6WXrt-hNwKSJKR1R_y6bri8CGHGGw2vMB8dLOnPLRTBbz2u0L_1Jg2pUo-CiBx3aWnRsSCamJiI9Hh3E/s200/img_pretty-girl.jpg" /></a><a href="image-05.jpg" rel="GRlightbox[gadisku-2]" title="Tulis teks di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5KS7B58mL-IJaULEr33VlqiunXM5a9rxWOMTWWKpVenuJ_Ddo7wiI6frmdmL6WXrt-hNwKSJKR1R_y6bri8CGHGGw2vMB8dLOnPLRTBbz2u0L_1Jg2pUo-CiBx3aWnRsSCamJiI9Hh3E/s200/img_pretty-girl.jpg" /></a><a href="image-06.jpg" rel="GRlightbox[gadisku-2]" title="Tulis teks di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5KS7B58mL-IJaULEr33VlqiunXM5a9rxWOMTWWKpVenuJ_Ddo7wiI6frmdmL6WXrt-hNwKSJKR1R_y6bri8CGHGGw2vMB8dLOnPLRTBbz2u0L_1Jg2pUo-CiBx3aWnRsSCamJiI9Hh3E/s200/img_pretty-girl.jpg" /></a><a href="image-07.jpg" rel="GRlightbox[gadisku-2]" title="Tulis teks di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5KS7B58mL-IJaULEr33VlqiunXM5a9rxWOMTWWKpVenuJ_Ddo7wiI6frmdmL6WXrt-hNwKSJKR1R_y6bri8CGHGGw2vMB8dLOnPLRTBbz2u0L_1Jg2pUo-CiBx3aWnRsSCamJiI9Hh3E/s200/img_pretty-girl.jpg" /></a><a href="image-08.jpg" rel="GRlightbox[gadisku-2]" title="Tulis teks di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5KS7B58mL-IJaULEr33VlqiunXM5a9rxWOMTWWKpVenuJ_Ddo7wiI6frmdmL6WXrt-hNwKSJKR1R_y6bri8CGHGGw2vMB8dLOnPLRTBbz2u0L_1Jg2pUo-CiBx3aWnRsSCamJiI9Hh3E/s200/img_pretty-girl.jpg" /></a><a href="image-09.jpg" rel="GRlightbox[gadisku-2]" title="Tulis teks di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5KS7B58mL-IJaULEr33VlqiunXM5a9rxWOMTWWKpVenuJ_Ddo7wiI6frmdmL6WXrt-hNwKSJKR1R_y6bri8CGHGGw2vMB8dLOnPLRTBbz2u0L_1Jg2pUo-CiBx3aWnRsSCamJiI9Hh3E/s200/img_pretty-girl.jpg" /></a><a href="image-10.jpg" rel="GRlightbox[gadisku-2]" title="Tulis teks di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5KS7B58mL-IJaULEr33VlqiunXM5a9rxWOMTWWKpVenuJ_Ddo7wiI6frmdmL6WXrt-hNwKSJKR1R_y6bri8CGHGGw2vMB8dLOnPLRTBbz2u0L_1Jg2pUo-CiBx3aWnRsSCamJiI9Hh3E/s200/img_pretty-girl.jpg" /></a><a href="image-11.jpg" rel="GRlightbox[gadisku-2]" title="Tulis teks di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5KS7B58mL-IJaULEr33VlqiunXM5a9rxWOMTWWKpVenuJ_Ddo7wiI6frmdmL6WXrt-hNwKSJKR1R_y6bri8CGHGGw2vMB8dLOnPLRTBbz2u0L_1Jg2pUo-CiBx3aWnRsSCamJiI9Hh3E/s200/img_pretty-girl.jpg" /></a><a href="image-12.jpg" rel="GRlightbox[gadisku-2]" title="Tulis teks di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5KS7B58mL-IJaULEr33VlqiunXM5a9rxWOMTWWKpVenuJ_Ddo7wiI6frmdmL6WXrt-hNwKSJKR1R_y6bri8CGHGGw2vMB8dLOnPLRTBbz2u0L_1Jg2pUo-CiBx3aWnRsSCamJiI9Hh3E/s200/img_pretty-girl.jpg" /></a></div>