Cara Membuat Galeri Foto di Halaman Statis Blog

Tutorial berikut ini, akan membuat gambar yang disajikan berderet secara sejajar. Sehingga laman tersebut akan terlihat penuh tanpa ada ruang kosong didalamnya.

Cara Membuat Galeri Foto di Blog

1. Masuk ke akun blogger anda terlebih dahulu.

2. Pilih menu Laman dan klik Laman Baru, serta beri judul laman tersebut. Anda bisa menamainya dengan judul Galeri Foto, Kumpulan Foto, dan lain-lain.

3. Kemudian pilih mode HTML dan masukkan kode dibawah ini.

<div class="snap_preview" style="text-align: center;">
<span style="color: black; font-size: large;">Galeri Foto di Blog Gangkutu</span></div>
<style type="text/css">
.gallery {
margin: auto;
}
.gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 33%; }
.gallery img {
border: 2px solid #cfcfcf;
}
.gallery-caption {
margin-left: 0;
}
</style>

<div class="gallery snap_nopreview">

<dl class="gallery-item">
<dt class="gallery-icon"><a href="IMAGE URL" target="_blank">
<img height="150" src="IMAGE URL" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="IMAGE URL" target="_blank">
<img height="150" src="IMAGE URL" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="IMAGE URL" target="_blank">
<img height="150" src="IMAGE URL" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="IMAGE URL" target="_blank">
<img height="150" src="IMAGE URL" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="IMAGE URL" target="_blank">
<img height="150" src="IMAGE URL" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="IMAGE URL" target="_blank">
<img height="150" src="IMAGE URL" width="200" /></a>
</dt>
</dl>
</div>

Ket:
Merah: Ganti judul tersebut sesuai kebutuhan anda
Biru: Masukan URL gambar anda

4. Untuk menambah koleksi gambar, silakan copy kode dibawah ini,  dan letakkan tepat dibawah kode
<div class="gallery snap_nopreview">

<dl class="gallery-item">
<dt class="gallery-icon"><a href="IMAGE URL" target="_blank">
<img height="150" src="IMAGE URL" width="200" /></a>
</dt>
</dl>

5. Terakhir Simpan dan lihat hasilnya.

Laman ini sangat bagus diterapkan pada blog yang dengan niche rumah dan fotografi. Karena blog niche tersebut, memang menjadikan foto sebagai konten utamanya di blog.

Mungkin itu saja untuk artikel kali ini, semoga dapat bermanfaat bagi tema-teman semua. Apabila anda punya pertanyaan menyangkut artikel ini, silakan bertanya lewat kolom komentar dibawah.