Cara Membuat Galeri Foto di Blog/Website

Sebelumnya saya sudah posting mengenai “Cara Membuat Kotak Script di Postingan Blog” dengan berbagai versi.

Sekarang saya akan lanjut ke topik pembahasan baru yaitu, bagaimana cara membuat galeri foto di Blog/Website dengan style grid.

Tutorial cara membuat galeri foto di blog/website ini, sangat recommended bagi teman yang hobi di bidang OLShop alias jualan online. Terutama untuk display produk.

Menariknya tips ini juga berlaku bagi yang maniak selfi. Makanya dibaca sampai selesai yah, karena ini penting banget lho!

Well! Sebagai Author, ada banyak cara yang bisa kita lakukan untuk optimasi pada website. Salah satunya mempercantik tampilan blog, dengan cara membuat galeri foto di blog/website.

Membuat galeri foto di blog sangat perlu diperhatikan. Sama halnya seperti tulisan, gambar atau foto juga memiliki peran penting untuk meningkatkan kualitas konten.

Bahkan banyak opini yang mengatakan bahwa sebuah gambar jauh lebih menarik perhatian daripada sebuah teks. Makanya nggak usah herman kalau netizen +62 suka bilang “nggak ada gambar = Hoax”. Cerdas!!

Melihat pertimbangan itu, dengan cara membuat galeri foto di blog. Maka artikel akan lebih informatif sehingga bisa meningkatkan daya tarik pengunjung dan tentunya mereka akan menyukainya.

Meng-upload foto atau gambar di postingan blog, bukan perkara yang sulit. Seperti yang kita tahu secara default, platform seperti blogspot, wordpress dan website lainnya masing-masing theme sudah menyediakan fitur "insert image".

Namun jika kita menggunakan cara ini, maka hasilnya hanya akan menyisipkan satu gambar per paragraf. Tak ada opsi lain, selain tata letak gambar (kanan, kiri dan tengah). Artinya gambar secara otomatis berderet memanjang ke bawah dan tidak mau gandengan. *Tjaahh

Kalau hanya meng-upload 1 – 3 foto mungkin tidak terlalu kentara, tapi bagaimana dengan jumlah yang banyak. Wuah bisa gempor deng!

Nah untuk memecahkan masalah tersebut, kita bisa dengan cara membuat galeri foto di blog/website dengan style grid. Sehingga ketika kita memasukan banyak foto sekaligus di dalam sebuah postingan, maka grid akan menampilkan foto di dalam kotak – kotak yang tersusun rapi sedemikian rupa.

Galeri foto style grid

Sebagai contoh mungkin sobat bisa lihat interface di Instagram, Marketplace atau OLShop seperti : bukalapak, tokopedia, dan sejenisnya. Biasanya di sana sobat akan menemukan display produk berupa foto/gambar yang disusun rapi di dalam tiga baris – kolom dan memanjang ke bawah.

Umumnya pula foto/gambar yang ditampilkan akan lebih kecil dari aslinya, namun jika diklik akan menampilkan gambar secara penuh atau bahkan langsung menuju link tertentu (bisa diatur).

Sedangkan untuk blog personal, konsep grid ini bisa kita gunakan untuk memajang rangkaian foto selfi, foto dokumentasi acara seremonial atau perjalanan wisata, dan karya lainnya. Sehingga tampilan blog akan terlihat lebih profesional.

Nah beda caranya meng-upload foto dengan fitur "insert image" bawaan platform. Cara membuat galeri foto di blog/website kita memerlukan keterampilan khusus agar tampilan foto-foto tersebut menjadi menarik, yaitu dengan menambahkan kode script-nya secara manual ke bagian HTML pada postingan.

OK then, let's get started.. :)

Bagaimana cara membuat galeri foto di Blog/Website??

Berikut cara membuat galeri foto di blog/website. Silahkan ikuti step by step- nya :

1. Masuk ke Dashboard

2. Buat Posting/New Entry

