Tutorial Pasang Tombol WhatsApp Keren & Responsif di Pojok Kanan Blogger

Ingin pengunjung blog lebih mudah menghubungi Anda? Salah satu cara yang dapat diterapkan adalah dengan memasang tombol WhatsApp melayang di Blogger. Tombol ini akan tetap berada di area tertentu pada layar ketika pengunjung menggulir halaman, sehingga akses menuju WhatsApp menjadi lebih praktis.

Fitur seperti ini sangat cocok digunakan pada blog bisnis, toko online, website jasa, landing page, portofolio, maupun blog perusahaan yang menggunakan WhatsApp sebagai salah satu media komunikasi dengan pelanggan.

Dengan tombol WhatsApp floating, pengunjung tidak perlu kembali ke bagian atas halaman hanya untuk mencari informasi kontak. Cukup klik tombol yang tersedia, kemudian browser akan membuka WhatsApp dengan pesan pembuka yang telah disiapkan.

Apa Itu Tombol WhatsApp Melayang?

Tombol WhatsApp melayang atau floating WhatsApp button adalah elemen yang menggunakan CSS position: fixed agar tombol tetap berada pada posisi tertentu di layar meskipun halaman digulir.

Berbeda dengan tombol WhatsApp biasa yang berada di dalam alur konten, tombol floating dapat tetap terlihat ketika pengunjung berpindah dari satu bagian artikel ke bagian lainnya.

Konsep sederhananya adalah:

• Tombol ditempatkan di area sudut layar.
• CSS membuat tombol memiliki posisi tetap.
• Pengunjung dapat mengklik tombol kapan saja.
• Tautan mengarahkan pengunjung ke WhatsApp.
• Pesan pembuka dapat diisi secara otomatis.

Manfaat Tombol WhatsApp Floating di Blogger

Menambahkan tombol WhatsApp melayang dapat memberikan akses komunikasi yang lebih mudah, terutama bagi blog yang mengandalkan WhatsApp untuk menerima pertanyaan atau permintaan dari calon pelanggan.

• Mempermudah komunikasi: Pengunjung dapat menghubungi admin tanpa mencari halaman kontak.
• Selalu mudah ditemukan: Tombol tetap berada di area layar saat halaman digulir.
• Cocok untuk bisnis dan jasa: Pengunjung dapat langsung menanyakan produk atau layanan.
• Dapat digunakan tanpa plugin: Tombol dapat dibuat menggunakan HTML dan CSS.
• Mudah dikustomisasi: Warna, ukuran, posisi, teks, dan pesan dapat disesuaikan.
• Responsif: Tampilan dapat diatur agar tetap nyaman digunakan pada perangkat mobile.

Contoh Penggunaan Tombol WhatsApp di Blog

Tombol WhatsApp floating dapat digunakan pada berbagai jenis website berbasis Blogger.

Contohnya:

• Blog toko online.
• Website jasa pembuatan website.
• Blog penjualan produk digital.
• Website portofolio freelancer.
• Landing page produk.
• Website UMKM.
• Blog perusahaan.
• Website pemesanan makanan.

Misalnya Anda memiliki blog yang menawarkan jasa desain grafis. Pengunjung yang sedang membaca daftar layanan dapat langsung menekan tombol WhatsApp untuk menanyakan harga atau detail layanan tanpa harus mencari halaman kontak terlebih dahulu.

Kode Tombol WhatsApp Melayang Blogger

Berikut kode HTML dan CSS yang dapat digunakan untuk membuat tombol WhatsApp floating. Kode ini menggunakan SVG sebagai ikon, sehingga tidak membutuhkan library ikon eksternal.

Sebelum digunakan, pastikan Anda mengganti nomor WhatsApp dan pesan otomatis sesuai kebutuhan.

<!-- Awal Tombol WhatsApp Melayang -->

<a
  href="https://wa.me/6281234567890?text=Halo%20Admin%2C%20saya%20ingin%20bertanya%20seputar%20layanan%20Anda."
  target="_blank"
  rel="noopener noreferrer"
  aria-label="Chat dengan kami melalui WhatsApp"
  style="
    position: fixed;
    bottom: 25px;
    right: 25px;
    background: #25D366;
    color: #ffffff;
    border-radius: 50px;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 99999;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  "
  onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(0,0,0,0.20)';"
  onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 12px rgba(0,0,0,0.15)';"
>

  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    aria-hidden="true"
  >
    <path
      d="M12.01 2.005a9.96 9.96 0 0 0-8.5 4.82L2 12l1.6 5.38 5.34 1.54a9.96 9.96 0 1 0 3.07-16.915ZM17.47 16.2c-.27.75-1.53 1.44-2.13 1.52-.56.07-1.3-.06-2.2-.42-3.83-1.52-6.3-5.46-6.49-5.71-.19-.26-1.54-2.06-1.54-3.93 0-1.87.97-2.8 1.32-3.2.33-.37.71-.47.95-.47.23 0 .47 0 .66.01.21.01.48-.08.74.55.27.65.92 2.25 1 2.45.08.2.14.43.01.69-.13.26-.2.42-.4.66-.19.23-.41.5-.59.7-.19.21-.4.43-.17.82.23.38 1.02 1.67 2.19 2.71 1.5 1.34 2.78 1.76 3.17 1.94.39.18.61.15.84-.11.23-.26 1-1.16 1.27-1.56.27-.4.54-.33.89-.2.35.13 2.21 1.04 2.59 1.23.38.19.63.29.72.45.09.16.09.94-.18 1.69Z"
      fill="white"
    />
  </svg>

  <span>Chat Kami</span>

</a>

<!-- Akhir Tombol WhatsApp Melayang -->

Cara Mengganti Nomor WhatsApp

Bagian pertama yang harus Anda ubah adalah nomor WhatsApp tujuan. Cari bagian berikut pada kode:

https://wa.me/6281234567890

Ganti 6281234567890 dengan nomor WhatsApp Anda.

Untuk nomor Indonesia, gunakan format internasional dengan kode negara 62. Jangan menggunakan tanda +, spasi, atau tanda strip.

Contohnya, jika nomor Anda adalah:

081234567890

Maka nomor yang digunakan pada tautan WhatsApp adalah:

6281234567890

Cara Mengubah Pesan Otomatis WhatsApp

Selain nomor tujuan, Anda juga dapat mengubah pesan yang otomatis disiapkan ketika pengunjung menekan tombol.

Contoh kode:

?text=Halo%20Admin%2C%20saya%20ingin%20bertanya%20seputar%20layanan%20Anda.

Dalam URL, spasi dan beberapa karakter tertentu perlu dikodekan agar dapat diproses dengan benar. Cara paling aman adalah menggunakan URL encoding.

Contohnya, pesan:

Halo Admin, saya ingin mengetahui harga layanan Anda.

Dapat ditulis pada URL sebagai:

Halo%20Admin%2C%20saya%20ingin%20mengetahui%20harga%20layanan%20Anda.

Anda dapat mengganti pesan tersebut dengan kalimat yang lebih sesuai dengan kebutuhan bisnis.

Cara Memasang Tombol WhatsApp di Blogger

Salah satu cara yang praktis untuk menampilkan tombol WhatsApp di seluruh halaman Blogger adalah melalui gadget HTML/JavaScript.

1. Buka Dashboard Blogger

Masuk ke dashboard Blogger kemudian pilih blog yang ingin Anda pasang tombol WhatsApp.

2. Pilih Menu Tata Letak

Pada menu sebelah kiri, pilih Tata Letak atau Layout.

3. Tambahkan Gadget HTML/JavaScript

Cari area seperti Sidebar, Footer, atau lokasi gadget lain yang tersedia. Klik Tambahkan Gadget, kemudian pilih HTML/JavaScript.

4. Tempelkan Kode

Biarkan bagian judul kosong jika tidak diperlukan. Masukkan kode tombol WhatsApp ke dalam bagian konten gadget.

5. Simpan Perubahan

Klik Simpan, kemudian buka halaman blog untuk memeriksa apakah tombol sudah muncul.

Karena menggunakan position: fixed, tombol akan tetap berada di posisi yang telah ditentukan ketika halaman digulir.

Cara Mengatur Posisi Tombol WhatsApp

Secara default, tombol berada di bagian kanan bawah layar. Posisi tersebut diatur menggunakan:

bottom: 25px;
right: 25px;

Untuk menaikkan tombol dari bagian bawah layar, Anda dapat meningkatkan nilai bottom.

Contohnya:

bottom: 50px;
right: 25px;

Jika ingin menggeser tombol lebih dekat ke tepi kanan:

bottom: 25px;
right: 10px;

Cara Mengubah Warna Tombol

Warna tombol menggunakan kode hijau WhatsApp:

background: #25D366;

Anda dapat menggantinya dengan warna lain sesuai desain blog.

Contohnya:

background: #128C7E;

Pastikan warna teks tetap memiliki kontras yang cukup agar tombol mudah dibaca.

Cara Membuat Tombol Lebih Kecil di HP

Pada layar smartphone, tombol dengan teks yang terlalu panjang dapat mengambil banyak ruang. Anda dapat menggunakan media query agar tombol menjadi lebih ringkas pada perangkat dengan layar kecil.

Contohnya:

@media screen and (max-width: 480px) {
  .wa-floating-button {
    right: 15px;
    bottom: 15px;
    padding: 10px 14px;
    font-size: 13px;
  }
}

Jika menggunakan CSS class khusus, pastikan class tersebut diterapkan pada tombol yang ingin diubah.

Apakah Tombol WhatsApp Floating Membuat Blog Lambat?

Kode tombol sederhana seperti contoh di atas tidak menggunakan library JavaScript eksternal atau plugin tambahan. Namun, bukan berarti dampaknya terhadap performa selalu nol.

Performa halaman secara keseluruhan tetap dipengaruhi oleh berbagai elemen lain seperti gambar, JavaScript pihak ketiga, iklan, widget, CSS, dan struktur template.

