Cara Membuat Floating Bar Promo Produk dan Jasa di Blogspot

Ingin membuat tampilan blog Anda terlihat lebih profesional dan menarik perhatian pengunjung? Salah satu trik efektif adalah dengan menambahkan floating bar — elemen melayang di bagian atas atau bawah halaman yang menampilkan promo produk, jasa, atau pengumuman penting.

Floating bar ini sangat cocok untuk:

• Menarik perhatian ke promo diskon atau produk terbaru.

• Mengarahkan pengunjung ke halaman penjualan atau WhatsApp.

• Meningkatkan konversi tanpa mengganggu pengalaman membaca.

Nah, dalam artikel ini saya akan membagikan cara mudah membuat floating bar promo di Blogspot hanya dengan beberapa langkah sederhana — tanpa perlu jadi ahli coding!

1. Login ke Akun Blogspot Anda

Langkah pertama, masuk ke akun Blogspot Anda di https://www.blogger.com.
Pilih blog yang ingin Anda beri floating bar.

2. Buka Menu Tata Letak (Layout)

Setelah masuk ke dashboard blog:

• Klik menu “Tata Letak” (Layout).

• Pilih “Tambahkan Gadget” pada bagian Header atau Footer (tergantung posisi floating bar yang Anda inginkan).

3. Pilih Gadget “HTML/JavaScript”

Dari daftar gadget yang muncul, pilih:

• ➕ HTML/JavaScript.

• Akan muncul jendela untuk menempelkan kode.

4. Tempelkan Kode Floating Bar

Berikut contoh kode sederhana untuk floating bar promo di Blogspot:

<style>
#promo-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #ff6600;
  color: white;
  text-align: center;
  padding: 12px 0;
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  z-index: 9999;
}
#promo-bar a {
  color: #fff;
  font-weight: bold;
  margin-left: 10px;
  text-decoration: underline;
}
#promo-bar button {
  background: transparent;
  color: white;
  border: none;
  font-size: 20px;
  margin-left: 15px;
  cursor: pointer;
}
</style>

<div id="promo-bar">
  🎉 Promo Spesial Bulan Ini! Diskon 30% untuk semua produk.
  <a href="https://wa.me/6281234567890" target="_blank">Beli Sekarang</a>
  <button onclick="document.getElementById('promo-bar').style.display='none'">✕</button>
</div>

Penjelasan kode:

• position: fixed; bottom: 0; → membuat bar selalu melayang di bawah.

• z-index: 9999; → memastikan bar tampil di atas elemen lain.

• Tombol ✕ berfungsi untuk menutup floating bar.

• Teks & link bisa Anda ganti sesuai promo Anda.

Tips: Kalau ingin bar muncul di atas halaman, ubah bottom: 0; menjadi top: 0;.

5. Simpan Gadget dan Lihat Hasilnya

Klik “Simpan”, lalu buka blog Anda.
Tadaa 🎉 — floating bar promo Anda kini tampil cantik dan profesional di halaman blog.

6. (Opsional) Tambahkan Animasi Menarik

Kalau ingin bar muncul lebih menarik, Anda bisa tambahkan efek animasi:

#promo-bar {
  animation: slideIn 0.8s ease;
}

@keyframes slideIn {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

Animasi ini membuat bar meluncur masuk saat halaman dimuat.

7. Manfaatkan Floating Bar untuk Strategi Promosi

Floating bar bisa Anda gunakan untuk berbagai keperluan, misalnya:

• Promo diskon musiman

• Pengumuman event / webinar

• Arahkan ke nomor WhatsApp bisnis

• Link ke toko online (Shopee, Tokopedia, Website, dsb)

Pastikan teks promo singkat, jelas, dan mengandung CTA (call to action) seperti “Beli Sekarang”, “Cek Promo”, atau “Daftar di Sini”.

Menambahkan floating bar promo di Blogspot adalah salah satu cara paling mudah untuk meningkatkan interaksi pengunjung dengan promo Anda. Tanpa perlu plugin, cukup dengan kode HTML dan CSS sederhana, tampilan blog Anda bisa jadi lebih profesional dan mengundang klik.

Jangan lupa: perbarui isi floating bar sesuai promo terbaru agar pengunjung selalu tertarik! 

Contoh Ide Penggunaan Floating Bar:

• “Diskon 50% hanya sampai malam ini!”

• “Gratis Ongkir untuk pemesanan hari ini 🚚”

• “Daftar Webinar Gratis 👉 Klik di sini”

Tag: #Blogspot #FloatingBar #DigitalMarketing #PromosiProduk #TipsBlogging