3. Ganti mode penulisan dari “Compose” menjadi “HTML”

4. Copy script code di bawah ini, dan Paste-kan pada laman kerja sobat (masih di mode HTML lho). 

Script code -nya :

<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 gambar1" target="_blank"><img border="0" height="200" src="URL gambar1" width="150" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="Link gambar2" target="_blank"><img border="0" height="200" src="URL gambar2" width="150" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="Link gambar3" target="_blank"><img border="0" height="200" src="URL gambar3" width="150" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="Link gambar4" target="_blank"><img border="0" height="200" src="URL gambar4" width="150" /></a>
</dt></dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="Link gambar5" target="_blank"><img border="0" height="200" src="URL gambar5" width="150" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="Link gambar6" target="_blank"><img border="0" height="200" src="URL gambar6" width="150" /></a>
</dt>
</dl>
</div>
</div>

Keterangan script code di atas :

*Perhatikan tulisan berwarna merah!

• 33 % : tampilan gambar berjajar sebanyak 3 (100/3), jika ingin berjajar 4 (100/4) diubah jadi 25%, atau jika ingin berjajar 2 diubah jadi 50%.
• “150”dan“200” : lebar dan tinggi gambar (bisa diatur). Silahkan sesuaikan dengan keinginan sobat, dan upayakan jangan melebihi lebar area konten.
• URL gambar : ganti dengan URL gambar.
• Link gambar : ganti dengan link gambar (jika tidak ada cukup masukkan URL gambar) 

5. Sebelum dipublish, silahkan klik “Pratinjau” untuk memastikan script sudah berjalan. Kalau hasilnya telah sesuai dengan keinginan sobat, silahkan publikasikan. DONE

Sekarang lihat hasilnya *Jrenjengjreng!!!

Jika sobat ingin menambah foto, silahkan copy script code di bawah ini, lalu paste-kan tepat di bawah  </dl> 

 

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

Selanjutnya! Jika sobat ingin menulis konten penjelasan galeri foto tersebut. Silahkan kembali ganti mode penulisan dari “HTML” menjadi “Compose”. Lalu tulis konten seperti biasa sampai selesai. Sebelum dipublikasikan, jangan lupa di simpan dulu ya, nanti capek lagi ngetiknya. 😊

Kalau sudah paham kode script-nya, bisa kita modifikasi sendiri. Misalnya kalau galeri foto di atas saya modif dengan menggunakan “Caption” dan “Link”. Sehingga ketika foto di bawah ini di-klik, maka akan menuju halaman baru.

Lihat hasilnya! *Jrenjengjreng!!!

Espresso

Kati-kati

Kopi Sumatra

Atau siapa tahu gitu ada yang mau nyoba bagaimana cara membuat galeri foto di blog/website, seperti punya miminho di bawah ini.

Lihat hasilnya! *Jrenjengjreng lagi. Ah.. stop it you! 😆

Nah kira-kira seperti itu cara membuat galeri foto di Blog. Silahkan sobat berkreasi sendiri, mainkan proferti di CSS -nya. K(e)reatifitas setiap insan manusia itu kan berbeda - beda.

⚠ Saran : Agar tidak acak – acakan! Sebaiknya terlebih dahulu buat galeri foto (album), selanjutnya tulis konten.

Omong-omong tutorial cara membuat galeri foto di blog/website ini tidak hanya berlaku di platform blog ya. Kalau sudah ngerti sih, tips ini juga bisa kok diterapkan pada website yang di design sendiri. Seperti galeri foto untuk display product punya miminho (Lihat capture paling atas).

Demikian pembahasan tentang cara membuat galeri foto di Blog/Website, semoga bermanfaat khususnya bagi sobat newbie. Selamat mencoba!

Oh iya, seandainya sobat kurang tertarik dengan galeri foto dengan style grid. Mungkin sobat bisa mencoba “Cara Membuat Galeri Foto dengan Fitur Scroll”. Terima kasih

See you on top.. :)

Nite & GBU more. Bye..!!