Cara Membuat Tombol Chat Whatsapp Melayang Di Blogspot

Tombol ini saya buat dengan 2 versi yaitu menampilkan ikon dengan CSS dan menampilkan ikon dengan HTML. Tentu saja keduanya menggunakan ikon SVG.

1. Ikon dengan CSS
Dengan ini maka kode HTML menjadi lebih simpel karena tidak menggunakan kode HTML ikon SVG.

- Simpan kode HTML berikut di atas kode </body> :

<a class='fixed-whatsapp' href='https://api.whatsapp.com/send?phone=628xxxxxxxxxx' rel='nofollow noopener' target='_blank' title='Whatsapp' />

Ganti kode 628xxxxxxxxxx dengan nomor WA Anda.

- Tambahkan CSS berikut di style blog Anda :

.fixed-whatsapp {position: fixed;bottom: 20px;right: 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: #00C853;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);}

2. Ikon dengan HTML
Dengan ini maka CSS nya lebih kecil

Simpan kode HTML berikut di atas kode </body> :

<a class='fixed-whatsapp' href='https://api.whatsapp.com/send?phone=628xxxxxxxxxx' rel='nofollow noopener' target='_blank' title='Whatsapp'>
<svg viewBox='0 0 24 24' width='34' height='34'>
<path fill='#ffffff' 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>

Ganti kode 628xxxxxxxxxx dengan nomor WA Anda.

Tambahkan CSS berikut di style blog Anda :

.fixed-whatsapp {position: fixed;bottom: 20px;right: 20px;width: 50px;height: 50px;line-height: 50px;z-index: 9999;text-align: center;}

.fixed-whatsapp:before {content: "";width: 50px;height: 50px;background-color: #00C853;position: absolute;border-radius: 100%;box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .24);

z-index: 1;top: 0;left: 0;}

.fixed-whatsapp svg {vertical-align: middle;z-index: 2;position: relative;}

Jika ingin menambahkan kata-kata di atasnya, silahkan tambahkan CSS berikut :

.fixed-whatsapp:after {content: "Hello Chat Aku disini yach...!!!";

width: 100px;padding: 5px 10px;position: absolute;bottom: 100%;margin-bottom: 10px;right:-150px;text-align: right;

color: #555;border: 1px solid #dedede;background: rgba(255,255,255,.5);border-radius: 4px;opacity: 0;

transition:all .4s ease-in-out;font-size: 90%;line-height: 1.1;}

.fixed-whatsapp:hover:after {opacity: 1;right: 0;}

Yang ditandai silahkan sesuaikan dengan kata-kata Anda. Silahkan coba demonya dan hover ikonnya.