Cara Menambahkan Tombol Floating Whatsapp Button
Jadi di artikel ini saya coba untuk membantu teman-teman untuk mempercantik tampilan Blog nya dengan menggunakan Whatsapp Button Melayang ini.
Floating Whatsapp Button w/ Font Awesome
Yaap.. pada dasarnya Font-Awesome memanggil CSS Ekternal dari CDN yang sebenarnya dapat mengurangi kecepatan blog. Tidak sedikit blogger yang mengeluhkan kecepatan loading blognya menurun karena menggunakan Font-Awesome.
Tapi saya sarankan teman-teman untuk menggunakan Tombol Whatsapp Melayang versi Font-Awesome ini sebagai alternatif saja apabila tidak dapat menggunakan Versi SVG diatas.
kelebihan menggunakan Versi Font Awesome ini, teman-teman bisa dengan mudah mengatur ukuran iconnya.
Nah, jika teman-teman menggunakan versi yang ini, maka teman-teman wajib memanggil CSS Font-Awesome dengan cara menyisipkan kode dibawah ini setelah kode <head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
Oke.. kita lanjutkan memasang Tombol Whatsappnya yah teman-teman, agar bisa melayang di kiri bawah pada template kamu.
Salin kode HTML dibawah ini dan letakkan dibawah code diatas..
<a target="_blank" expr:href='"https://api.whatsapp.com/send?phone=628816016129&text=Assalamualaikum%20Kang%20Panda"' class="float-whatsapp">
<i class="fa fa-whatsapp"></i></a>
<i class="fa fa-whatsapp"></i></a>
Lalu sisipkan kode CSS ini dibawah kode HTML Versi Font-Awesome diatas.
<style>.float-whatsapp{cursor:pointer;width:50px;height:50px;border-radius:50%;background:green;text-align:center;position:fixed;bottom:1.7rem;left:1.8rem;border:2.5px solid #fff;box-shadow:1px 1px 10px 1px #333}
.float-whatsapp i{color:#fff;z-index:99;line-height:50px;font-size:150%}</style>
.float-whatsapp i{color:#fff;z-index:99;line-height:50px;font-size:150%}</style>
Simpan template.
Untuk pengaturan kata-kata didalam widget Whatsapp nya, teman-teman bisa modifikasi kalimat yang sudah saya tandai diatas.
Nah teman-teman bisa coba salah satu versi diatas yah. Apabila masih belum bisa menampilkan sesuai dengan harapan teman-teman, silahkan berikan komentar di bawah ini yah.
Jangan lupa untuk berlangganan artikel Kang Wira agar selalu mendapatkan artikel terbaru lainnya yang saya rangkum agar lebih mudah di praktekkan.
Sekian dulu artikel kali ini, Semoga bermanfaat.
Mungkin Anda Suka
