Membangun Microsite Profil Bisnis Profesional di Blogger

Microsite ini dirancang khusus menyerupai aplikasi mobile yang modern dan responsif. Anda bisa menggunakannya sebagai halaman Link-in-Bio, katalog pro

Memiliki presensi online yang kuat adalah kunci utama dalam membangun kepercayaan pelanggan dan mengelola bisnis yang profesional. Sebagai bagian dari praktik pembelajaran kita, kamu akan belajar cara memasang dan mengelola Microsite Profil Bisnis langsung di dalam blog (Blogger) kamu masing-masing.

Microsite ini dirancang khusus menyerupai aplikasi mobile yang modern dan responsif. kamu bisa menggunakannya sebagai halaman Link-in-Bio, katalog produk ringkas, hingga kartu nama digital untuk proyek bisnis kamu .

Membangun Microsite Profil Bisnis Profesional di Blogger www.shlproject.com

Fitur Unggulan Microsite Ini

  • Desain Responsif Tampil rapi dan proporsional saat dibuka lewat HP maupun Laptop.

  • Terintegrasi Tema Plus UI Warna dan gaya teks akan otomatis menyesuaikan dengan tema blog Kamu , lengkap dengan tombol Dark Mode/Light Mode.

  • Slider Otomatis Menampilkan katalog produk dan testimoni pelanggan secara bergantian tanpa perlu digeser manual.

  • Direct Action Tersedia tombol untuk langsung membagikan halaman dan tombol Order yang terhubung langsung ke WhatsApp bisnis.

  • Multimedia Lengkap Mendukung penyematan (embed) video YouTube dan Google Maps lokasi bisnis.

Cara Pemasangan di Blogger

Pemasangannya sangat mudah karena semua kode (HTML & CSS) sudah disatukan ke dalam satu file. Ikuti langkah berikut:

VERSI PAGES (pastikan download untuk kebutuhan PAGE)

  1. Buka dashboard Blogger Kamu.

  2. Buat Halaman Baru (Pages) atau Postingan Baru (Posts). (KHUSUS YANG MEMASANG DI PAGES DOWNLOAD YANG VERSI PAGES)

  3. Buat Halaman Baru (Pages) atau Postingan Baru (Posts)

  4. Perhatikan ikon pensil di pojok kiri atas area editor. Klik ikon tersebut dan ubah dari Tampilan Menulis (Compose View) menjadi Tampilan HTML (HTML View).

  5. Hapus semua kode dasar yang ada di sana (jika ada), lalu Paste (Tempel) seluruh kode HTML microsite yang sudah dibagikan.

  6. Klik Pratinjau (Preview) untuk melihat hasilnya, lalu klik Publikasikan (Publish).

VERSI TEMA UTAMA (pastikan download untuk kebutuhan TEMA UTAMA)
  1. Buka dashboard Blogger Kamu.

  2. Ke bagian Theme / Tema

  3. Perhatikan ikon panah di klik lalu pilih bagian EDIT HTML

  4. Hapus semua kode dasar yang ada di sana (jika ada), lalu Paste (Tempel) seluruh kode HTML microsite yang sudah dibagikan.

  5. Klik Pratinjau (Preview) untuk melihat hasilnya, lalu klik Publikasikan (Publish).

Panduan Kustomisasi (Mengubah Data Bisnis)

Setelah berhasil dipasang, Kamu wajib mengubah data dummy (bawaan) menjadi data bisnis Kamu sendiri. Tetaplah berada di Tampilan HTML dan cari teks berikut untuk diubah:

  • Profil Ganti Nama Bisnis kamu dan deskripsi di bawahnya. Untuk foto, ganti tautan https://via.placeholder.com/150 dengan tautan foto logo/profil Kamu.

  • Media Sosial Cari tanda pagar # pada baris <a href="#"> di bagian sosial media, lalu ganti dengan tautan profil akun Kamu (tautan Instagram atau TikTok Kamu ).

  • Foto Produk Ganti tautan gambar https://images.unsplash.com/... di bagian Slider Produk dengan tautan foto produk Kamu.

  • WhatsApp Beli Cari tautan https://wa.me/6281234567890?text=... dan ganti dengan nomor HP Kamu (gunakan awalan 62) beserta pesan otomatis yang Kamu inginkan.

  • Video YouTube: Dapatkan tautan Embed video YouTube Kamu , lalu ganti tautan di bagian <iframe src="https://www.youtube.com/embed/...">.

  • Google Maps Cari lokasi Kamu di Google Maps, klik Bagikan > Sematkan Peta, lalu salin tautan URL-nya dan tempelkan di bagian <iframe src="..."> paling bawah.

Selamat mencoba dan berkreasi dengan profil bisnis digital Kamu! Jika mengalami kendala saat mengubah tautan gambar atau embed, pastikan tanda kutip ganda (" ") tidak ikut terhapus.

Lihat Demo Aplikasi
microsite page blog.zip 13KiB
microsite tema utama blog.zip 13KiB
video tutorial pemasangan (mohon maaf, tutorial hanya dibagikan untuk anggota kelas)