Langsung ke konten utama

Membuat Galeri Foto Tanpa Hosting

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

1. Masuk ke Dashboard blogger dan buat entri gres (New Post) pilih mode “Compose”.Masukkan gambar ibarat biasanya melalui picture uploader.Setelah semua gambar anda ter-uploaded,simpanlah tapi jangan di Publish.Lalu close.
2. Pilih edit entri yang gres kemudian pindah ke “Mode HTML”,Copy semua isi dan simpan di notepad atau Ms Word.Perhatikan isi aba-aba tersebut terdapat aba-aba alamat gambar yang telah anda uploaded,contohnya ibarat dibawah ini :

Contoh ID dan alamat foto atau gambar :
Tiap gambar yang sudah di upload akan mempunyai ID dan alamatnya masing-masing.Nah itulah laba default uploader di blogger yang sanggup di akali.Sekarang kita lanjut memasukkan kodenya,langkahnya sebagai berikut :

1. Buka notepad atau Ms Word biar lebih gampang mengedit kodenya
2. Copy paste aba-aba 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 aba-aba tersebut diatas kemudian copy dan masuk ke dashboard blogger lagi.Edit dengan mode “HTML” kemudian paste aba-aba 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 sampai 8 - 12 maka secara otomatis akan berbaris dibawahnya
4. Background gambar bebas,boleh transparant ibarat di blog ini atau terserah anda contohnya hitam,putih dan sebagainya.Hasilnya ibarat disini

Good luck,Brad & Sista


Komentar