Membuat Media Interaktif dengan Blogger
Cara membuat Media Interaktif di Blogger
Link Kantong Tugas :
https://forms.gle/d1AjMupqpisD1r1o9
Membuat Iklan & Media Interaktif di Blogger dengan AI Gemini
Tujuan Pembelajaran: Peserta mampu membuat blog sederhana, menghasilkan konten iklan (teks & gambar) menggunakan AI, membuat elemen interaktif berbasis HTML/JS dengan bantuan AI, dan mempublikasikannya.
BAGIAN 1: Membuat Akun & Blog Baru
Langkah awal bagi yang belum memiliki blog.
Buka browser dan kunjungi
blogger.com Klik tombol "Create your blog" (Buat blog Anda).
Login menggunakan akun Gmail/Google Anda.
Pilih Nama Blog: Masukkan judul blog (misal: Kuliner Nusantara atau nama toko Anda). Klik Berikutnya.
Pilih URL (Alamat Web): Buat alamat yang unik (misal:
ayamgeprek-budi.blogspot.com). Jika tersedia, klik Simpan/Selesai.Selamat! Dasbor Blogger Anda sudah siap.
BAGIAN 2: Membuat Narasi Iklan dengan Gemini
Kita akan menggunakan kecerdasan buatan untuk membuat copywriting yang menjual.
Buka tab baru dan akses
gemini.google.com Ketikkan Prompt (Perintah) berikut di kotak chat Gemini:
"Buatkan narasi iklan yang menarik, persuasif, dan menggugah selera untuk produk 'Ayam Geprek Pedas Suroboyo'. Sertakan judul yang catchy, deskripsi rasa pedasnya, manfaat bahan segar, dan kalimat ajakan (Call to Action) untuk memesan."
Tunggu Gemini menghasilkan teks.
Salin (Copy) hasil narasi yang menurut Anda paling bagus.
BAGIAN 3: Membuat Gambar Produk dengan Gemini
Membuat visual produk tanpa harus memotret sendiri.
Masih di Gemini, ketikkan perintah untuk membuat gambar:
"Buatkan gambar fotorealistik close-up sepiring ayam geprek dengan sambal bawang merah yang berminyak dan pedas di atasnya, disajikan dengan nasi putih hangat dan lalapan timun kemangi. Pencahayaan terang ala fotografi makanan profesional."
Gemini akan memproses dan menampilkan gambar.
Pilih gambar yang paling sesuai, klik pada gambar, lalu cari tombol Unduh (Download) atau ikon panah ke bawah untuk menyimpan gambar ke komputer/HP Anda.
BAGIAN 4: Membuat Postingan di Blogger
Menyusun teks dan gambar menjadi satu artikel.
Kembali ke dasbor Blogger.
Klik tombol (+) Postingan Baru di pojok kiri atas.
Judul: Isi judul postingan (bisa diambil dari hasil Gemini tadi).
Isi Konten: Tempel (Paste) narasi iklan yang sudah disalin dari Gemini ke kolom editor tulisan. Rapikan paragrafnya jika perlu.
Upload Gambar:
Letakkan kursor di tempat Anda ingin menyisipkan gambar.
Klik ikon Sisipkan Gambar (ikon gunung/foto) di toolbar > pilih Upload dari komputer.
Pilih file gambar ayam geprek yang tadi diunduh dari Gemini.
Pilih gambar tersebut dan klik Pilih.
BAGIAN 5: Membuat Media Interaktif (HTML Script)
Membuat fitur unik agar pengunjung bisa berinteraksi (misal: Kalkulator Harga atau Kuis).
Kembali ke Gemini. Kita akan meminta kode pemrograman.
Ketikkan Prompt berikut:
"Buatkan kode lengkap (HTML, CSS, dan JavaScript digabung dalam satu file) untuk membuat widget sederhana 'Kalkulator Estimasi Harga Ayam Geprek'.
Fiturnya:
User bisa input jumlah porsi.
User bisa pilih level pedas (Sedang, Pedas, Setan).
Ada tombol 'Hitung Total'.
Saat tombol ditekan, muncul total harga (asumsikan harga per porsi 15.000, tambah 2.000 jika level Setan).
Tampilannya buat estetik, modern, warna dominan merah cabe, dan responsif (rapi di HP)."
Gemini akan memberikan blok kode. Klik tombol Salin Kode (Copy Code) di pojok kanan atas blok kode tersebut.
BAGIAN 6: Memasang Script HTML di Blogger
Bagian teknis: Jangan sampai salah mode editor!
Kembali ke editor postingan Blogger Anda.
Lihat di pojok kiri atas toolbar editor, ada tombol dengan ikon pensil (Tampilan Menulis). Klik tombol itu dan ubah menjadi "Tampilan HTML" (HTML View).
Anda akan melihat kode-kode rumit. Jangan dihapus.
Geser ke baris paling bawah (paling akhir) dari kode yang ada.
Tekan Enter 2 kali untuk memberi jarak.
Tempel (Paste) kode script HTML/CSS/JS yang tadi disalin dari Gemini di bagian paling bawah tersebut.
(Opsional) Anda bisa kembali ke mode Tampilan Menulis untuk mengecek, tapi biasanya widget HTML hanya akan terlihat sempurna saat di-Preview atau dipublish.
BAGIAN 7: Publikasi & Pengumpulan Tugas
Langkah terakhir.
Klik tombol Pratinjau (Preview) di kanan atas untuk memastikan gambar muncul, teks rapi, dan kalkulator/widget berfungsi saat tombolnya diklik.
Jika sudah oke, klik tombol Publikasikan (Publish) (warna oranye) di kanan atas. Konfirmasi jika diminta.
Setelah terbit, cari ikon Berbagi (Share) atau klik ikon Mata (Lihat Blog).
Salin URL/Link dari address bar browser (contoh:
https://ayamgeprek-budi.blogspot.com/2024/01/promo-spesial.html).Buka Google Form yang telah disediakan oleh instruktur/guru.
Tempel link blog Anda di kolom jawaban dan kirim.
Tips Penting untuk Peserta:
Prompt adalah Kunci: Jika hasil gambar atau kode dari Gemini kurang bagus, cobalah perbaiki kalimat perintahnya agar lebih detail.
Mode HTML: Script interaktif tidak akan jalan jika Anda mem-paste-nya di mode "Tampilan Menulis" (Compose View). Harus di "Tampilan HTML".
Posts
No comments