Membuat Gallery Foto di Postingan Blog

Cara mengupload foto yang kita pakai di postingan blogger biasanya tidak begitu memuaskan karena gambar yang kita upload hanya bisa diatur center, left dan right saja. Tidak bisa diatur berjejer seperti foto pada album facebook. Nah, cara upload foto ala blogger itu tentunya memakan tempat di blog dan kurang maksimal.

Kali ini saya akan membuat gallery foto yang dimuat di postingan blog, khususnya untuk Anda yang memiliki konten seperti fashion, kuliner ataupun produk-produk tertentu. Bagaimana cara membuatnya? Simak di bawah ini:

1. Login ke akun Blogger.
2. Pilih Posting > Entri baru
3. Untuk memasang foto gallery, klik mode Edit HTML, bukan yang mode Compose. Kemudian copy paste script di bawah ini pada postingan Anda.


<div class="snap_preview">
<style type="text/css">.gallery{margin:auto;}.gallery-item{float:left; width:33%;} .gallery-caption { margin-left: 0; }</style>
    <br />
<div class="gallery snap_nopreview">

<dl class="gallery-item">
<dt class="gallery-icon"><a href="Url Image anda" target="_blank">
    <img border="0" height="250" src="Url Image anda" width="200" /></a>
    </dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="Url Image anda" target="_blank">
    <img border="0" height="250" src="Url Image anda" width="200" /></a>
    </dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="Url Image anda" target="_blank">
    <img border="0" height="250" src="Url Image anda" width="200" /></a>
    </dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="Url Image anda" target="_blank">
    <img border="0" height="250" src="Url Image anda" width="200" /></a>
    </dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="Url Image anda" target="_blank">
    <img border="0" height="250" src="Url Image anda" width="200" /></a>
    </dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="Url Image anda" target="_blank">
    <img border="0" height="250" src="Url Image anda" width="200" /></a>
    </dt>
</dl>
</div>
</div>


Keterangan :

• Kode yang berwarna biru silahkan anda masukkan Url gambar anda
• Untuk merubah ukuran gambar anda bisa rubah untuk tinggi cari height="250"
• Untuk lebar width="200".
• Untuk menentukan berapa gambar yang berderetan bisa anda lihat yang saya warnai hijau, Ubahlah Angka yang anda inginkan. 33% terdiri dari 3 deret. Rumusnya 100% : 3 = 33,3333% aku genapkan menjadi 33%. untuk menjadi 4 deret maka rumusnya. 100% : 4 = 25%.


4. Apabila anda ingin menambahkan gambar lagi di deretannya, anda tinggal masukkan script di bawah ini, sebelum kode </div> </div> terakhir.


<dl class="gallery-item">
<dt class="gallery-icon"><a href="https://www.blogger.com/Url%20Image%20anda" target="_blank">
    <img border="0" height="250" src="Url Image anda" width="200" /></a>
    </dt>
</dl>



5. Sekarang silahkan klik terbitkan entri :) Nanti contoh gallery foto di postingannya akan seperti ini: