~ WE WALK IN THE DARK, TO SERVE THE LIGHT ~
Beranda
Blogger

Cara Mudah Membuat Kotak Pesan Melayang di Blogger

Ingin blogmu terlihat modern dan interaktif? Pelajari cara membuat kotak pesan melayang di Blogger dengan desain minimalis dan mudah diterapkan.
Pernah lihat kotak pesan melayang yang sering muncul di blog favoritmu? Selain keren, fitur ini juga bikin blog lebih interaktif dan ramah pengunjung. Tenang, kamu bisa membuatnya sendiri di Blogger tanpa ribet! Dalam artikel ini, aku akan tunjukkan langkah-langkahnya, lengkap dengan tips supaya kotak pesanmu tampil minimalis dan tetap menarik.
Cara Mudah Membuat Kotak Pesan Melayang di Blogger

Kenapa Harus Punya Kotak Pesan Melayang?

Sebelum kita masuk ke tutorialnya, yuk bahas sedikit manfaat dari kotak pesan melayang:
  • Meningkatkan interaksi: Pengunjung lebih mudah menyapa atau bertanya langsung. 
  • Meningkatkan profesionalitas: Blogmu terlihat lebih pro dan user-friendly. 
  • Fleksibel: Bisa untuk promosi, ajakan follow, atau pesan ramah lainnya.
Dengan tampilan minimalis, kotak pesan ini nggak akan ganggu pengalaman membaca pengunjung.

Langkah-Langkah Membuat Kotak Pesan Melayang di Blogger

1. Login ke Dashboard Blogger

Masuk ke akun Blogger, pilih blog yang ingin kamu tambahkan fitur ini.

2. Edit Tema Blog

Klik menu Tema di sidebar. Klik Edit HTML.

3. Tambahkan Kode CSS

Cari bagian </style> (atau buat sendiri di dalam <head>).
Lalu tambahkan kode berikut diatas kode tersebut: 
#floating-message {
  position: fixed;
  bottom: 20px;
  right: 20px; /* Posisi Kotak bisa di ubah menjadi LEFT */
  width: 250px; /* Lebar Kotak */
  padding: 10px; /* Lengkungan Kotak */
  background-color: white; /* Warna Latar Kotak */
  border: 1px solid #ccc; /* Warna Sisi Kotak */
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 9999;
  font-family: Arial, sans-serif;
  font-size: 14px;
  display: none;
  color: #2A3335; /* Warna Teks didalam Kotak */
}

#floating-message button {
  background: none;
  border: none;
  color: #888; /* Warna Tombol Close di Kotak */
  font-size: 12px;
  cursor: pointer;
  float: right;
  margin-top: -5px;
}

#floating-message button:hover {
  color: #000;
}
Kode ini akan membuat kotak pesan melayang dengan gaya minimalis: sederhana, bersih, tapi tetap eye-catching.

4. Tambahkan Kode HTML

Buka Tata Letak pilih tambahkan Widget (Lihat Gambar) Pilih HTML/JAVASCRIPT: Cara Mudah Membuat Kotak Pesan Melayang di Blogger dan tambahkan kode berikut: 
<div id="floating-message">
  <span>Halo! Ada pertanyaan?</span>
  <button onclick="hideMessage()">x</button>
</div>
  • Atau bisa juga tambahkan kode berikut di bagian bawah tema, sebelum tag </body>
    • Kode ini adalah struktur kotak pesannya. Kamu bisa mengganti teksnya sesuka hati, misalnya:
  • ?“Butuh bantuan? Klik di sini!”
  • “Yuk ngobrol sama aku!”

    • 5. Tambahkan JavaScript

    Masuk ke mode EDIT HTML (seperti langkah Awal) lalu tambahkan kode berikut sebelum tag </body> untuk mengatur kapan kotak pesan muncul dan bisa ditutup: 
    <script>
  window.onload = function () {
    setTimeout(function () {
      document.getElementById("floating-message").style.display = "block";
    }, 2000); // Muncul setelah 2 detik
  };

  function hideMessage() {
    document.getElementById("floating-message").style.display = "none";
  }
</script>
    Dengan kode ini, kotak pesan akan muncul otomatis 2 detik setelah pengunjung membuka halaman, dan bisa ditutup dengan mudah.
    DEMO KOTAK MELAYANG

    Tips Supaya Kotak Pesanmu Lebih Optimal

    • Gunakan teks yang ramah: Hindari kalimat formal, gunakan bahasa yang bikin pengunjung nyaman. 
    • Sesuaikan warna: Kalau blogmu punya tema warna tertentu, ubah warna background atau teks kotak pesan agar serasi. 
    • Jangan ganggu konten utama: Pastikan kotak pesan tidak terlalu besar atau terlalu sering muncul.

    Penutup

    Dengan kotak pesan melayang, blogmu akan terlihat lebih modern dan interaktif tanpa harus mengubah banyak hal. Plus, pengunjung jadi lebih mudah terhubung denganmu.
    Coba praktikkan tutorial ini di blog kamu, dan lihat perbedaannya! Kalau kamu punya pertanyaan atau butuh bantuan tambahan, jangan ragu tinggalkan komentar di bawah, ya. 😊


    Semoga artikel ini bermanfaat! Jangan lupa share ke teman-teman Blogger lain yang butuh tips keren ini. 😉
    Seseorang yang nggak tahu mau ngapain lagi... :) Karena udah di titik tergalau karena cinta selalu di tolak. :(