Memudahkan pengunjung menghubungi pemilik website merupakan salah satu hal penting, terutama jika blog digunakan untuk menawarkan produk, jasa, konsultasi, atau layanan pelanggan. Salah satu cara praktis yang dapat diterapkan adalah memasang tombol WhatsApp melayang di Blogger.
Tombol WhatsApp melayang biasanya berada di pojok kanan bawah halaman dan tetap terlihat ketika pengunjung menggulir halaman. Ketika tombol diklik, pengunjung dapat langsung diarahkan ke WhatsApp dengan nomor tujuan dan pesan pembuka yang sudah ditentukan.
Pada tutorial ini, kita akan membuat tombol chat WhatsApp responsif di Blogger menggunakan HTML dan CSS. Ikonnya dibuat menggunakan SVG sehingga tidak memerlukan gambar ikon tambahan dari layanan eksternal.
Apa Itu Tombol WhatsApp Melayang di Blogger?
Tombol WhatsApp melayang atau floating WhatsApp button adalah tombol kontak yang menggunakan posisi fixed sehingga tetap berada pada area tertentu di layar meskipun halaman digulir.
Dalam contoh ini, tombol ditempatkan di bagian kanan bawah layar. Tombol tersebut menggunakan tautan WhatsApp Click to Chat sehingga pengunjung dapat membuka percakapan dengan nomor WhatsApp yang telah ditentukan.
Anda juga dapat menambahkan pesan otomatis. Dengan begitu, ketika pengunjung menekan tombol, kolom pesan WhatsApp sudah berisi kalimat pembuka yang dapat langsung dikirim atau diedit terlebih dahulu.
Manfaat Memasang Tombol WhatsApp di Blogger
Fitur chat langsung dapat menjadi tambahan yang berguna untuk blog yang membutuhkan komunikasi cepat dengan pengunjung. Beberapa manfaatnya antara lain:
- Memudahkan pengunjung menghubungi admin tanpa harus mencari nomor secara manual.
- Menyediakan akses kontak yang mudah ditemukan pada halaman artikel.
- Cocok untuk blog bisnis dan jasa yang membutuhkan komunikasi langsung.
- Dapat digunakan untuk konsultasi atau pertanyaan produk melalui WhatsApp.
- Pesan pembuka dapat disiapkan otomatis melalui parameter pada URL WhatsApp.
- Tidak membutuhkan plugin khusus untuk menjalankan tombol dasar.
Walaupun tombol WhatsApp dapat mempermudah komunikasi, keberadaannya tidak secara otomatis menjamin peningkatan penjualan atau konversi. Hasilnya tetap bergantung pada jenis bisnis, penawaran, kualitas layanan, dan respons admin.
Contoh Penggunaan Tombol WhatsApp di Blog
Tombol WhatsApp dapat digunakan pada berbagai jenis website dan blog. Misalnya, Anda memiliki blog yang menawarkan jasa pembuatan website, jasa desain, servis perangkat, konsultasi, produk digital, atau toko online.
Ketika pengunjung sedang membaca informasi layanan dan memiliki pertanyaan, mereka dapat langsung menekan tombol WhatsApp tanpa harus kembali ke halaman kontak.
Metode seperti ini membuat jalur komunikasi menjadi lebih sederhana karena pengunjung dapat langsung menuju aplikasi atau halaman WhatsApp.
Kode Tombol WhatsApp Melayang Blogger Siap Pakai
Berikut adalah kode lengkap yang terdiri dari CSS dan HTML. Kode CSS digunakan untuk mengatur posisi serta tampilan tombol, sedangkan HTML digunakan untuk membuat tautan WhatsApp dan ikon.
Kode CSS Tombol WhatsApp
Salin kode CSS berikut untuk membuat tombol berada di pojok kanan bawah dan tetap terlihat ketika halaman digulir.
<style>
.wa-float {
position: fixed;
width: 60px;
height: 60px;
bottom: 30px;
right: 30px;
background-color: #25d366;
color: #fff;
border-radius: 50px;
text-align: center;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: all 0.3s ease;
}
.wa-float:hover {
background-color: #128c7e;
transform: translateY(-5px);
box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.3);
}
.wa-icon {
width: 35px;
height: 35px;
fill: white;
}
@media screen and (max-width: 600px) {
.wa-float {
width: 55px;
height: 55px;
right: 18px;
bottom: 18px;
}
.wa-icon {
width: 32px;
height: 32px;
}
}
</style>
Kode HTML Tombol WhatsApp
Setelah CSS ditambahkan, gunakan kode HTML berikut untuk membuat tombol dan menghubungkannya dengan nomor WhatsApp Anda.
<a
href="https://wa.me/6281234567890?text=Halo%20Admin,%20saya%20ingin%20bertanya"
class="wa-float"
target="_blank"
rel="noopener noreferrer"
title="Chat dengan Kami"
aria-label="Chat dengan Kami melalui WhatsApp"
>
<svg
class="wa-icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
aria-hidden="true"
>
<path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-23.1-115-65-157zM223.9 415.2c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 334.1l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-103.6 84.4-188 188.1-188 50.3 0 97.6 19.6 133.2 55.1s55.1 82.9 55.1 133.2c0 103.6-84.4 188-188.1 188zm103.5-141.6c-5.7-2.8-33.6-16.6-38.8-18.5-5.2-1.9-9-2.8-12.8 2.8-3.8 5.7-14.7 18.5-18 22.3-3.3 3.8-6.6 4.3-12.3 1.4-5.7-2.8-24-8.9-45.7-28.3-16.9-15.1-28.4-33.8-31.7-39.5-3.3-5.7-.3-8.8 2.5-11.6 2.5-2.5 5.7-6.6 8.5-9.9 2.8-3.3 3.8-5.7 5.7-9.5 1.9-3.8.9-7.1-.5-9.9-1.4-2.8-12.8-30.8-17.5-42.2-4.6-11.1-9.2-9.6-12.8-9.8-3.3-.2-7.1-.2-10.9-.2-3.8 0-10 1.4-15.2 7.1-5.2 5.7-20 19.5-20 47.1 0 27.6 20.4 54.3 23.3 58 2.8 3.8 39.5 60.3 95.7 84.6 13.4 5.8 23.9 9.3 32 11.9 13.5 4.3 25.8 3.7 35.5 2.2 10.9-1.7 33.6-13.7 38.3-27 4.7-13.3 4.7-24.7 3.3-27-1.4-2.4-5.2-3.8-10.9-6.6z"/>
</svg>
</a>
Cara Memasang Tombol WhatsApp di Blogger
Untuk memasang tombol ini, Anda tidak perlu mengubah keseluruhan kode template. Anda dapat menggunakan gadget HTML/JavaScript melalui menu Tata Letak Blogger.
1. Masuk ke Dashboard Blogger
Buka dashboard Blogger dan pilih blog yang ingin Anda pasangi tombol WhatsApp.
2. Buka Menu Tata Letak
Pilih menu Tata Letak atau Layout pada dashboard Blogger.
3. Pilih Tambahkan Gadget
Cari area yang memungkinkan Anda menambahkan gadget. Anda dapat memilih area sidebar, footer, atau lokasi lain yang tersedia pada template.
4. Pilih HTML/JavaScript
Pada daftar gadget yang tersedia, pilih HTML/JavaScript. Biarkan kolom judul kosong agar tidak menghasilkan judul widget tambahan pada halaman.
5. Masukkan Kode
Tempelkan kode CSS dan HTML yang telah disediakan ke dalam bagian konten gadget.
6. Simpan Perubahan
Klik Simpan, kemudian simpan kembali perubahan pada halaman Tata Letak apabila Blogger meminta Anda menyimpan layout.
Cara Mengganti Nomor WhatsApp
Bagian yang paling penting untuk diubah adalah nomor WhatsApp pada atribut href.
Pada contoh kode terdapat nomor:
https://wa.me/6281234567890
Ganti 6281234567890 dengan nomor WhatsApp Anda sendiri.
Untuk nomor Indonesia, gunakan kode negara 62 dan hilangkan angka 0 di bagian paling depan nomor.
Contohnya, apabila nomor Anda ditulis:
081234567890
Maka format yang digunakan pada URL WhatsApp menjadi:
6281234567890
Jangan menggunakan tanda +, spasi, atau tanda hubung pada bagian nomor dalam URL tersebut.
Cara Mengubah Pesan Otomatis WhatsApp
Selain nomor tujuan, Anda juga dapat mengganti pesan pembuka yang muncul ketika tombol diklik.
Contoh kode:
?text=Halo%20Admin,%20saya%20ingin%20bertanya
Karena URL tidak menggunakan spasi secara langsung, karakter spasi pada pesan ditulis sebagai %20.
Misalnya Anda ingin menggunakan pesan:
Halo Admin, saya ingin mengetahui informasi produk.
Format URL-nya dapat dibuat menjadi:
https://wa.me/6281234567890?text=Halo%20Admin,%20saya%20ingin%20mengetahui%20informasi%20produk.
Anda dapat menyesuaikan pesan tersebut dengan kebutuhan bisnis, misalnya untuk pertanyaan harga, konsultasi, pemesanan, atau informasi layanan.
Cara Membuat Tombol WhatsApp Responsif di HP
Tombol floating sebaiknya tidak terlalu besar pada layar smartphone karena dapat menutupi sebagian konten atau mengganggu tombol navigasi lainnya.
Pada kode di atas, media query digunakan untuk mengecilkan ukuran tombol ketika lebar layar mencapai maksimal 600 piksel.
@media screen and (max-width: 600px) {
.wa-float {
width: 55px;
height: 55px;
right: 18px;
bottom: 18px;
}
.wa-icon {
width: 32px;
height: 32px;
}
}
Jika tombol masih terlalu besar atau terlalu dekat dengan tepi layar, nilai width, height, right, dan bottom dapat disesuaikan.
Cara Mengubah Warna Tombol WhatsApp
Warna utama tombol diatur menggunakan properti background-color.
.wa-float {
background-color: #25d366;
}
Warna ketika kursor berada di atas tombol diatur menggunakan:
.wa-float:hover {
background-color: #128c7e;
}
Anda dapat menyesuaikan warna tersebut jika ingin menyesuaikannya dengan identitas visual blog. Namun, pastikan warna tombol tetap memiliki kontras yang cukup agar mudah dikenali.
Cara Menguji Tombol WhatsApp
Setelah tombol berhasil dipasang, lakukan pengujian sebelum artikel atau halaman digunakan oleh pengunjung.
- Buka halaman utama blog.
- Periksa apakah tombol muncul di pojok kanan bawah.
- Gulir halaman ke atas dan bawah untuk memastikan tombol tetap berada pada posisinya.
- Klik tombol WhatsApp.
- Pastikan nomor tujuan sudah benar.
- Pastikan pesan pembuka muncul sesuai pengaturan.
- Uji kembali menggunakan smartphone.
Jika semuanya bekerja dengan baik, tombol sudah siap digunakan.
Masalah Umum Saat Memasang Tombol WhatsApp
Tombol Tidak Muncul
Periksa apakah kode CSS dan HTML sudah ditempelkan secara lengkap. Pastikan juga tag <style> memiliki tag penutup </style>.
WhatsApp Tidak Membuka Nomor yang Benar
Periksa kembali nomor yang terdapat pada URL wa.me. Pastikan menggunakan kode negara dan tidak menggunakan angka 0 pada bagian awal nomor.
Pesan Otomatis Tidak Sesuai
Periksa bagian ?text= pada URL. Spasi dalam pesan harus dikodekan sebagai %20 atau menggunakan format URL encoding yang sesuai.
Tombol Menutupi Elemen Lain
Jika tombol menutupi menu, cookie notice, atau elemen lain pada blog, Anda dapat mengubah nilai bottom dan right agar posisinya lebih sesuai.
Tampilan Berbeda pada Template Tertentu
Setiap template Blogger dapat memiliki CSS bawaan yang berbeda. Jika tampilan tombol tidak sesuai, periksa apakah template memiliki aturan CSS yang menargetkan elemen a, svg, atau elemen dengan posisi fixed.
Apakah Tombol WhatsApp Mempengaruhi Kecepatan Blog?
Kode dasar seperti ini relatif sederhana karena tidak membutuhkan library JavaScript eksternal untuk membuat fungsi tombol. Namun, performa halaman tidak hanya ditentukan oleh satu tombol.
Kecepatan blog juga dipengaruhi oleh ukuran gambar, jumlah widget, script pihak ketiga, iklan, video, CSS, dan berbagai sumber daya lain yang dimuat halaman.
Karena itu, setelah memasang tombol WhatsApp, tetap lakukan pengujian performa blog untuk memastikan tidak ada konflik dengan elemen lain.
Tips Menggunakan Tombol WhatsApp di Blog Bisnis
Jika tombol WhatsApp digunakan untuk bisnis, sebaiknya gunakan pesan pembuka yang jelas dan sesuai dengan kebutuhan pengunjung.
Contohnya:
Halo Admin, saya ingin mengetahui informasi mengenai jasa pembuatan website.
Pesan seperti ini dapat membantu admin mengetahui konteks pertanyaan sejak awal percakapan. Anda juga dapat membuat pesan berbeda berdasarkan jenis halaman atau produk yang ditawarkan.
Kesimpulan
Memasang tombol WhatsApp melayang di Blogger merupakan salah satu cara sederhana untuk menyediakan akses komunikasi langsung kepada pengunjung. Dengan menggunakan HTML dan CSS, tombol dapat ditempatkan secara fixed di pojok kanan bawah dan tetap terlihat ketika halaman digulir.
Anda juga dapat menyesuaikan nomor WhatsApp, pesan otomatis, ukuran tombol, warna, posisi, dan tampilan responsif sesuai kebutuhan website.
Pastikan nomor WhatsApp yang digunakan benar, lakukan pengujian pada desktop dan smartphone, serta perhatikan posisi tombol agar tidak menutupi elemen penting pada halaman.
Dengan navigasi yang jelas dan jalur komunikasi yang mudah ditemukan, blog Blogger dapat memberikan pengalaman yang lebih praktis bagi pengunjung yang membutuhkan informasi atau ingin menghubungi pemilik website.
FAQ Tombol WhatsApp Melayang di Blogger
Apakah tombol WhatsApp bisa dipasang di Blogger?
Ya. Tombol WhatsApp dapat dipasang di Blogger menggunakan HTML dan CSS melalui gadget HTML/JavaScript pada menu Tata Letak.
Bagaimana cara membuat tombol WhatsApp tetap berada di pojok layar?
Gunakan CSS position: fixed dengan properti bottom dan right untuk menentukan jaraknya dari tepi layar.
Bagaimana cara mengganti nomor WhatsApp pada tombol?
Ganti nomor pada URL https://wa.me/ dengan nomor WhatsApp Anda menggunakan format kode negara. Untuk nomor Indonesia, gunakan awalan 62 dan hilangkan angka 0 di awal nomor.
Apakah tombol WhatsApp bisa menggunakan pesan otomatis?
Ya. Pesan pembuka dapat ditambahkan menggunakan parameter ?text= pada URL WhatsApp. Spasi pada pesan dapat ditulis menggunakan kode URL seperti %20.
Apakah tombol WhatsApp responsif di smartphone?
Ya. Ukuran dan posisi tombol dapat disesuaikan menggunakan media query CSS sehingga tampilannya lebih sesuai pada layar smartphone.
Apakah tombol WhatsApp otomatis meningkatkan penjualan?
Tidak ada jaminan bahwa tombol WhatsApp secara otomatis meningkatkan penjualan. Fitur ini terutama berfungsi untuk mempermudah komunikasi antara pengunjung dan pemilik website. Hasil akhirnya dipengaruhi oleh berbagai faktor seperti penawaran, kualitas layanan, dan cara bisnis menangani pertanyaan pelanggan.