WEBTEKNOLOGI - Salah satu fitur yang sering ditemui di website atau blog saat ini adalah tombol WhatsApp melayang. Tombol ini memungkinkan pengunjung untuk dengan mudah menghubungi Anda atau bisnis Anda melalui aplikasi WhatsApp tanpa harus mencari halaman kontak terlebih dahulu.
Bagi Anda yang menggunakan platform blog Blogger, membuat tombol WhatsApp melayang sebenarnya cukup mudah.
Dalam artikel ini, kami akan memberikan panduan langkah demi langkah untuk membuat fitur tersebut di blog Anda.
Dapatkan Kode Tombol WhatsApp Melayang
Pertama-tama, Anda perlu mendapatkan kode HTML dan CSS untuk membuat tombol WhatsApp melayang. Anda bisa menggunakan kode yang tersedia secara gratis di internet atau membuat sendiri.
Salah satu contoh kode yang bisa Anda gunakan adalah sebagai berikut:
html
<a href="https://api.whatsapp.com/send?phone=6281234567890&text=Halo,%20saya%20ingin%20bertanya..." target="_blank" class="whatsapp-button">
<i class="fab fa-whatsapp"></i>
</a>
css
.whatsapp-button {
position: fixed;
width: 50px;
height: 50px;
bottom: 20px;
right: 20px;
background-color: #25D366;
color: #fff;
border-radius: 50px;
text-align: center;
font-size: 30px;
box-shadow: 2px 2px 3px #999;
z-index: 100;
}
.whatsapp-button i {
margin-top: 10px;
}
Kode di atas akan membuat sebuah tombol berbentuk lingkaran dengan ikon WhatsApp di dalamnya. Tombol ini akan muncul di sudut kanan bawah halaman dan memiliki efek bayangan serta `z-index` yang lebih tinggi agar terlihat melayang di atas konten lainnya.
Jangan lupa untuk mengganti nomor telepon `6281234567890` dengan nomor WhatsApp Anda sendiri.
Tambahkan Kode ke Template Blogger
Selanjutnya, Anda perlu menambahkan kode HTML dan CSS tersebut ke dalam template blog Anda di Blogger. Ikuti langkah-langkah berikut:
1. Buka dashboard Blogger Anda dan pilih blog yang ingin Anda tambahkan tombol WhatsApp melayang.
2. Klik menu "Template" di sebelah kiri.
3. Klik tombol "Edit HTML" untuk membuka kode HTML template Anda.
4. Cari posisi di mana Anda ingin menempatkan tombol WhatsApp melayang. Biasanya, Anda bisa meletakkannya di bagian akhir elemen `<body>`.
5. Tambahkan kode HTML dan CSS yang telah Anda persiapkan sebelumnya.
6. Klik "Simpan Templat" untuk menyimpan perubahan.
Setelah Anda menyimpan perubahan, tombol WhatsApp melayang akan muncul di blog Anda.
Atur Posisi Tombol WhatsApp Melayang
Jika Anda ingin mengubah posisi tombol WhatsApp melayang, Anda bisa melakukannya melalui CSS. Anda dapat menyesuaikan nilai `bottom` dan `right` pada kelas `.whatsapp-button` sesuai dengan keinginan Anda.
Sebagai contoh, jika Anda ingin memindahkan tombol ke sudut kiri bawah, Anda dapat mengubah kodenya menjadi:
css
.whatsapp-button {
position: fixed;
width: 50px;
height: 50px;
bottom: 20px;
left: 20px;
background-color: #25D366;
color: #fff;
border-radius: 50px;
text-align: center;
font-size: 30px;
box-shadow: 2px 2px 3px #999;
z-index: 100;
}
Tambahkan Efek Hover dan Animasi
Untuk membuat tampilan tombol WhatsApp melayang menjadi lebih menarik, Anda bisa menambahkan efek hover dan animasi. Berikut adalah contoh kodenya:
css
.whatsapp-button {
/* Kode sebelumnya */
transition: all 0.3s ease;
}
.whatsapp-button:hover {
transform: scale(1.1);
box-shadow: 4px 4px 6px #999;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
60% {
transform: translateY(-5px);
}
}
.whatsapp-button.bounce {
animation: bounce 1s;
}
Kode di atas akan membuat tombol WhatsApp melayang memiliki efek hover yang akan memperbesar ukurannya dan menambah bayangan. Selain itu, juga terdapat animasi "bounce" yang akan dijalankan saat tombol diklik.
Anda bisa menambahkan kode animasi tersebut ke dalam skrip JavaScript yang akan menjalankan animasi saat tombol diklik.
javascript
document.querySelector('.whatsapp-button').addEventListener('click', function() {
this.classList.add('bounce');
setTimeout(function() {
this.classList.remove('bounce');
}.bind(this), 1000);
});
Dengan mengikuti langkah-langkah di atas, Anda dapat dengan mudah menambahkan tombol WhatsApp melayang ke blog Anda yang dibuat menggunakan platform Blogger.
Tombol ini akan memudahkan pengunjung untuk menghubungi Anda melalui WhatsApp tanpa harus mencari halaman kontak terlebih dahulu.
Jangan lupa untuk menyesuaikan kode sesuai dengan kebutuhan dan gaya desain blog Anda. Selamat mencoba! (Webteknologi/Admin)
0 Komentar untuk "Cara Buat Tombol WhatsApp Melayang Khusus Blogger"