Cara Mudah Membuat Galeri Foto di Postingan Blog


Cara Membuat Galeri Foto di Postingan Blog — Galeri foto di postingan blog gunanya untuk menampilkan banyak foto sekaligus tanpa membuat pembaca harus menggulir (scroll) postingan yang panjang dan bikin lambat.

Galeri foto bisa dimanfaatkan untuk menyajikan foto-foto perjalanan, visualisasi daftar keinginan (bucket list), portfolio atau hasil karya lainnya dalam satu postingan blog. Selain itu, galeri foto juga bisa dipakai untuk menautkan (link) antar postingan. 

Di bawah ini adalah contoh galeri foto di postingan blog.





Cara membuat galeri foto di postingan blog sebagai berikut:

  1. Login ke blog Anda.
  2. Buat posting dengan menu Postingan > Entri baru.
  3. Pindahkan dari menu "Compose" ke "HTML".
  4. Copy kode di bawah ini, lalu paste di bagian entry HTML

<div class="snap_preview">
<style type="text/css">.gallery{margin:auto;}.gallery-item{float:left; width:33%;} .gallery-caption { margin-left: 0; }</style>
<div class="gallery snap_nopreview">
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="LINK" target="_blank">
<img border="0" height="150" src="URL IMAGE ANDA" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="LINK" target="_blank">
<img border="0" height="150" src="URL IMAGE ANDA" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="LINK" target="_blank">
<img border="0" height="150" src="URL IMAGE ANDA" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="LINK" target="_blank">
<img border="0" height="150" src="URL IMAGE ANDA" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="LINK" target="_blank">
<img border="0" height="150" src="URL IMAGE ANDA" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="LINK" target="_blank">
<img border="0" height="150" src="URL IMAGE ANDA" width="200" /></a>
</dt>
</dl>
</div>
</div>


Teks yang berwarna merah di kode di atas, bisa diedit sesuai kebutuhan:
  1. Width:33% menampilkan foto dalam 3 kolom (100/3). Untuk menampilkan 4 kolom, angka 33% diganti dengan 25% (100/4). Untuk menampikan 2 kolom diubah menjadi 50% (100/2). 
  2. LINK: Jika foto akan ditautkan ke posting atau halaman lain, maka LINK diganti dengan alamat URL yang dituju. Jika tidak ingin ditautkan ke posting atau halaman lain, maka silakan ganti LINK dengan  URL IMAGE ANDA.
  3. 150 & 200 merupakan ukuran tinggi dan lebar foto. Ukuran ini bisa diganti sesuai selera.
  4. URL IMAGE ANDA: masukan URL foto Anda yang sudah diunggah (upload).

Contoh mengganti LINK yang akan ditautkan ke posting atau halaman lain, dan mengganti URL IMAGE ANDA dengan URL foto yang sudah diunggah:

<dt class="gallery-icon"><a href="http://rianapuspasari.blogspot.com/" target="_blank">
<img border="0" height="150" src="https://1.bp.blogspot.com/-ef0G2esZ4KI/Xhc7teM4EtI/AAAAAAAA6xs/R61dUFP7KVQNm2WsQzmouc6_z6UHgHXXACLcBGAsYHQ/s1600/Foto%2B1.jpg" width="200" /></a>


Contoh mengganti LINK jika tidak ditautkan ke posting lain, dan mengganti URL IMAGE ANDA dengan URL foto yang sudah diunggah:

<dt class="gallery-icon"><a href="https://1.bp.blogspot.com/-ef0G2esZ4KI/Xhc7teM4EtI/AAAAAAAA6xs/R61dUFP7KVQNm2WsQzmouc6_z6UHgHXXACLcBGAsYHQ/s1600/Foto%2B1.jpg" target="_blank">
<img border="0" height="150" src="https://1.bp.blogspot.com/-ef0G2esZ4KI/Xhc7teM4EtI/AAAAAAAA6xs/R61dUFP7KVQNm2WsQzmouc6_z6UHgHXXACLcBGAsYHQ/s1600/Foto%2B1.jpg" width="200" /></a>


Setelah selesai mengganti kode, cek ulang LINK dan URL IMAGE ANDA. Selanjutnya lakukan pratinjau sebelum mempublikasikannya. Jika hasil galeri foto pada pratinjau sudah sesuai keinginan, maka silakan mempublikasinnya.

Untuk menambahkan foto di galeri, silakan copy kode di bawah ini lalu paste di bawah kode tadi:

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

Tidak ada komentar: