Cara Membuat Floating Button Chat WhatsApp di Blogger Tanpa Plugin

Floating button chat WhatsApp adalah tombol chat yang melayang di bagian sudut website dan memungkinkan pengunjung langsung menghubungi Anda melalui WhatsApp. Tombol ini sangat berguna untuk meningkatkan interaksi pengunjung, layanan pelanggan, maupun keperluan bisnis online. Pada tutorial ini kita akan membuat tombol chat WhatsApp di Blogger tanpa menggunakan plugin tambahan sehingga lebih ringan dan cepat.

Apa Itu Floating Button Chat

Floating button adalah tombol yang posisinya tetap (fixed) pada layar meskipun halaman di-scroll. Dengan menggunakan tombol chat WhatsApp, pengunjung dapat langsung membuka percakapan WhatsApp hanya dengan satu klik tanpa harus menyalin nomor secara manual.

Menambahkan Struktur HTML

Masuk ke menu Tema → Edit HTML, lalu letakkan kode berikut tepat sebelum tag </body>.

<a href="https://wa.me/6281234567890" 
   class="floating-wa" 
   target="_blank" 
   aria-label="Chat WhatsApp">
   Chat
</a>

Ganti nomor 6281234567890 dengan nomor WhatsApp Anda menggunakan format internasional tanpa tanda +.

Menambahkan CSS Styling

Selanjutnya tambahkan kode CSS berikut di atas tag </style> atau pada bagian CSS template Anda.

.floating-wa{
    position:fixed;
    bottom:20px;
    right:20px;
    background:#25D366;
    color:#fff;
    padding:14px 18px;
    border-radius:50px;
    font-size:14px;
    text-decoration:none;
    box-shadow:0 4px 10px rgba(0,0,0,.2);
    z-index:999;
    transition:.3s;
}
.floating-wa:hover{
    transform:scale(1.05);
}

Kode tersebut akan membuat tombol berada di kanan bawah layar dengan warna khas WhatsApp dan efek hover sederhana.

Menambahkan Ikon WhatsApp (Opsional)

Agar tampil lebih menarik, Anda bisa menambahkan ikon WhatsApp menggunakan emoji atau icon font seperti svg. Contohnya:

<a href="https://wa.me/6281234567890" 
   class="floating-wa" 
   target="_blank">
   💬 Chat WhatsApp
</a>

Tips Agar Tombol Lebih Optimal

Beberapa tips yang bisa Anda gunakan:

• Gunakan posisi kanan bawah karena paling mudah dijangkau pengguna.
• Pastikan ukuran tombol tidak terlalu besar agar tidak mengganggu tampilan.
• Gunakan teks yang jelas seperti “Chat Admin” atau “Hubungi Kami”.
• Tambahkan pesan otomatis dengan format link WhatsApp jika diperlukan.

Kesimpulan

Dengan menambahkan floating button chat WhatsApp, pengunjung website dapat lebih mudah menghubungi Anda sehingga meningkatkan interaksi dan peluang konversi. Cara ini sangat ringan karena tidak menggunakan plugin tambahan dan bisa diterapkan di semua template Blogger hanya dengan menambahkan HTML dan CSS sederhana.