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.....>
<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.....>
</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.....>
</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.....>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><..isi dengan alamat fot 4.....>
</dt>
</dl>
</div>
</div>
</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
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