Cara Membuat Galeri/Album Foto di Blog

Mebuat Album Foto di Blog

Seperti yang kita ketahui bersama, di Platform Blogger ketika Upload Gambar maka posisi gambar otomatis berada ditengah, tidak berdampingan, tersusun ke bawah. Sehingga tidak menghemat ruang kosong yang ada, terlebih lagi apabila Gambar yang diupload banyak 😅 Repot deh harus scroll ke bawah. Menyusahkan visitor anda saja. Oleh karena itu, kali ini kita akan Belajar Membuat Galeri/Album Foto di Blog tanpa Kode-kode rumit yakni menggunakan 2 fitur yang pertama menggunakan Fitur Embed dari Google Drive dan yang kedua menggunakan Kode HTML yang langsung di Copy+Pastekan di Postingan/Halaman Blog anda. Penasaran ingin membuatnya? Simak dan ikuti tutorial berikut di bawah ini.

Embed Folder Google Drive sebagai Galeri Foto di Blog

1. Mengambil Link G-Drive 

Klik kanan pada Folder - Klik Bagikan - Pilih Bagikan - lalu pada bagian Akses Umum Klik kata Dibatasi dan Pilih Siapa saja yang memiliki link. Contoh : https://drive.google.com/drive/u/3/folders/1VahYyVwNJj4JhJqoxkQbFuYLmp_GCfMN

Kita cukup mengambil bagian ID nya saja, yaitu 1VahYyVwNJj4JhJqoxkQbFuYLmp_GCfMN

2. Silahkan Paste ID kalian ke kode di bawah ini.

A. Tampilan Dasar/List

1. Login di blogger.com
2. Buat Halaman Baru
3. Pilih mode "HTML"
4. Masukan (copy paste) script code di bawah ini :

<iframe src="https://drive.google.com/embeddedfolderview?id=ID_Folder_Kalian" width="100%" height="500" frameborder="0"></iframe>

Penjelasan : Script Di atas akan menampilkan Foto di Google Drive secara List.
Keterangan Script : Ganti kata ID_Folder_Kalian dengan ID link G-Drive kalian

Demo

B. Tampilan Grid

1. Login di blogger.com
2. Buat Halaman Baru
3. Pilih mode "HTML"
4. Masukan (copy paste) script code di bawah ini :

<iframe src="https://drive.google.com/embeddedfolderview?id=ID_Folder_Kalian#grid" width="100%" height="500" frameborder="0"></iframe>

Penjelasan : Script Di atas akan menampilkan Foto di Google Drive secara List.
Keterangan Script : Ganti kata ID_Folder_Kalian dengan ID link G-Drive kalian

Demo

Cara Membuat Album/Galeri Foto dengan Code HTML

Berikut langkah – langkahnya :

1. Login di blogger.com
2. Buat Halaman Baru
3. Pilih mode "HTML"
4. Masukan (copy paste) script code di bawah ini :

Penjelasan : Script kode diatas akan menampilkan 3 gambar sejajar horisontal. Jika ingin menampilkan lebih dari 3 gambar, maka copy paste kode di atas dengan dikasi jarak dengan kode <br/> di bawah kode </table>

Keterangan Script :<td align="center" width="33%"><a href="Link Gambar" target="_blank"><img src="URL Gambar di Sini"/><br>Nama Gambar</a></td>

33% = merupakan pembagian dari 100%
Link Gambar = ganti dengan link yang ingin dituju ketika di-klik
URL Gambar di Sini = ganti dengan link gambar yang sudah di-upload
Nama Gambar = isi keterangan judul atau caption

Demo