Cara Membuat Tombol WhatsApp Floating di Blogger Tanpa Plugin

Bagi pemilik blog bisnis, jasa, affiliate, atau UMKM yang menggunakan Blogger, menyediakan akses WhatsApp secara langsung dapat memudahkan pengunjung ketika ingin bertanya atau menghubungi Anda. Salah satu cara yang praktis adalah memasang tombol WhatsApp floating Blogger yang tetap terlihat ketika halaman digeser ke atas atau ke bawah.

Berbeda dengan tombol WhatsApp biasa yang berada di dalam isi artikel, tombol melayang dapat ditempatkan di posisi tertentu pada layar sehingga tetap terlihat saat pengunjung melakukan scrolling. Fitur ini dapat dibuat tanpa plugin tambahan karena Blogger sudah memungkinkan penggunaan HTML dan CSS secara langsung.

Pada tutorial ini, Anda akan mempelajari cara membuat tombol WhatsApp melayang di Blogger, cara mengatur link WhatsApp, menambahkan pesan otomatis, menyesuaikan posisi tombol, serta membuat tampilannya tetap nyaman digunakan pada smartphone dan desktop.

Apa Itu Tombol WhatsApp Floating Blogger?

Tombol WhatsApp floating adalah tombol yang menggunakan posisi tetap pada layar browser sehingga tidak ikut menghilang ketika pengunjung melakukan scroll. Dalam istilah CSS, perilaku ini biasanya dibuat menggunakan properti position: fixed;.

Saat tombol diklik, pengunjung akan diarahkan ke URL WhatsApp yang sudah Anda tentukan. URL tersebut dapat membuka percakapan dengan nomor tertentu dan, jika diperlukan, menyertakan pesan awal yang sudah dipersiapkan.

Konsep dasarnya sangat sederhana:

• HTML digunakan untuk membuat tombol dan link.
• CSS digunakan untuk membuat tombol tetap melayang di layar.
• Link WhatsApp digunakan untuk membuka percakapan.

Kenapa Menggunakan Tombol WhatsApp Melayang?

Untuk blog yang memiliki tujuan bisnis atau komunikasi langsung, tombol melayang dapat menjadi akses tambahan menuju WhatsApp. Pengunjung tidak perlu kembali ke bagian atas atau mencari halaman kontak hanya untuk menemukan nomor yang tersedia.

Meski begitu, tombol floating sebaiknya tetap digunakan secara proporsional. Tombol yang terlalu besar atau terlalu dekat dengan elemen lain dapat mengganggu pengalaman membaca, terutama pada layar smartphone.

Kelebihan	Hal yang Perlu Diperhatikan
Mudah ditemukan saat halaman di-scroll.	Jangan terlalu besar agar tidak menutupi konten.
Tidak membutuhkan plugin tambahan.	Harus memastikan link WhatsApp ditulis dengan benar.
Dapat dipasang pada blog bisnis, jasa, atau affiliate.	Perlu diuji pada desktop dan mobile.
Bisa diberi pesan otomatis.	Pesan sebaiknya singkat dan relevan.

Cara Membuat Tombol WhatsApp Floating di Blogger

Kita akan membuat tombol sederhana menggunakan HTML dan CSS. Tidak diperlukan JavaScript untuk fungsi dasar tombol ini.

Langkah 1: Siapkan Nomor WhatsApp

Pertama, siapkan nomor WhatsApp yang ingin digunakan sebagai tujuan tombol. Nomor sebaiknya ditulis menggunakan format internasional.

Untuk nomor Indonesia, awalan 0 pada nomor lokal diganti dengan kode negara 62.

Contohnya, nomor lokal:

081234567890

menjadi:

6281234567890

Jangan menambahkan tanda +, spasi, atau tanda strip ke bagian nomor pada URL wa.me.

Langkah 2: Buat Link WhatsApp

Format dasar link WhatsApp yang umum digunakan adalah:

https://wa.me/6281234567890

Ketika URL tersebut dibuka, WhatsApp akan menggunakan nomor yang dicantumkan pada alamat tersebut sebagai tujuan percakapan.

Langkah 3: Tambahkan Pesan Otomatis

Anda juga dapat menyiapkan pesan awal menggunakan parameter text. Contohnya:

https://wa.me/6281234567890?text=Halo%2C%20saya%20ingin%20bertanya%20tentang%20produk%20Anda.

Spasi dan karakter tertentu pada URL perlu ditulis dalam bentuk URL encoding. Untuk penggunaan sederhana, Anda dapat menyiapkan pesan singkat lalu mengubah karakter yang diperlukan menjadi format URL yang valid.

Langkah 4: Buat HTML Tombol WhatsApp

Setelah link siap, buat elemen tombol menggunakan kode berikut:

<a href="https://wa.me/6281234567890"
   target="_blank"
   rel="noopener noreferrer"
   aria-label="Hubungi kami melalui WhatsApp">
  Hubungi Kami
</a>

Atribut target="_blank" digunakan agar link dibuka pada tab atau konteks baru sesuai perilaku browser, sedangkan rel="noopener noreferrer" merupakan praktik yang baik ketika menggunakan target tersebut.

Langkah 5: Tambahkan CSS Floating Button

Sekarang tambahkan CSS agar tombol tetap berada pada posisi yang ditentukan ketika halaman di-scroll.

.wa-floating {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 999px;
  background: #25D366;
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}

.wa-floating:hover {
  opacity: 0.92;
}

@media (max-width: 600px) {
  .wa-floating {
    right: 14px;
    bottom: 14px;
    padding: 11px 15px;
    font-size: 13px;
  }
}

Langkah 6: Gabungkan HTML dan Class CSS

Class wa-floating perlu ditempatkan pada elemen link agar aturan CSS diterapkan.

Contoh lengkapnya menjadi:

<a class="wa-floating"
   href="https://wa.me/6281234567890"
   target="_blank"
   rel="noopener noreferrer"
   aria-label="Hubungi kami melalui WhatsApp">
  Hubungi Kami
</a>

Dengan position: fixed;, tombol akan tetap berada pada koordinat yang ditentukan relatif terhadap viewport, bukan mengikuti posisi normal konten artikel.

Di Mana Kode WhatsApp Floating Ditempatkan?

Ada beberapa cara untuk memasangnya di Blogger, tergantung kebutuhan Anda.

Cara Pertama: Menggunakan Gadget HTML/JavaScript

Untuk pengguna yang tidak ingin terlalu sering mengedit kode tema, Anda dapat menggunakan gadget HTML/JavaScript melalui bagian Tata Letak Blogger apabila opsi tersebut tersedia pada template dan konfigurasi blog Anda.

Masukkan HTML tombol ke gadget tersebut. CSS dapat ditempatkan pada bagian CSS tema atau digabungkan dengan kode yang diperlukan sesuai struktur template.

Cara Kedua: Menambahkan ke Template Blogger

Jika Anda ingin tombol tersedia secara konsisten di seluruh halaman, Anda dapat memasukkannya ke dalam HTML tema. Sebelum mengedit template, sebaiknya buat backup terlebih dahulu.

Cara ini cocok untuk blog bisnis atau blog yang memang menjadikan WhatsApp sebagai salah satu jalur komunikasi utama.

Cara Membuat Tombol WhatsApp Floating dengan Ikon

Jika ingin tampilan lebih ringkas, Anda dapat menggunakan tombol berbentuk lingkaran dan menampilkan simbol sederhana sebagai pengganti teks.

Contohnya:

<a class="wa-floating wa-icon"
   href="https://wa.me/6281234567890"
   target="_blank"
   rel="noopener noreferrer"
   aria-label="Chat melalui WhatsApp">
  WA
</a>

Kemudian gunakan CSS:

.wa-icon {
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 50%;
}

Untuk penggunaan ikon merek resmi, gunakan aset yang memang Anda miliki hak penggunaannya. Jangan menambahkan library ikon hanya untuk fungsi yang sebenarnya dapat dibuat tanpa library.

Cara Menambahkan Pesan WhatsApp Otomatis Berdasarkan Kebutuhan

Pesan otomatis dapat membantu memberikan konteks ketika pengunjung membuka percakapan. Misalnya, blog jasa dapat menggunakan pesan seperti “Saya ingin bertanya tentang layanan pembuatan website”.

Contoh HTML:

<a class="wa-floating"
   href="https://wa.me/6281234567890?text=Halo%2C%20saya%20ingin%20bertanya%20tentang%20layanan%20Anda."
   target="_blank"
   rel="noopener noreferrer"
   aria-label="Hubungi kami melalui WhatsApp">
  Hubungi Kami
</a>

Pesan seperti ini lebih berguna daripada kalimat pembuka yang terlalu umum karena Anda dapat menyesuaikannya dengan tujuan halaman.

Cara Membuat Tombol WhatsApp Floating untuk Blog Jasa

Pada blog jasa, tombol WhatsApp dapat diarahkan ke nomor customer service dengan pesan yang sesuai dengan jenis layanan.

Misalnya:

<a class="wa-floating"
   href="https://wa.me/6281234567890?text=Halo%2C%20saya%20ingin%20menanyakan%20layanan%20yang%20tersedia."
   target="_blank"
   rel="noopener noreferrer"
   aria-label="Tanyakan layanan melalui WhatsApp">
  Hubungi Kami