Karena itu, gunakan tombol floating secara sederhana dan hindari menambahkan terlalu banyak efek animasi atau script tambahan yang tidak diperlukan.

Cara Menguji Tombol WhatsApp di Blogger

Setelah tombol dipasang, lakukan pengujian pada beberapa kondisi.

1. Buka halaman depan blog.
2. Pastikan tombol muncul di kanan bawah.
3. Gulir halaman ke atas dan bawah.
4. Pastikan tombol tetap berada pada posisi yang ditentukan.
5. Klik tombol WhatsApp.
6. Pastikan WhatsApp terbuka pada tab atau aplikasi yang sesuai.
7. Periksa nomor tujuan.
8. Periksa pesan otomatis yang muncul.
9. Uji kembali menggunakan smartphone.

Kesalahan Umum Saat Memasang Tombol WhatsApp

Nomor WhatsApp Tidak Valid

Kesalahan ini biasanya terjadi karena nomor masih menggunakan awalan 0, tanda +, spasi, atau tanda strip. Gunakan format internasional tanpa simbol tambahan.

Tombol Tidak Muncul

Periksa kembali apakah seluruh kode HTML sudah ditempel dengan benar pada gadget HTML/JavaScript. Pastikan tidak ada tanda kutip atau tag yang terhapus.

Pesan Otomatis Tidak Sesuai

Periksa parameter text pada URL WhatsApp. Karakter seperti spasi dan tanda baca tertentu perlu menggunakan format URL encoding.

Tombol Menutupi Elemen Blog

Karena tombol menggunakan position: fixed, tombol dapat berada di atas elemen lain. Jika terjadi, ubah nilai bottom atau right, atau sesuaikan ukuran tombol agar tidak mengganggu konten.

Tips Membuat Tombol WhatsApp Lebih Efektif

• Gunakan teks yang singkat: Contohnya "Chat Kami" atau "Hubungi Kami".
• Gunakan pesan pembuka yang relevan: Sesuaikan dengan jenis produk atau layanan.
• Pastikan nomor aktif: Jangan memasang nomor yang tidak digunakan.
• Perhatikan tampilan mobile: Pastikan tombol tidak menutupi konten penting.
• Jangan terlalu banyak menggunakan animasi: Tampilan sederhana biasanya lebih nyaman.
• Uji sebelum dipublikasikan: Pastikan tautan dan pesan otomatis berfungsi.

Kesimpulan

Cara memasang tombol WhatsApp melayang di Blogger dapat dilakukan dengan kode HTML dan CSS sederhana. Tombol menggunakan position: fixed sehingga dapat tetap terlihat ketika pengunjung menggulir halaman.

Fitur ini dapat membantu mempermudah komunikasi antara pengunjung dan pemilik blog, terutama untuk toko online, bisnis, UMKM, penyedia jasa, portofolio, dan website perusahaan yang menggunakan WhatsApp sebagai media komunikasi.

Anda dapat menyesuaikan nomor WhatsApp, pesan otomatis, warna, ukuran, dan posisi tombol sesuai kebutuhan. Pastikan juga melakukan pengujian pada desktop dan smartphone agar tombol tidak mengganggu pengalaman membaca.

Dengan implementasi yang sederhana dan penggunaan yang tepat, tombol WhatsApp floating dapat menjadi salah satu elemen pendukung komunikasi yang praktis pada website Blogger.

FAQ Tombol WhatsApp Blogger

Apakah tombol WhatsApp melayang bisa dipasang di Blogger?

Ya. Tombol WhatsApp melayang dapat dipasang di Blogger menggunakan HTML dan CSS. Salah satu cara praktis adalah menempatkan kode melalui gadget HTML/JavaScript pada menu Tata Letak.

Bagaimana cara membuat tombol WhatsApp tetap berada di pojok layar?

Gunakan CSS position: fixed dan atur nilai bottom serta right untuk menentukan posisi tombol.

Bagaimana cara mengganti nomor WhatsApp pada tombol?

Ganti nomor pada tautan https://wa.me/ dengan nomor WhatsApp Anda menggunakan format internasional tanpa tanda tambah, spasi, atau tanda strip.

Apakah pesan WhatsApp bisa dibuat otomatis?

Ya. Anda dapat menambahkan parameter ?text= pada tautan WhatsApp untuk menyiapkan pesan yang akan muncul ketika pengunjung membuka chat.

Apakah tombol WhatsApp floating membutuhkan plugin?

Tidak. Tombol sederhana dapat dibuat menggunakan HTML, CSS, dan SVG tanpa plugin atau library eksternal.

Apakah tombol WhatsApp floating responsif di HP?

Ya. Tampilan tombol dapat disesuaikan menggunakan CSS dan media query agar ukurannya tetap nyaman pada layar smartphone.

Apakah tombol WhatsApp floating pasti meningkatkan penjualan?

Tidak ada jaminan bahwa tombol WhatsApp secara otomatis meningkatkan penjualan. Fitur ini terutama berfungsi untuk mempermudah akses komunikasi antara pengunjung dan pemilik bisnis.