Cara Membuat Etalase Toko Online di Blogspot Menggunakan HTML Iframe
Platform Blogger (Blogspot) memang gratis dan sangat andal untuk membuat artikel. Namun, karena ini pada dasarnya adalah platform blogging, Blogger tidak memiliki fitur bawaan yang lengkap seperti keranjang belanja, kalkulator ongkir, atau etalase produk layaknya website toko online profesional (e-commerce).
Lalu, bagaimana jika Anda ingin menampilkan daftar produk dagangan Anda di dalam blog tanpa harus menyewa hosting dan domain baru yang mahal? Jawabannya sangat sederhana: Gunakan HTML Iframe.
Melalui artikel ini, kita akan membahas cara mudah membuat halaman etalase toko online di Blogspot menggunakan metode Iframe. Cara ini sangat cocok bagi Anda yang berjualan produk fisik, memiliki katalog reseller, atau menjalankan bisnis grosir perlengkapan konter.
Apa Itu HTML Iframe?
Iframe (Inline Frame) adalah sebuah kode HTML ajaib yang memungkinkan Anda membuka semacam "jendela" di dalam website Anda, untuk menampilkan halaman dari website lain secara utuh.
Sebagai contoh praktik, katakanlah Anda sudah membuat katalog produk grosir perlengkapan konter (seperti sparepart, aksesori, dan etalase konter) menggunakan layanan form order pihak ketiga atau aplikasi web sederhana yang beralamat di collshp.com/fatih_online. Daripada hanya membagikan tautan mentah kepada calon pembeli, Anda bisa menyematkan halaman tersebut langsung ke dalam menu utama cuan-ku.com.
Langkah-Langkah Memasang Iframe di Blogspot
1. Siapkan Link (URL) Toko Anda
Pastikan Anda sudah memiliki link katalog produk atau formulir pemesanan dari pihak ketiga yang ingin ditampilkan. Ingat, link tersebut wajib menggunakan keamanan HTTPS (memiliki ikon gembok).
2. Buat Halaman Statis Baru
Berbeda dengan artikel biasa, etalase toko sebaiknya dibuat di menu Halaman (Pages), bukan di Postingan.
- Masuk ke dasbor Blogger Anda.
- Klik menu Halaman di bilah sebelah kiri.
- Klik tombol Halaman Baru.
- Beri judul halaman, misalnya: "Toko Online" atau "Grosir Fatih Online".
3. Ubah ke Tampilan HTML
Di pojok kiri atas area tempat Anda biasa mengetik (di bawah judul), terdapat ikon pensil. Klik ikon tersebut, lalu ubah dari Tampilan Menulis (Compose view) menjadi Tampilan HTML (HTML view). Hapus semua kode yang mungkin ada di sana (seperti <br />).
4. Masukkan Kode Iframe Responsif
Salin kode HTML di bawah ini, lalu tempelkan (paste) ke dalam editor Anda:
<iframe src="https://collshp.com/fatih_online" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;" allowfullscreen="allowfullscreen"></iframe>
</div>
Penting: Ganti tulisan https://collshp.com/fatih_online dengan alamat URL toko atau katalog Anda sendiri.
Memahami Setelan Kode Iframe
Kode di atas sudah dirancang agar responsif, artinya tampilan toko Anda tidak akan terpotong meskipun diakses melalui layar smartphone yang kecil atau layar laptop yang lebar. Berikut penjelasannya:
- width: 100%: Memastikan "jendela" toko melebar penuh mengikuti ukuran layar perangkat pembeli.
- padding-bottom: 150%: Menentukan tinggi bingkai. Anda bisa mengubah angka 150% ini menjadi lebih besar atau lebih kecil, sesuaikan dengan panjang halaman produk Anda agar pembaca bisa menggulir (scroll) dengan nyaman.
- border: none: Menghilangkan garis pinggir agar etalase toko pihak ketiga tersebut tampak menyatu sempurna (seolah-olah bagian asli) dari Blogspot Anda.
Kesimpulan
Memanfaatkan kode HTML iframe adalah jalan pintas paling cerdas untuk menyulap blog artikel biasa menjadi portal bisnis digital serba bisa. Anda tetap menikmati gratisnya hosting dari Google (Blogspot), sambil bisa memamerkan etalase order pihak ketiga secara profesional di bawah brand Anda sendiri. Segera praktikkan dan pamerkan katalog jualan Anda kepada audiens!