Simple Gallery Photo di Blog

Simple Gallery Photo di Blog - banyak dari blogger apabila membuat efek pada blog mereka takut kalau blognya berpengaruh pada loading blog yang berubah menjadi lambat. Pertanyaan tersebut seringkali muncul atau bisa di jumpai pada konten posting yang khususnya mengupas tutorial blog entah itu pada jenis CSS maupun jQuery dan lain sebagainya.

Namun apa jadinya saat akan memposting konten namun pada konten tersebut membutuhkan photo dan berjumlah banyak, apabila hanya photo tersusun secara vertikal pasti tentunya akan memakan banyak ruang konten dan terlalu panjang kebawah untuk memasukkan photo-photo tersebut. Maka dari itu untuk meminimalisirkan ruang posting dan untuk membuat konten walaupun banyak photo namun hasilnya agar tetap terlihat sejajar dan rapi maka perlu untuk mengatur photo tersebut supaya tidak terlihat berantakan saat terposting di blog. Berikut adalah tutorial membuat Simple Gallery Photo di Blog secara mudah dan singkat:

1. Login ke akun blogger.
2. Lalu klik Entri Baru, kemudian copy kode berikut ini lalu paste di kolom posting mode HTML.

<style type="text/css">
.gallery {
margin: auto;
}
.gallery-item {
float: left;
margin-top: 0px;
text-align: center;
width: 50%; }
.gallery img {
border: 2px solid #cfcfcf;
}
.gallery-caption {
margin-left: 0;
}
</style>
<br />
<div class="gallery snap_nopreview">

<dl class="gallery-item">
<dt class="gallery-icon">
<img class="attachment-thumbnail" height="250" src="URL GAMBAR" width="230" />
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<img class="attachment-thumbnail" height="250" src="URL GAMBAR" width="230" />
</dt>
</dl>

<br style="clear: both;" />
<dl class="gallery-item">
<dt class="gallery-icon">
<img class="attachment-thumbnail" height="250" src="URL GAMBAR" width="230" />
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<img class="attachment-thumbnail" height="250" src="URL GAMBAR" width="230" />
</dt>
</dl>
</div>

Keterangan:

• Ganti tulisan warna merah dengan URL Gambar yang di inginkan.
• Height dan Width silahkan sesuaikan dengan yang di inginkan.
• Jika ingin menambah gambar lebih banyak lagi, copy kode berikut ini kemudian taruh sebelum kode </div>

<dl class="gallery-item">
<dt class="gallery-icon">
<img class="attachment-thumbnail" height="250" src="URL GAMBAR" width="230" />
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<img class="attachment-thumbnail" height="250" src="URL GAMBAR" width="230" />
</dt>
</dl>

<br style="clear: both;" />
<dl class="gallery-item">
<dt class="gallery-icon">
<img class="attachment-thumbnail" height="250" src="URL GAMBAR" width="230" />
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<img class="attachment-thumbnail" height="250" src="URL GAMBAR" width="230" />
</dt>
</dl>