Menambahkan Tombol Whatsapp Custom Yang Melayang Dalam Sebuah Template Blog

Selasa, 08 Mei 2018

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

Makara di artikel ini aku coba untuk membantu teman-teman untuk mempercantik tampilan Blog nya dengan memakai Whatsapp Button Melayang ini.

Malam tadi aku menyempatkan diri untuk menciptakan sebuah Whatsapp floating button memakai Icon SVG sesudah itu aku coba pasang di blog dummy saya, kesannya pun sudah cukup memuaskan berdasarkan saya.

Tapi sesudah aku coba pasang di template blog kangwira ini, ternyata icon SVG nya tidak muncul sama sekali. Mungkin alasannya yakni memang ada CSS yang konflik, aku kurang paham juga sih dan hingga kini masih aku cari tahu penyebabnya.

Kenapa aku memakai Icon SVG didalam Tombol Whatsapp Melayang?

Alasannya sangat singkat sih sebenarnya, alasannya yakni SVG dibentuk untuk sanggup membantu meningkatkan kecepatan blog. Pada dasarnya, SVG tidak perlu memanggil CSS Ekternal menyerupai Font Awesome.

Tapi alasannya yakni aku sendiri mengalami bahwa icon SVG Whatsapp ini tidak muncul di tempate kangwira. Makara aku menyiapkan 2 script yang sanggup kau pakai salah satu yah teman-teman.

Oke kita pribadi 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 arahan HTML dibawah, kemudian letakkan didalam elemen footer pada template yang kau 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 arahan HTML diatas. Kenapa aku menyarankan untuk menyimpan CSS ini sempurna dibawah Kode diatas, alasannya yakni supaya arahan 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 kau edit tadi, kemudian lihat hasilnya. Saya juga sudah menyiapkan demo Tombol Whatsapp Versi SVG ini di blog dummy saya.

beberapa kasus umum dalam penggunaan Icon SVG ini, yakni sulitnya menyesuaikan ukuran dan letak icon terhadap media yang disiapkan. Makara 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.. intinya Font-Awesome memanggil CSS Ekternal dari CDN yang bekerjsama sanggup mengurangi kecepatan blog. Tidak sedikit blogger yang mengeluhkan kecepatan loading blognya menurun alasannya yakni memakai Font-Awesome.

Tapi aku sarankan teman-teman untuk memakai Tombol Whatsapp Melayang versi Font-Awesome ini sebagai alternatif saja apabila tidak sanggup memakai Versi SVG diatas.

kelebihan memakai Versi Font Awesome ini, teman-teman sanggup dengan gampang mengatur ukuran iconnya.

Nah, kalau teman-teman memakai versi yang ini, maka teman-teman wajib memanggil CSS Font-Awesome dengan cara menyisipkan arahan dibawah ini sesudah arahan <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, supaya sanggup melayang di kiri bawah pada template kamu.

Salin arahan HTML dibawah ini sama menyerupai 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 arahan CSS ini dibawah arahan 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 kesannya harusnya menjadi menyerupai tombol dibawah ini.

Untuk pengaturan kata-kata didalam widget Whatsapp nya, teman-teman sanggup modifikasi kalimat yang sudah aku tandai diatas.

Nah teman-teman sanggup coba salah satu versi diatas yah. Apabila masih belum sanggup menampilkan sesuai dengan cita-cita teman-teman, silahkan berikan komentar di bawah ini yah.

Jangan lupa untuk berlangganan artikel Kang Wira supaya selalu mendapat artikel terbaru lainnya yang aku rangkum supaya lebih gampang di praktekkan.

Sekian dulu artikel kali ini, Semoga bermanfaat.