Cara Membuat Tombol WhatsApp Mengambang di Blogger

pada tanggal

WhatsApp adalah salah satu aplikasi komunikasi yang paling populer saat ini. Jika Anda memiliki blog di Blogger.com dan ingin memudahkan pengunjung menghubungi Anda, menambahkan tombol WhatsApp mengambang adalah solusi yang tepat. Dalam artikel ini, kami akan membahas cara menambahkan tombol "Kontak Kami" yang mengarah langsung ke WhatsApp Anda.

Keuntungan Menggunakan Tombol WhatsApp di Blogger

✅ Memudahkan pengunjung menghubungi Anda secara langsung.
✅ Meningkatkan interaksi dan peluang penjualan jika digunakan untuk bisnis.
✅ Tampilan profesional dengan desain yang ringan dan tidak memperlambat loading blog.

Cara Membuat Tombol WhatsApp Mengambang

1. Login ke Blogger dan Tambahkan Gadget

  1. Buka Blogger.com dan login ke akun Anda.
  2. Masuk ke menu Tata Letak.
  3. Klik Tambahkan Gadget pada bagian yang sesuai (biasanya di bagian Sidebar atau Footer).
  4. Pilih HTML/JavaScript dan tempelkan kode di bawah ini.

2. Tambahkan Kode HTML & CSS

Salin dan tempel kode berikut di dalam gadget HTML/JavaScript:

<style>
/* Tombol WhatsApp mengambang */
.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #25d366;
    color: white;
    padding: 10px 15px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

/* Ikon WhatsApp */
.whatsapp-icon {
    font-size: 24px;
    margin-right: 10px;
}
</style>

<a href="https://wa.me/6287760154834" class="whatsapp-float" target="_blank">
    <span class="whatsapp-icon">&#128222;</span> Kontak Kami
</a>

3. Ubah Nomor WhatsApp Anda

Pada bagian berikut:

<a href="https://wa.me/6287760154834" class="whatsapp-float" target="_blank">

Gantilah 6287760154834 dengan nomor WhatsApp Anda sendiri dalam format internasional.

📌 Contoh: Jika nomor Anda 081234567890, ubah menjadi 6281234567890 (tanpa tanda "+").

4. Simpan dan Lihat Hasilnya



  • Klik Simpan di gadget HTML/JavaScript.
  • Buka blog Anda, dan tombol WhatsApp akan muncul di kanan bawah halaman.
  • Saat diklik, pengunjung akan langsung diarahkan ke WhatsApp Chat Anda.

Kesimpulan

Menambahkan tombol WhatsApp mengambang di Blogger sangat mudah dan bermanfaat untuk meningkatkan komunikasi dengan pengunjung blog Anda. Dengan menggunakan kode sederhana ini, Anda bisa membuat tombol "Kontak Kami" yang stylish dan responsif.

Coba sekarang dan pastikan pengunjung Anda lebih mudah menghubungi Anda! 🚀