Cara Membuat Tombol WhatsApp Melayang di Blogger Seperti Toko Online

Tombol WhatsApp melayang (floating WhatsApp button) sangat populer di website bisnis dan toko online karena memudahkan pengunjung menghubungi admin hanya dengan satu klik.

Hubungi Kami via WhatsApp untuk Pemesanan dan Layanan

Pada artikel ini, kita pasang tombol WhatsApp langsung di template Blogger agar tampil di semua halaman.

Model 1 — Icon WhatsApp bulat
Model 2 — Tombol WhatsApp dengan teks

Langkah 1 — Buka Edit HTML Template

Tema → Edit HTML

Langkah 2 — Tempel Script di Bagian Paling Bawah

Cari:

</body>

Tempel script tepat di atasnya.

MODEL 1 — Icon WhatsApp Bulat Melayang

Minimalis dan profesional. Cocok untuk semua jenis website.

<!-- Floating WhatsApp Button - Model 1 -->
<a href="https://wa.me/6281234567890" target="_blank" class="wa-float">
  <img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" class="wa-icon"/>
</a>

<style>
.wa-float{
  position: fixed;
  width: 55px;
  height: 55px;
  bottom: 20px;
  right: 20px;
  background: #25D366;
  color: #FFF;
  border-radius: 50%;
  text-align: center;
  font-size: 28px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.25);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .3s ease-in-out;
}
.wa-float:hover{
  transform: scale(1.08);
}
.wa-icon{
  width: 32px;
  height: 32px;
}
</style>

MODEL 2 — Tombol Dengan Teks “Chat via WhatsApp”

Tampil lebih informatif & meyakinkan pelanggan.

<!-- Floating WhatsApp Button - Model 2 -->
<a href="https://wa.me/6281234567890" target="_blank" class="wa-float2">
  <img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" class="wa-icon2"/>
  <span class="wa-text2">Chat via WhatsApp</span>
</a>

<style>
.wa-float2{
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #25D366;
  color: #fff;
  border-radius: 30px;
  padding: 10px 16px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.25);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: Arial;
  text-decoration:none;
}
.wa-float2:hover{
  transform: scale(1.05);
}
.wa-icon2{
  width: 26px;
}
.wa-text2{
  font-size: 14px;
  font-weight:600;
}
</style>

Langkah 3 — Ganti Nomor WhatsApp Anda

Ubah bagian ini:

6281234567890

Format yang benar:

Gunakan 62
Tanpa angka 0

081234567890 ➜ 6281234567890

Hasilnya

Model 1 → simpel & elegan
Model 2 → lebih informatif

Keduanya tampil melayang di kanan bawah.

Penutup

Sekarang blog Anda sudah memiliki tombol WhatsApp melayang seperti website profesional.

Selamat mencoba 🙂

Cari Blog Ini

Edwin Info – Tutorial & Tips Blogger

Tutorial Pasang Tombol WhatsApp Melayang di Blogger & Website