Cara Membuat Galeri Foto di Postingan Blog [Versi 3 Kolom dengan Caption]


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. 

Foto-foto di galeri bisa ditampilkan dengan atau tanpa keterangan (caption) di bawahnya. Tergantung selera dan kebutuhan. Jika tulisan di postingan di blog sudah cukup menjelaskan foto-foto yang ditampilkan di galeri, maka bisa saja foto-foto di galeri tidak perlu diberi keterangan atau caption. Namun jika foto-foto perlu diberi keterangan agar lebih jelas atau supaya menarik mata (eye-catching), maka gunakanlah caption di galeri foto di postingan blog

Di bawah ini adalah contoh penggunaan caption di 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>
<div class="desc">CAPTION 1</div>
</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>
<div class="desc">CAPTION 2</div>
</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>
<div class="desc">CAPTION 3</div>
</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>
<div class="desc">CAPTION 4</div>
</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>
<div class="desc">CAPTION 5</div>
</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>
<div class="desc">CAPTION 6</div>
</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).
  5. CAPTION: diganti dengan teks singkat untuk keterangan foto.

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>
<div class="desc">DESAIN MEJA KERJA 1</div>


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>
<div class="desc">DESAIN MEJA KERJA 1</div>


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>
<div class="desc">CAPTION</div>
</dt>
</dl>

Tidak ada komentar: