Membuat kamus online via Google Sheet

Metode membuat halaman atau postingan Kamus Interaktif dengan Kolom PencarianJika Anda ingin pengunjung bisa mengetikkan kata di kolom pencarian dan langsung menemukan artinya (seperti kamus pada umumnya), Anda perlu memanfaatkan Google Apps Script.

1. Siapkan Google Sheet:
   • Buat spreadsheet dan beri nama judul kolom: Kata di sel A1 dan Arti di sel B1. Isi kosakata dan artinya di baris-baris bawahnya.
2. Buat Script Pencarian:
   • Klik menu Ekstensi > Apps Script.
   • Hapus kode yang ada, lalu masukkan kode script di bawah ini:
   function doGet(e) {
     return HtmlService.createHtmlOutputFromFile('Index')
       .setTitle('Kamus Online');
   }
   function cariKata(keyword) {
     var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
     var data = sheet.getDataRange().getValues();
     var hasil = [];
     
     for (var i = 0; i < data.length; i++) {
       if (data[i][0].toString().toLowerCase() == keyword.toLowerCase()) {
         hasil.push(data[i][1]);
       }
     }
     
     if (hasil.length > 0) {
       return hasil.join(", ");
     } else {
       return "Kata tidak ditemukan dalam kamus.";
     }
   }
   
   
   • Klik ikon Simpan (ikon disket) dan beri nama proyek Anda.
3. Buat Tampilan Web (HTML):
   • Di panel kiri Apps Script, klik tombol + (Tambahkan file) dan pilih HTML. Beri nama file tersebut: Index.
   • Masukkan kode HTML berikut ke dalam file Index.html
     <!DOCTYPE html>
     <html>
     <head>
       <base target="_top">
       <style>
         body { font-family: Arial, sans-serif; text-align: center; padding: 50px; background-color: #f9f9f9; }
         .container { background: white; padding: 30px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); max-width: 500px; margin: auto; }
         input[type="text"] { width: 70%; padding: 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 5px; }
         button { padding: 10px 20px; font-size: 16px; background-color: #4285f4; color: white; border: none; border-radius: 5px; cursor: pointer; }
         button:hover { background-color: #357ae8; }
         #hasil { margin-top: 20px; font-size: 18px; font-weight: bold; color: #333; }
       </style>
     </head>
     <body>
       <div class="container">
         <h2>Kamus Online</h2>
         <input type="text" id="kata" placeholder="Ketik kata yang dicari...">
         <button onclick="cari()">Cari</button>
         <div id="hasil"></div>
       </div>
       <script>
         function cari() {
           var keyword = document.getElementById('kata').value;
           google.script.run.withSuccessHandler(function(response) {
             document.getElementById('hasil').innerHTML = response;
           }).cariKata(keyword);
         }
       </script>
     </body>
     </html>
   • Simpan kembali file tersebut.
4. Deploy sebagai Web App:
   • Di sudut kanan atas Apps Script, klik Deploy > New deployment.
   • Pilih tipe Web app.
   • Pada Execute as, pilih Me (Saya). Pada Who has access, pilih Anyone (Siapapun). Klik Deploy.
   • Salin URL Web App yang diberikan (URL ini memiliki akhiran /exec)
5. Pasang di Blogger:
   • Masuk ke Blogger, buat postingan atau halaman statis baru.
   • Anda tidak perlu menampilkannya via Iframe karena web app Google bisa diakses secara langsung. Namun, jika Anda ingin menyematkannya di dalam blog Anda, gunakan format kode iframe seperti pada metode pertama namun masukkan URL Web App Google Anda sebagai sumbernya.

Islamic Program
Sabtu, 01 Agustus 2026

Artikel Terkait