» » » Cara Membuat Widget Galeri Gambar Responsive Berbasis Google Drive & Apps Script (Gratis & Ringan!)

Cara Membuat Widget Galeri Gambar Responsive Berbasis Google Drive & Apps Script (Gratis & Ringan!)

Halo sobat blogger! Pernah gak sih Anda merasa dilema saat ingin membuat artikel penuh gambar atau halaman portofolio, tapi takut performa blog jadi lemot? Ditambah lagi, kuota penyimpanan hosting atau Blogger Anda makin menipis.

Tenang, ada solusi cerdas untuk masalah ini: Memanfaatkan Google Drive sebagai storage gambar dan Google Apps Script sebagai mesin penarik datanya!



Di artikel tutorial ini, kita akan belajar langkah demi langkah cara membuat widget galeri gambar yang responsive, modern, dan pastinya 100% gratis. Yuk, siapkan kopi Anda dan mari kita mulai!

Mengapa Memilih Google Drive & Apps Script?

Sebelum masuk ke tutorial, mungkin Anda bertanya-tanya, "Kenapa harus pakai cara ini?" Ini dia beberapa keuntungan utamanya:

  • Hemat Penyimpanan: Gambar tidak membebani server hosting atau kuota Blogger Anda.

  • Gratis & Kuat: Infrastruktur Google terkenal sangat stabil dan memiliki uptime tinggi.

  • Otomatisasi: Sekali pasang, Anda cukup memasukkan gambar baru ke folder Google Drive, dan galeri di blog akan terupdate otomatis tanpa perlu edit kode HTML lagi!

Langkah 1: Menyiapkan Folder di Google Drive

