Cara Membuat Galeri Foto Scroll di Blog/Website

Ngopi sadayana! 😎

Sebelumnya saya sudah posting “Cara Membuat Galeri Foto dengan Style Grid”. Sekarang saya akan berbagi bagaimana cara membuat galeri foto dengan fitur scroll di Blog/website. Tips–nya hampir sama, namun dengan tampilan yang berbeda.

Jadi ya! Menulis di blog itu tidak sebatas menulis, apalagi hanya copy paste. Kadang pemilik blog juga perlu berkreasi untuk optimasi pada website. Seperti halnya membuat galeri foto scroll di Blog.

Meskipun konten artikel kita biasa-biasa saja, namun jika kita sajikan dengan memperhatikan tampilan publikasinya. Misalnya dengan cara membuat galeri foto scroll di Blog. Setidaknya halaman postingan akan terlihat tertata rapi dan simple.

Anyway.. penataan foto atau gambar di artikel blog memang merupakan salah satu poin penting. Itu sudah pasti karena gambar dapat menjelaskan topik yang ada dalam artikel.

Namun seperti yang sudah dibahas di posting sebelumnya, jika kita meng–upload foto lewat fitur “insert image” bawaan theme platform blog. Maka penataan gambar tampak masih sangat sederhana, yang mana gambar akan tampil satu per satu tiap bidangnya. Gambarnya ikut–ikutan social distancing deng!

Terlebih lagi apabila gambar yang di–upload banyak. Nggak resep rasanya kalau melihat tampilan blog seperti itu, yang gambarnya “kaku” kyak tentara Kor-Ut. 😁

Selain merepotkan pengunjung, hal ini tentu saja membuat area postingan jadi banyak yang terbuang. Terdapat ruang kosong yang sebenarnya bisa kita optimalkan untuk informasi lainnya.

And you know that.. kasus seperti itu masih kerap saya temukan ketika sedang melakukan tour blog walking.

Tapi jika blog sobat termasuk seperti yang barusan saya nyinyirin, jangan langsung prustasi. Masih banyak jalan menuju Roma. Yepz! Masih ada tips bagaimana cara agar bisa upload foto dengan jumlah banyak sekaligus namun blog tetap terlihat unik dan ketjehh.

Masalah tersebut bisa diatasi dengan cara menggunakan kode script HTML fitur scrolling yang biasa dipakai untuk “Membuat Kotak Scroll di Blog”. Sehingga foto di dalam kotak bisa di–scroll vertikal dan horizontal (bisa diatur).

Contoh, di sini saya membuat galeri foto scroll vertikal dengan mengisi beberapa capture “Destinasi Wisata Danau Toba”.

*Silahkan scroll gambar naik turun (Atas – Bawah)

Destinasi Wisata Danau Toba

Welcome to Lake Toba

Parapat

Danau Toba Cottage

Simarjarunjung

Simarjarunjung

Geosite Sipinsur

Pusuk Buhit

Pusuk Buhit

Paropo

Paropo

Paropo

Paropo

Paropo

Siadtaratas - Dairi

Siadtaratas - Dairi

Bukit Holbung

Menara Pandang Tele - Samosir

Air Terjun Efrata

Sungai Situmurun (Binanga LOM)

Binanga LOM

Air terjun Situmurun

Bukit Gajah Bobok

Tutorial cara membuat galeri foto scroll di blog/website ini, recommended bagi sobat yang menjadikan situsnya sebagai tempat untuk membagi hasil karya gambar berupa kumpulan foto. Seperti foto dokumentasi acara seremonial, kuliner, fashion atau travelling.

Kumpulan foto tersebut dapat dijadikan untuk menarik perhatian pengunjung. Nilai-nilai estetika pada gambar tersebut tentu saja akan memberikan nilai lebih kepada pemilik blog.

Dengan cara membuat galeri foto scroll di Blog, kita bisa memilih dan menggabungkan beberapa gambar yang berhubungan di dalam satu tempat/kotak. Sehingga lebih menarik untuk dipandang.

Contoh lain, di sini saya membuat galeri foto scroll horizontal dengan mengisi beberapa gambar “Masakan Favorit Khas Batak Toba”

*Silahkan scroll gambar ke samping (Kiri – Kanan)

 

Keunikan membuat galeri foto scroll di Blog yaitu artikel akan lebih simple dan berisi (tidak boros area postingan), tidak membosankan, tentu saja Blog akan tampil beda.

Kita juga bisa lebih leluasa menulis konten tanpa terganggu dengan foto-foto di artikel blog, maka akan membuat para pengunjung blog kita ikut lebih meresapi dan bisa mem-visualisasikan perjalanan saat travelling dan suasana tempat yang kita kunjungi.

So, seandainya sobat kurang tertarik dengan galeri foto dengan style grid. Mungkin sobat bisa mencoba cara membuat galeri foto scroll di Blog/website.

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

Bagaimana cara membuat galeri foto dengan fitur scroll di Blog/Website?

Berikut ini cara membuat galeri foto dengan fitur scroll di Blog. 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 di laman kerja sobat (masih di mode HTML lho)

Script code –nya :

 

<div style="text-align: center;">
<a href="Link Anda" target="_blank">
<span style="font-size: x-small;"> My Galery </span></a>
</div>
<br /><div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: #1780dd; border: 5px solid gold; height: 150px; overflow: auto; padding: 10px; text-align: center; width: auto;"> Upload gambar anda di sini..! </div></div>

Keterangan script code di atas :

• background-color : warna kotak galeri, silahkan diganti dengan warna kesukaan sobat (boleh pakai nama warna, kode warna/ hexadesimal, atau RGB / red-green-blue)
• height : tinggi kotak galeri (bisa diatur)
• width : lebar kotak galeri (bisa diatur), upayakan jangan melebihi lebar area konten
• border : garis border kotak galeri (warna dan ketebalan bisa diatur). 

Dan kalau sudah di terapkan kode script –nya pada mode HTML, Selanjutnya...!

5. Kembali ganti mode penulisan dari “HTML” menjadi "Compose", maka dari kode script yang telah terpasang tadi, akan tampil kotak galeri foto scroll kurang lebih hasilnya seperti ini :

My Galery

Upload gambar anda di sini..!

6. Edit tulisan “Upload gambar anda di sini..!”, ganti dengan meng-upload beberapa foto sobat yang mau dimasukan dalam kotak galeri (pastikan sobat meng–upload foto di dalam kotak).

Sampai disini selesai dalam pembuatan galery foto scrolling. Sebelum di publish, silahkan klik “Pratinjau”. Kalau hasilnya sudah sesuai dengan keinginan sobat. Silahkan dipublikasikan. DONE

Saya yakin caranya mudah dan pasti berhasil dalam membuat galeri foto dengan fitur scroll di blog/website. Selamat mencoba!

Demikian pembahasan mengenai cara membuat galeri foto dengan fitur scroll di Blog/Website. Semoga bermanfaat bagi sobat khususnya newbie. Terima kasih

See you on top.. :)

Nite & GBU more. Bye..!!