Cara Membuat Tombol Chat Whatsapp di Blogger
Tombol chat WA atau whatsapp di website memiliki kegunaan, yaitu untuk memudahkan klien maupun pengunjung untuk menghubungi pemilik website atau blog tersebut. Apalagi jika website atau blog tersebut dibuat dengan tujuan sebagai website atau blog bisnis, toko online, maupun jasa-jasa lainnya.
Dengan adanya tombol chat whatsapp, maka klien maupun pengunjung dengan sekali klik dapat terhubung ke aplikasi WA atau whatsapp dari si pemilik website dan dapat berkomunikasi secara mudah, lancar serta leluasa via whatsapp.
Cara membuat tombol chat whatsapp di blogger sangatlah mudah. Letak dari tombol ini akan terus muncul secara melayang atau mengambang di halaman depan maupun di area halaman isi, tanpa memberatkan loading dari website atau blog tersebut.
Tombol chat whatsapp floating atau sticky ini letaknya berada di area sudut bawah kanan maupun kiri tanpa mengganggu akses browsing atau scrolling di halaman website atau blog itu sendiri. Selain itu, warnanya dapat disesuaikan atau dapat dirubah sesuai dengan warna tampilan dari website atau blog tersebut.
Berikut Cara membuat tombol chat whatsapp melayang atau mengambang di blog, dilengkapi dengan panduan bergambar (perhatikan kotak merah serta tanda panah).
1. Langkah pertama, pada dashboard blogger klik menu Tema, kemudian Sesuaikan.
 |
| Gambar 1 |
2. Kemudian pilih Edit HTML, setelah terbuka tekan bersamaan Ctrl+F pada keyboard.
 |
| Gambar 2 |
3. Pada kolom Search ketik </body> lalu tekan Enter pada keyboard.
 |
| Gambar 3 |
4. Maka akan muncul kode </body> yang di blok kuning.
 |
| Gambar 4 |
5. Kemudian beri jarak atau area kosong diatas kode </body> tersebut, atau bisa juga tekan Enter di belakang kode atau tanda >.
 |
| Gambar 5 |
6. Copy kode dibawah ini (berwarna merah), lalu pastekan atau letakkan di area kosong atau diatas kode </body>. Ganti nomor whatsappnya dengan milik kalian (nomor 0 didepan diganti dengan 62).
<a class='fixed-whatsapp' href='https://api.whatsapp.com/send?phone=6281226776464' rel='nofollow noopener' target='_blank' title='Whatsapp'/>
Gambar 6
7. Kemudian klik simpan atau Save, lalu scroll kembali ke paling atas, kemudian tekan Ctrl+F pada keyboard. Selanjutnya pada tab atau kolom Search ketik ]]></b:skin> lalu klik Enter pada keyboard.
 |
| Gambar 7 |
8. Maka akan muncul kode ]]></b:skin> yang di blok kuning.
 |
| Gambar 8 |
9. Kemudian beri jarak atau area kosong diatas kode ]]></b:skin> tersebut, atau bisa juga dengan tekan Enter di belakang kode atau tanda }.
 |
| Gambar 9 |
10. Copy semua kode dibawah ini (berwarna merah), lalu pastekan atau letakkan di area kosong atau diatas kode ]]></b:skin>.
/*Tombol Chat WhatsApp*/
.fixed-whatsapp{position:fixed;bottom:20px;left:20px;width:50px;height:50px;z-index:9999}
.fixed-whatsapp:before{content:"";background-repeat:no-repeat;background-size:34px 34px;background-position:center center;width:50px;height:50px;background-image:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='32' height='32' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23ffffff' 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'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");background-color:#808000;position:absolute;top:0;left:0;border-radius:100%;box-shadow:0 1px 1.5px 0 rgba(0,0,0,.12),0 1px 1px 0 rgba(0,0,0,.24)}
 |
| Gambar 10 |
11. Untuk merubah letak atau posisi tombol di kanan atau kiri, cukup ganti kode left (panah merah) menjadi right ataupun sebaliknya, sedangkan untuk merubah atau mengganti warna tombol chat bisa dengan mengganti kode #808000 (panah hijau )sesuai dengan kode warna yang di inginkan atau bisa ketik di mesin pencarian dengan cara ketik kode warna (hitam, merah, biru, dll) maka hasil akan terlihat.
 |
| Gambar 11 |
Selesai, Cara membuat tombol chat whatsapp atau WA melayang, mengambang maupun floating scticky whatsapp chat dengan sangan mudah melalui Edit HTML pada situs website berbasis blogger.
 |
| Tampilan via Android Smartphone |