Langkah pertama yang harus kita lakukan adalah menyiapkan tempat penyimpanan gambarnya.

  1. Buka Google Drive Anda.

  2. Buat sebuah folder baru, beri nama (misalnya: Galeri Blog).

  3. Masuk ke folder tersebut, lalu klik kanan pada nama folder di bagian atas > pilih Bagikan (Share).

  4. Ubah akses umum dari Dibatasi menjadi Siapa saja yang memiliki link (Anyone with the link) sebagai Pelihat (Viewer). Ini penting agar gambar bisa muncul di blog Anda.

  5. Salin ID Folder Anda. ID ini adalah deretan huruf dan angka acak yang ada di URL browser Anda setelah bagian folders/.

    Contoh: jika URL-nya [drive.google.com/drive/folders/1A2B3C4D5E](https://drive.google.com/drive/folders/1A2B3C4D5E)..., maka ID-nya adalah 1A2B3C4D5E...

Sekarang, silakan upload beberapa gambar contoh ke dalam folder tersebut.

Langkah 2: Membuat API dengan Google Apps Script

Sekarang kita akan membuat "jembatan" agar blog Anda bisa mengambil gambar dari folder Google Drive tadi.

  1. Buka Google Apps Script.

  2. Klik Project Baru.

  3. Hapus semua kode bawaan yang ada di editor, lalu copy-paste kode script berikut:

JavaScript
function doGet() {
  // GANTI dengan ID Folder Google Drive Anda yang disalin tadi
  var folderId = "PASTE_ID_FOLDER_GOOGLE_DRIVE_DISINI"; 
  
  var folder = DriveApp.getFolderById(folderId);
  var files = folder.getFiles();
  var result = [];
  
  // Mengambil tipe file gambar saja
  while (files.hasNext()) {
    var file = files.next();
    var mimeType = file.getMimeType();
    if (mimeType.match(/image\/*/)) {
      result.push({
        "name": file.getName(),
        "url": "https://lh3.googleusercontent.com/d/" + file.getId()
      });
    }
  }
  
  return ContentService.createTextOutput(JSON.stringify(result))
    .setMimeType(ContentService.MimeType.JSON);
}

  1. Jangan lupa ganti teks PASTE_ID_FOLDER_GOOGLE_DRIVE_DISINI dengan ID folder Anda dari Langkah 1.

  2. Klik ikon Simpan (Save) (gambar disket).

  3. Klik tombol Terapkan (Deploy) di bagian atas > pilih Penerapan Baru (New Deployment).

  4. Klik ikon gerigi (Jenis penerapan) > pilih Aplikasi Web (Web App).

  5. Setel konfigurasinya seperti ini:

    • Jalankan sebagai: Saya (Email Anda)

    • Siapa yang memiliki akses: Siapa saja (Anyone)

  6. Klik Terapkan. Jika muncul permintaan izin akses, setujui saja (Pilih akun Google Anda -> Advanced -> Go to Untitled project (unsafe)).

  7. Setelah selesai, Salin URL Aplikasi Web yang diberikan. Simpan di notepad, kita akan butuh ini sebentar lagi.

Langkah 3: Memasang Widget Galeri di Blog (Blogger/WordPress)

Langkah terakhir adalah menampilkan galeri tersebut di halaman blog Anda. Kode di bawah ini sudah dilengkapi CSS agar tampilannya rapi dan otomatis menyesuaikan ukuran layar HP maupun laptop (responsive).

Buat artikel baru atau halaman baru di blog Anda, ubah mode editor ke Tampilan HTML (HTML View), lalu masukkan kode berikut:

HTML
<!-- Style CSS untuk Tampilan Galeri -->
<style>
  .galeri-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    padding: 10px;
  }
  .galeri-item {
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    background-color: #f9f9f9;
    height: 150px;
  }
  .galeri-item:hover {
    transform: scale(1.05);
  }
  .galeri-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  #loading-galeri {
    text-align: center;
    font-weight: bold;
    color: #666;
    padding: 20px;
  }
</style>

<!-- Elemen Tempat Galeri Muncul -->
<div id="loading-galeri">Memuat galeri foto...</div>
<div class="galeri-container" id="my-galeri"></div>

<!-- Script JavaScript untuk Memanggil Data -->
<script>
  // GANTI dengan URL Aplikasi Web dari Google Apps Script Anda
  const scriptUrl = 'PASTE_URL_WEB_APP_APPS_SCRIPT_DISINI';

  fetch(scriptUrl)
    .then(response => response.json())
    .then(data => {
      const container = document.getElementById('my-galeri');
      const loading = document.getElementById('loading-galeri');
      
      if(data.length === 0) {
        loading.innerHTML = "Tidak ada gambar di dalam folder.";
        return;
      }
      
      loading.style.display = 'none'; // Sembunyikan loading
      
      data.forEach(item => {
        const itemDiv = document.createElement('div');
        itemDiv.className = 'galeri-item';
        
        const img = document.createElement('img');
        img.src = item.url;
        img.alt = item.name;
        img.loading = 'lazy'; // Fitur SEO agar loading blog tetap cepat
        
        itemDiv.appendChild(img);
        container.appendChild(itemDiv);
      });
    })
    .catch(error => {
      console.error('Error:', error);
      document.getElementById('loading-galeri').innerHTML = "Gagal memuat galeri. Periksa konfigurasi Anda.";
    });
</script>

Catatan Penting: Jangan lupa ganti PASTE_URL_WEB_APP_APPS_SCRIPT_DISINI dengan tautan URL yang Anda dapatkan dari Langkah 2 tadi.

Simpan halaman/artikel tersebut, lalu coba lakukan Preview atau publikasikan. Selamat! Galeri gambar Anda sekarang sudah aktif.

Tips Tambahan untuk Optimasi SEO & Performa

Meskipun widget ini sudah cukup ringan, ada beberapa tips dari pengalaman saya agar performa halaman galeri Anda semakin jos di mata Google:

  1. Gunakan Fitur lazy loading: Pada kode JavaScript di atas, saya sudah menambahkan properti img.loading = 'lazy';. Ini memastikan gambar hanya di-download ketika pembaca men-scroll layar mendekati gambar tersebut.

  2. Kecilkan Ukuran Gambar: Sebelum meng-upload gambar ke Google Drive, usahakan kompres terlebih dahulu (misal menggunakan TinyPNG atau mengubah formatnya menjadi .webp). Ukuran file di bawah 200KB sangat ideal untuk web.

  3. Beri Nama File yang Jelas: Google membaca nama file gambar untuk kebutuhan SEO Gambar (Image SEO). Jadi, ganti nama file seperti IMG_20260520.jpg menjadi pemandangan-pantai-bali.jpg sebelum di-upload.

Kesimpulan

Membuat widget galeri gambar berbasis Google Drive dan Apps Script adalah trik cerdas bagi blogger untuk menghemat resource hosting sekaligus menjaga website tetap interaktif. Sekarang, setiap kali Anda ingin menambah foto ke dalam galeri blog, Anda hanya perlu memasukkannya ke folder Google Drive, dan simsalabim... blog Anda akan langsung meng-updatenya secara otomatis.

FAQ (Frequently Asked Questions)

Q: Apakah ada batasan jumlah gambar?

A: Batasan utama mengikuti kuota Google Drive gratis Anda (15GB). Namun untuk performa script, sebaiknya batasi isi satu folder sekitar 50-100 gambar agar waktu muatnya tetap instan.

Q: Gambar saya tidak muncul, apa yang salah?

A: Pastikan dua hal ini: Pertama, status folder Google Drive Anda sudah diubah menjadi "Siapa saja yang memiliki link". Kedua, saat melakukan Deploy di Apps Script, pastikan bagian "Siapa yang memiliki akses" disetel ke "Siapa saja (Anyone)".

Q: Apakah cara ini aman untuk blog?

A: Sangat aman. Kode ini hanya membaca data gambar publik yang Anda bagikan dan tidak memberikan akses ke file pribadi lain di Google Drive Anda.

Sampai jumpa di tutorial blogging berikutnya di 296 Blog. Jangan ragu buat tanya-tanya di kolom komentar kalau ada langkah yang bikin bingung ya! Happy blogging!

0 Response to "Cara Membuat Widget Galeri Gambar Responsive Berbasis Google Drive & Apps Script (Gratis & Ringan!)"

Posting Komentar

Langganan: Posting Komentar (Atom)

Postingan Populer

www.domainesia.com