Setup FrontEnd Submission: Memasang Formulir Penulis Tamu di Blogger
BeniSubianto.web.id - Mesin sudah menyala, database sudah siap, dan API sudah terhubung. Sekarang, kita butuh "wajah" agar penulis tamu bisa berinteraksi dengan sistem canggih yang sudah Anda bangun. Kita tidak mungkin meminta penulis tamu mengirim artikel lewat coding, bukan?
Di artikel ini, kita akan memasang Formulir Submission di halaman blog Anda. Kode yang disertakan dalam email pendaftaran adalah paket lengkap: sudah berisi desain (CSS), kerangka formulir (HTML), dan otak pengirim (JavaScript).
Persiapan: Ambil URL Web App Anda
Sebelum mulai, buka kembali catatan dari Artikel Cara Deploy Appscript. Anda membutuhkan URL Web App yang berakhiran /exec. URL inilah jembatan penghubung antara formulir di blog dengan skrip di server Google.
Langkah 1: Membuat Halaman Baru di Blogger
Kita akan menaruh formulir ini di halaman statis (Page), bukan di postingan artikel biasa.
- Login ke dashboard Blogger Anda.
- Di menu sebelah kiri, klik Halaman (Pages).
- Klik tombol + Halaman Baru (+ New Page).
- Beri judul halaman, misalnya: "Kirim Tulisan" atau "Guest Post".
Langkah 2: Masuk ke Mode HTML (Wajib!)
Ini kesalahan yang paling sering terjadi. Blogger secara default menggunakan mode "Tampilan Menulis" (Compose View) yang mirip Microsoft Word. Kita harus mengubahnya karena kita akan memasukkan kode mentah.
- Lihat di pojok kiri atas area editor, ada ikon pensil atau tanda kurung siku
<>. - Klik ikon tersebut dan pilih Tampilan HTML (HTML View).
- Hapus semua kode bawaan yang mungkin ada di sana (biasanya ada sisa
<div>...). Pastikan layar editor kosong bersih.
Langkah 3: Konfigurasi Kode FrontEnd
Sekarang, ambil kode panjang yang saya berikan di atas (mulai dari <style> sampai </script> paling bawah).
TAPI TUNGGU! Jangan langsung di-publish. Ada satu baris yang harus Anda edit agar formulir ini tersambung ke akun Anda.
- Salin (Copy) semua kode tersebut dan tempel (Paste) ke editor Blogger.
- Gulir (scroll) ke bagian paling bawah kode.
- Cari tulisan:
const CONFIG = { - Di bawahnya, Anda akan melihat baris:
const CONFIG = { // GANTI URL INI DENGAN HASIL DEPLOY ANDA WEBAPP_URL: 'https://script.google.com/macros/s/xxx.../exec', MAX_IMAGE_SIZE: 150 * 1024, MIN_WORD_COUNT: 350, MAX_WORD_COUNT: 1000 }; - Ganti URL contoh tersebut dengan URL Web App milik Anda sendiri.
- Ganti juga API TinyMCE dengan milik Anda, jika belum ada silahkan baca Artikel Cara Daftar dan Mendapatkan API TinyMCE.
<script referrerpolicy="origin" src="https://cdn.tiny.cloud/1/KODE-API-ANDA/tinymce/6/tinymce.min.js"></script> <script> - Pastikan tanda petik (
') di awal dan akhir URL tetap ada, dan jangan menghapus koma (,) di belakangnya. - Atur juga ukuran maksimal gambar (default 150KB), minimal dan maksimal kata dalam artikel.
Langkah 4: Pengaturan Halaman (Opsional)
Di menu sebelah kanan editor Blogger:
- Opsi (Options): Pilih "Jangan izinkan komentar" (Do not allow comments). Kita tidak butuh kolom komentar di halaman formulir.
- Sesuaikan Label: Jika.anda ingin mengubah label default Form, cari bagian ini didalam script FrontEnd
<select class="form-control" id="articleCategory" required=""> <option disabled="" selected="" value="">--Pilih Kategori--</option> <option value="Teknologi">Teknologi</option> <option value="Bisnis">Bisnis</option> <option value="Kesehatan">Kesehatan</option> <option value="Edukasi">Edukasi</option> <option value="Gaya Hidup">Lifestyle</option> <option value="Tips dan Trik">Tips dan Trik</option> <option value="Blogging">Blogging</option> <option value="Kuliner">Kuliner</option> </select>
value="..." dengan nama Label baru Anda (WAJIB). Jika ingin tambah label baru, copy seluruh tag <option> dan paste dibawahnya sebelum tag </select>.
Langkah 5: Terbitkan dan Uji Coba
Klik tombol oranye Publikasikan (Publish) di pojok kanan atas. Konfirmasi jika diminta.
Sekarang, buka halaman tersebut di tab baru ("Lihat Blog"). Anda akan melihat formulir yang rapi lengkap dengan kolom Nama, Email, Judul, Kategori, Upload Gambar, dan Editor Teks.
Lakukan Tes Kirim:
- Coba isi formulir tersebut selayaknya Anda adalah penulis tamu.
- Upload gambar tes (kecil saja).
- Klik tombol Kirim Artikel.
- Tunggu Toast notifikasi muncul.
Jika muncul pesan sukses berwarna hijau, selamat! Artikel tes Anda sekarang seharusnya sudah masuk ke DraftPost Manager dan gambar Anda sudah masuk ke Google Drive. Anda juga mungkin menerima email notifikasi jika script backend sudah diatur untuk mengirim email.
Sistem inti sudah selesai! Namun, ada satu tips pro terakhir. Saat ini gambar diupload ke Drive pribadi. Bagaimana caranya agar gambar tersebut bisa tampil cepat di blog selayaknya CDN (Content Delivery Network)? Mari kita bahas trik pamungkas di artikel selanjutnya.
