Membuat galeri foto tanpa hosting

Membuat image gallery sederhana di blogger cukup banyak tutorialnya tapi secara umum caranya terlalu berbelit misalnya harus hosting foto ke picasa,pinterest dan sebagainya.Yang kerap menjadi masalah adalah ketika akan membuat gallery foto atau gambar yang berderet tersusun rapi.Karena sistem default pada blogger hanya bisa membuat gallery foto tersusun secara vertikal.Bagaimana caranya agar gambar dapat tersusun rapi secara horizontal? Lalu bagaimana mengenali alamat foto atau gambar tanpa harus hosting ke picasa atau lainnya? Dan yang tidak kalah penting adalah kita tidak harus menambahkan widget yang bisa memberatkan blog saat loading.Ini triknya :

1. Masuk ke Dashboard blogger dan buat entri baru (New Post) pilih mode “Compose”.Masukkan gambar seperti biasanya melalui picture uploader.Setelah semua gambar anda ter-uploaded,simpanlah tapi jangan di Publish.Lalu close.

2. Pilih edit entri yang baru lalu pindah ke “Mode HTML”,Copy semua isi dan simpan di notepad atau Ms Word.Perhatikan isi kode tersebut terdapat kode alamat gambar yang telah anda uploaded,contohnya seperti dibawah ini :

Contoh ID dan alamat foto atau gambar :

Tiap gambar yang sudah di upload akan memiliki ID dan alamatnya masing-masing.Nah itulah keuntungan default uploader di blogger yang bisa di akali.Sekarang kita lanjut memasukkan kodenya,langkahnya sebagai berikut :

1. Buka notepad atau Ms Word agar lebih mudah mengedit kodenya

2. Copy paste kode berikut :

<div class="snap_preview">
<div>
<span style="color: #0066ff;font-size: medium;">Logo Gallery</span></div>
<style type="text/css">.gallery{margin:auto;}.gallery-item{float:left; width:25%;} .gallery-caption { margin-left: 0; }</style>
<div class="gallery snap_nopreview">
<dl class="gallery-item">
<dt class="gallery-icon"><..isi dengan alamat foto 1.....>

</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><..isi dengan alamat foto 2.....>

</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><..isi dengan alamat foto 3.....>

</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><..isi dengan alamat fot 4.....>

</dt>
</dl>
</div>
</div>

3. Setelah alamat foto atau gambar dimasukkan kedalam kode tersebut diatas lalu copy dan masuk ke dashboard blogger lagi.Edit dengan mode “HTML” lalu paste kode yang tadi sudah di edit

4. Simpan dan preview untuk melihatnya

Keterangan :

1. Buatlah ukuran gambar yang sama

2. Nilai width:25% akan menghasilkan 4 foto / gambar berderet horizontal

3. Bila anda menambahkan gambar hingga 8 - 12 maka secara otomatis akan berbaris dibawahnya

4. Background gambar bebas,boleh transparant seperti di blog ini atau terserah anda misalnya hitam,putih dan sebagainya.Hasilnya seperti disini

Good luck,Brad & Sista