Memiliki tombol Call to Action (CTA) yang menarik perhatian adalah kunci utama untuk meningkatkan konversi penjualan di blog. Salah satu teknik yang paling efektif adalah dengan memberikan efek animasi berkedip atau berdenyut pada tombol tersebut. Efek ini secara otomatis akan menarik mata pengunjung untuk melihat dan mengklik tombol tersebut tanpa merasa terganggu.
Dalam tutorial ini, kita akan menggunakan perpaduan HTML dan CSS murni untuk membuat tombol yang memiliki efek denyut (pulse). Teknik ini sangat ringan sehingga tidak akan membebani kecepatan loading blog Anda di Blogger atau Blogspot.
Kode HTML Tombol Beli
Langkah pertama adalah menyiapkan struktur HTML untuk tombolnya. Anda bisa meletakkan kode ini di dalam postingan Blogger pada mode HTML atau di dalam widget HTML/JavaScript.
<a href="URL_TUJUAN_ANDA" class="btn-order-pulse">
BELI SEKARANG JUGA
</a>Pastikan Anda mengganti teks URL_TUJUAN_ANDA dengan link WhatsApp atau link produk Anda, serta ubah teks BELI SEKARANG JUGA sesuai dengan keinginan Anda.
Kode CSS Efek Denyut (Pulse)
Langkah kedua adalah memberikan sentuhan gaya dan animasi. Kode CSS berikut ini akan membuat tombol memiliki bayangan yang melebar keluar secara berulang, memberikan kesan seperti jantung yang berdenyut.
.btn-order-pulse {
display: inline-block;
padding: 15px 30px;
background-color: #ff4757;
color: #ffffff;
font-weight: bold;
text-decoration: none;
border-radius: 50px;
font-family: Arial, sans-serif;
text-align: center;
transition: all 0.3s ease;
box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.7);
animation: pulse-animation 1.5s infinite;
}
@keyframes pulse-animation {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 20px rgba(255, 71, 87, 0);
}
100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(255, 71, 87, 0);
}
}
.btn-order-pulse:hover {
background-color: #e84118;
animation: none;
transform: scale(1.05);
}Cara Memasang di Blogger
Untuk menerapkan kode di atas pada Blogger, Anda memiliki dua pilihan utama. Pilihan pertama adalah dengan memasukkan kode CSS di dalam menu Tema, kemudian pilih Sesuaikan, lalu pilih Tingkat Lanjut, dan cari bagian Tambahkan CSS. Masukkan kode CSS di sana dan simpan.
Langkah selanjutnya adalah masuk ke postingan atau artikel tempat Anda ingin menampilkan tombol. Ubah mode penulisan dari Menulis ke mode HTML. Paste kode HTML tombol di lokasi yang Anda inginkan. Setelah itu, simpan dan lihat hasilnya di blog Anda.
Tips Kustomisasi Tombol
Anda bisa menyesuaikan warna tombol agar serasi dengan desain blog Anda. Untuk mengubah warna dasar, ganti kode warna hex pada bagian background-color dan box-shadow. Misalnya, jika ingin menggunakan warna hijau WhatsApp, Anda bisa mengganti kode warnanya menjadi #25d366.
Jika Anda merasa animasi denyutnya terlalu cepat atau lambat, Anda bisa mengubah angka 1.5s pada bagian animation. Semakin besar angkanya, maka animasi akan semakin lambat, dan sebaliknya.
Dengan menambahkan tombol interaktif seperti ini, peluang pengunjung untuk melakukan klik akan meningkat drastis dibandingkan hanya menggunakan teks link biasa atau gambar statis yang membosankan.