Menambahkan Tombol Whatsapp Custom yang Melayang dalam sebuah Template Blog

Melihat dari statistik harian diblog ini, saya melihat ada beberapa visitor yang mampir ke blog kangwira dengan mencari Query Floating Whatsapp Button atau Tombol Whatsapp Melayang.

Jadi di artikel ini saya coba untuk membantu teman-teman untuk mempercantik tampilan Blog nya dengan menggunakan Whatsapp Button Melayang ini.

Malam tadi saya menyempatkan diri untuk membuat sebuah Whatsapp floating button menggunakan Icon SVG setelah itu saya coba pasang di blog dummy saya, hasilnya pun sudah cukup memuaskan menurut saya.

Tapi setelah saya coba pasang di template blog kangwira ini, ternyata icon SVG nya tidak muncul sama sekali. Mungkin karena memang ada CSS yang konflik, saya kurang paham juga sih dan sampai sekarang masih saya cari tahu penyebabnya.

Kenapa saya menggunakan Icon SVG didalam Tombol Whatsapp Melayang?

Alasannya sangat singkat sih sebenarnya, karena SVG dibuat untuk dapat membantu meningkatkan kecepatan blog. Pada dasarnya, SVG tidak perlu memanggil CSS Ekternal seperti Font Awesome.

Tapi karena saya sendiri mengalami bahwa icon SVG Whatsapp ini tidak muncul di tempate kangwira. Jadi saya menyiapkan 2 script yang bisa kamu pakai salah satu yah teman-teman.

Oke kita langsung saja masuk ke codingannya.

Floating Whatsapp Button w/ SVG

Langkah pertama, pastikan teman-teman sudah login dan berada di dalam halaman edit HTML di dashboard masing-masing.

Setelah itu, coba salin kode HTML dibawah, lalu letakkan didalam elemen footer pada template yang kamu gunakan.

<a target='_blank' expr:href='&quot;https://api.whatsapp.com/send?phone=6282310856967&amp;text=Assalamualaikum%20Kang%20Wira..&quot;' class="float-whatsapp"><svg>
    <path d="M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z" />
</svg></a>

Setelah itu, salin juga CSS berikut ini, dan letakkan dibawah kode HTML diatas. Kenapa saya menyarankan untuk menyimpan CSS ini tepat dibawah Kode diatas, karena agar kode dibawah ini menimpah CSS yang ada di dalam template teman-teman secara paksa.

<style>.float-whatsapp svg{position:absolute;right:8px;top:11px;width:25px;height:24px}
.float-whatsapp svg path{fill:#fff}
.float-whatsapp {z-index:999;cursor:pointer;width:50px;height:50px;border-radius:50%;background:green;text-align:center;position:fixed;bottom:1.7rem;left:0.8rem;border:2.5px solid #fff;box-shadow:1px 1px 10px 1px #333}</style>

Simpan template yang sudah kamu edit tadi, lalu lihat hasilnya. Saya juga sudah menyiapkan demo Tombol Whatsapp Versi SVG ini di blog dummy saya.

beberapa kasus umum dalam penggunaan Icon SVG ini, adalah sulitnya menyesuaikan ukuran dan letak icon terhadap media yang disiapkan. Jadi apabila posisi Iconnya belum sesuai, teman-teman tinggal menyesuaikan class pada CSS berikut ini
.float-whatsapp svg yang ada pada kolom CSS diatas.

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 sama seperti cara diatas yah teman-teman.

<a target="_blank" expr:href='&quot;https://api.whatsapp.com/send?phone=6282310856967&amp;text=Assalamualaikum%20Kang%20Wira&quot;' class="float-whatsapp">
<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>

Simpan template, maka hasilnya harusnya menjadi seperti tombol dibawah ini.

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.