</a>

Dengan begitu, tombol tetap sederhana tetapi tujuan komunikasinya lebih jelas.

Cara Membuat Floating WhatsApp untuk Blog Affiliate

Pada blog affiliate, tombol WhatsApp dapat digunakan apabila Anda memang menyediakan komunikasi langsung dengan calon pembeli, misalnya untuk konsultasi, pertanyaan produk, atau pemesanan melalui WhatsApp.

Namun, jangan membuat tombol yang memberi kesan bahwa semua produk pasti dapat dipesan melalui WhatsApp apabila sebenarnya link pembelian tetap berada di marketplace. Teks tombol sebaiknya sesuai dengan fungsi sebenarnya, seperti Tanya Produk atau Hubungi Kami.

Cara Menyesuaikan Posisi Tombol WhatsApp

Posisi tombol dapat diubah menggunakan properti right, left, top, atau bottom.

Misalnya, tombol berada di kanan bawah:

.wa-floating {
  position: fixed;
  right: 20px;
  bottom: 20px;
}

Jika ingin lebih dekat dengan tepi layar:

.wa-floating {
  right: 12px;
  bottom: 12px;
}

Nilai tersebut bukan aturan mutlak. Sesuaikan dengan layout template Blogger Anda, terutama apabila terdapat tombol back to top, sticky navigation, cookie notice, atau elemen floating lain.

Cara Memastikan Tombol Tidak Menutupi Konten

Salah satu masalah tombol melayang adalah posisinya dapat menutupi bagian penting halaman. Hal ini semakin terasa pada smartphone dengan layar kecil.

Perhatikan beberapa hal berikut:

• Jangan meletakkan tombol terlalu dekat dengan menu atau tombol lain.
• Gunakan ukuran yang cukup untuk disentuh dengan nyaman.
• Periksa apakah tombol menutupi teks atau gambar pada artikel.
• Uji posisi pada beberapa ukuran layar.
• Perhatikan area bawah layar yang biasanya sudah ditempati elemen browser atau navigasi perangkat.

Tips Membuat WhatsApp Button HTML yang Efektif

• Gunakan teks yang jelas. “Hubungi Kami”, “Tanya Produk”, atau “Konsultasi” lebih mudah dipahami daripada label yang tidak menjelaskan fungsi.
• Gunakan satu tujuan utama. Jangan membuat banyak tombol floating yang saling bersaing untuk mendapatkan perhatian.
• Sesuaikan dengan jenis blog. Blog jasa dapat menggunakan “Konsultasi”, sedangkan blog bisnis dapat menggunakan “Hubungi Kami”.
• Gunakan link WhatsApp yang benar. Nomor harus menggunakan format internasional.
• Uji pesan otomatis. Pastikan teks awal sesuai dengan halaman yang dikunjungi pengguna.
• Pastikan tombol tetap nyaman di mobile. Elemen floating biasanya lebih terasa dampaknya pada layar kecil.

Kesalahan yang Perlu Dihindari

Kesalahan	Dampak	Solusi
Nomor menggunakan format lokal	Link dapat tidak mengarah ke nomor yang benar.	Gunakan format internasional seperti 628....
Ada spasi atau tanda + pada URL nomor	Struktur URL dapat menjadi tidak sesuai.	Gunakan nomor tanpa spasi dan simbol tambahan pada bagian nomor.
Tombol terlalu besar	Konten dapat tertutup.	Kurangi padding atau ukuran tombol.
Tombol menutupi tombol lain	Navigasi menjadi kurang nyaman.	Atur jarak dan posisi elemen floating.
Pesan otomatis terlalu panjang	Pesan awal menjadi kurang praktis bagi pengunjung.	Gunakan pesan singkat dan sesuai konteks.
Hanya diuji di desktop	Masalah posisi pada smartphone dapat terlewat.	Uji pada beberapa ukuran layar.

Cara Mengecek Tombol WhatsApp Setelah Dipasang

Setelah kode ditambahkan, lakukan pengujian sebelum mempublikasikannya secara penuh.

1. Buka halaman blog yang memiliki tombol WhatsApp.
2. Scroll halaman ke atas dan ke bawah.
3. Pastikan tombol tetap berada pada posisi yang ditentukan.
4. Klik tombol dan periksa apakah WhatsApp terbuka dengan benar.
5. Periksa nomor tujuan.
6. Jika menggunakan pesan otomatis, periksa isi pesan.
7. Uji kembali pada smartphone.
8. Periksa apakah tombol menutupi konten atau elemen navigasi lain.

Apakah Tombol WhatsApp Floating Membutuhkan Plugin?

