Template Blogger untuk Menampilkan Aplikasi Google Apps Script dalam Iframe

Bagi pemilik website yang menggunakan Blogger, menampilkan aplikasi berbasis Google Apps Script di dalam halaman blog dapat menjadi solusi praktis untuk menggabungkan website dengan aplikasi web interaktif.

Salah satu cara yang dapat digunakan adalah dengan memanfaatkan iframe. Dengan metode ini, aplikasi Google Apps Script dapat ditampilkan secara langsung di halaman Blogger tanpa harus membuat sistem aplikasi dari awal di dalam template Blogger.

Download Template Blogger

Ingin menggunakan template Blogger Google Apps Script ini? Silakan download file template melalui Google Drive.

📥 Download Template Blogger

Apa Itu Template Blogger Google Apps Script?

Template ini merupakan template Blogger yang dirancang untuk menampilkan sebuah aplikasi web dari Google Apps Script secara penuh di dalam halaman website.

Pada bagian utama template, terdapat elemen <iframe> yang memuat alamat aplikasi Google Apps Script. Iframe tersebut dibuat memenuhi seluruh area halaman dengan lebar dan tinggi 100 persen.

Dengan pendekatan tersebut, pengunjung website dapat mengakses aplikasi melalui halaman Blogger, sementara aplikasi utama tetap dijalankan melalui Google Apps Script.

Cara Kerja Template

Secara sederhana, cara kerja template Blogger ini adalah sebagai berikut:

1. Blogger menyediakan halaman sebagai wadah aplikasi.
2. Template menyembunyikan tampilan bawaan Blogger.
3. Sebuah iframe ditempatkan pada halaman.
4. Iframe memuat aplikasi Google Apps Script.
5. Aplikasi ditampilkan memenuhi area layar pengunjung.

Kelebihan Menggunakan Template Ini

1. Tidak Perlu Membuat Hosting Sendiri

Aplikasi tetap berjalan menggunakan Google Apps Script, sedangkan Blogger digunakan sebagai halaman untuk menampilkan aplikasi tersebut.

Dengan demikian, metode ini dapat menjadi pilihan bagi pengguna yang ingin menampilkan aplikasi web tanpa harus menyediakan server hosting khusus untuk aplikasi.

2. Tampilan Lebih Sederhana

Template menghilangkan margin dan padding bawaan halaman serta menggunakan iframe dengan posisi absolut. Lebar dan tinggi iframe diatur menjadi 100% sehingga aplikasi dapat menggunakan hampir seluruh area layar.

Konsep seperti ini cocok untuk aplikasi yang membutuhkan ruang tampilan luas, misalnya:

• Dashboard
• Sistem administrasi
• Formulir online
• Aplikasi pendataan
• Sistem informasi
• Kalkulator online
• Aplikasi organisasi
• Aplikasi berbasis Google Apps Script lainnya

3. Tetap Menggunakan Blogger

Anda tidak perlu meninggalkan Blogger hanya karena ingin menampilkan aplikasi web. Blogger dapat digunakan sebagai halaman publik, sedangkan aplikasi sebenarnya tetap dijalankan melalui Google Apps Script.

Cara Menggunakan Template Blogger Google Apps Script

Untuk menggunakan template ini, Anda perlu memiliki aplikasi Google Apps Script yang sudah dipublikasikan sebagai Web App.

Setelah aplikasi selesai dibuat dan di-deploy, Google Apps Script akan memberikan URL aplikasi. URL tersebut kemudian ditempatkan pada atribut src iframe.

Contoh struktur sederhananya:

<iframe src="URL-APLIKASI-GOOGLE-APPS-SCRIPT" title="App Script Content">
  <p>Browser Anda tidak mendukung iframe.</p>
</iframe>

Pada template ini, iframe digunakan untuk memuat aplikasi Google Apps Script. URL aplikasi dapat diganti dengan URL Web App milik Anda.

Download Template Blogger

Bagi Anda yang ingin langsung mencoba template ini, file template dapat diunduh melalui Google Drive.

📥 Download Template Blogger Google Apps Script

Klik tombol berikut untuk membuka folder download.

Download Template

Pengaturan Tampilan Template

Template juga mengatur viewport agar halaman dapat menyesuaikan dengan perangkat yang digunakan pengunjung.

<meta content='width=device-width, initial-scale=1, shrink-to-fit=no' name='viewport'/>

Pengaturan tersebut membantu halaman menyesuaikan ukuran tampilan pada perangkat dengan ukuran layar yang berbeda.

Iframe pada template dibuat memenuhi area halaman menggunakan pengaturan CSS berikut:

iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

Dengan pengaturan tersebut, iframe ditempatkan mulai dari sisi kiri atas halaman dan dibuat memenuhi lebar serta tinggi area yang tersedia.

Template Ini Cocok Untuk Siapa?

Template Blogger seperti ini cocok digunakan oleh pengguna yang ingin membuat website berbasis Blogger tetapi membutuhkan tampilan aplikasi web interaktif.

Misalnya, sebuah organisasi dapat memiliki halaman Blogger sebagai alamat utama, kemudian menampilkan aplikasi pendataan anggota, dashboard kegiatan, sistem administrasi, formulir, atau aplikasi lainnya yang dibuat menggunakan Google Apps Script.

Metode ini juga dapat membantu pengguna yang ingin memanfaatkan Blogger sebagai media publikasi sekaligus menggunakan Google Apps Script sebagai platform aplikasi web.

Hal yang Perlu Diperhatikan

Meskipun penggunaannya cukup sederhana, ada beberapa hal yang perlu diperhatikan ketika menggunakan iframe untuk menampilkan aplikasi eksternal.

Pertama, aplikasi Google Apps Script harus dapat diakses sesuai dengan pengaturan deployment yang digunakan.

Kedua, performa halaman akan sangat bergantung pada aplikasi yang dimuat di dalam iframe. Blogger pada dasarnya berfungsi sebagai wadah untuk menampilkan aplikasi.

Ketiga, apabila aplikasi Google Apps Script mengalami masalah, deployment berubah, atau URL aplikasi berubah, halaman Blogger yang menggunakan iframe juga dapat terdampak.

Karena itu, pastikan URL Web App yang digunakan sudah benar dan deployment aplikasi tetap aktif.

Kesimpulan

Template Blogger ini menawarkan cara sederhana untuk menampilkan aplikasi Google Apps Script di dalam website Blogger. Konsep utamanya adalah menjadikan Blogger sebagai wrapper, sementara aplikasi utama dijalankan melalui Google Apps Script.

Dengan iframe yang dibuat memenuhi layar, template dapat digunakan untuk berbagai kebutuhan seperti dashboard, sistem informasi, formulir, aplikasi administrasi, dan aplikasi web lainnya.

Bagi pengguna Blogger yang ingin menggabungkan fleksibilitas Google Apps Script dengan kemudahan publikasi Blogger, pendekatan ini dapat menjadi salah satu solusi yang praktis.

Catatan: Jika template digunakan untuk aplikasi Anda sendiri, URL Google Apps Script pada iframe sebaiknya diganti dengan URL Web App Google Apps Script milik Anda.

---

🔗 Link Download Template:

Google Drive – Download Template Blogger Google Apps Script