Tidak. Untuk fungsi dasar, floating button Blogger dapat dibuat langsung menggunakan HTML dan CSS. Karena elemen tersebut hanya membutuhkan link dan aturan posisi CSS, tidak ada kebutuhan teknis untuk memasang plugin khusus.

Justru untuk fitur sederhana seperti ini, kode yang ringan dapat lebih mudah dipelihara dibandingkan menambahkan komponen yang lebih kompleks dari yang dibutuhkan.

Apakah Tombol WhatsApp Floating Bisa Dipasang di Semua Halaman?

Bisa, selama kode ditempatkan pada area template atau gadget yang ditampilkan pada halaman yang diinginkan. Jika ditempatkan pada template utama, tombol umumnya dapat muncul pada banyak halaman sekaligus, tergantung struktur template dan kondisi tampil yang digunakan.

Namun, tidak selalu diperlukan untuk menampilkan tombol pada setiap halaman. Pada beberapa blog, tombol tersebut lebih relevan hanya pada artikel layanan, halaman kontak, atau halaman produk.

FAQ Tombol WhatsApp Floating Blogger

1. Apa itu tombol WhatsApp floating di Blogger?

Tombol WhatsApp floating adalah tombol yang ditempatkan secara tetap pada layar menggunakan CSS sehingga tetap terlihat ketika pengunjung melakukan scroll. Tombol tersebut dapat diarahkan ke percakapan WhatsApp tertentu.

2. Apakah tombol WhatsApp Blogger membutuhkan plugin?

Tidak untuk fungsi dasar. Anda dapat membuatnya menggunakan HTML dan CSS tanpa plugin tambahan.

3. Bagaimana cara membuat WhatsApp button HTML?

Buat elemen <a> dengan URL WhatsApp sebagai href, kemudian gunakan CSS position: fixed; untuk membuat tombol tetap melayang pada layar.

4. Bagaimana format nomor untuk link WhatsApp?

Gunakan format internasional tanpa tanda +, spasi, atau strip pada bagian nomor. Untuk nomor Indonesia, awalan 0 diganti dengan 62.

5. Bagaimana cara menambahkan pesan otomatis ke WhatsApp?

Tambahkan parameter ?text= pada URL WhatsApp dan gunakan URL encoding untuk spasi maupun karakter khusus yang diperlukan.

6. Kenapa tombol WhatsApp tidak muncul di Blogger?

Periksa apakah HTML sudah ditempatkan di area yang benar, class CSS sesuai, dan tidak ada CSS template yang menimpa aturan tombol. Periksa juga struktur HTML tema apabila tombol ditempatkan langsung di template.

7. Kenapa tombol WhatsApp menutupi artikel di HP?

Hal tersebut biasanya berkaitan dengan ukuran tombol dan posisi fixed. Kurangi jarak dari sisi layar, ukuran tombol, atau sesuaikan posisinya pada media query untuk layar kecil.

8. Apakah tombol floating bisa digunakan untuk blog affiliate?

Bisa, selama WhatsApp memang digunakan sebagai jalur komunikasi yang nyata. Teks tombol sebaiknya menjelaskan fungsi sebenarnya agar tidak menyesatkan pengunjung.

9. Apakah tombol WhatsApp bisa dibuat tanpa JavaScript?

Bisa. Untuk fungsi dasar, HTML digunakan sebagai link dan CSS digunakan untuk membuatnya melayang. JavaScript tidak diperlukan kecuali Anda ingin menambahkan fungsi tambahan seperti kondisi tampil, animasi tertentu, atau perilaku yang lebih kompleks.

Kesimpulan

Membuat tombol WhatsApp floating Blogger sebenarnya cukup sederhana dan tidak membutuhkan plugin tambahan. Dengan HTML, CSS, dan link WhatsApp, Anda sudah dapat membuat tombol yang tetap terlihat ketika pengunjung melakukan scroll.

Bagian yang paling penting adalah menggunakan nomor dengan format internasional yang benar, membuat URL WhatsApp dengan tepat, kemudian menggunakan position: fixed; agar tombol tetap berada pada posisi yang diinginkan.

Untuk blog bisnis, jasa, UMKM, maupun affiliate, tombol seperti ini dapat menjadi jalur komunikasi tambahan yang praktis. Namun, desainnya tetap harus disesuaikan dengan template Blogger agar tidak menutupi konten atau mengganggu navigasi.

Setelah pemasangan selesai, lakukan pengujian pada desktop dan smartphone. Pastikan tombol dapat diklik, nomor tujuan benar, pesan otomatis sesuai, dan posisi tombol tetap nyaman ketika halaman dibaca.