Cara Membuat Tombol Widget Whatsapp blogspot

whatsapp chat button on website or blog - beberapa hari lalu, saya menemukan tutorial cara membuat widget whatsapp yang melayang di halaman blog anda. bagi anda yang mau memasang tombol whatsapp di blog anda, blog artikel ini adalah pilihan baik untuk anda.

widget ini sangat berguna untuk pengunjung yang sedang bermasalah dengan tutorial yang di ikuti di blog suryapero. saya sengaja memasang widget whatsapp di suryapero ini, karena mudah di hubungi dengan cara whatsapp dan paling banyak di gunakan di indonesia.

Cara Buat Tombol Widget Whatsapp

1. Login dengan akun blogspot anda.
2. Masuk ke Theme > Edit HTML > cari </body> dengan cara Ctrl+F.
3. Masukkan script html dibawah ini, di bawah </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>

4. Cari <style> dan masukkan script css di bawah ini, letakkan di dalam <style>.

.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;
}

Tampilan tombol whatsapp ini akan tampil di bawah kanan blog anda, apabila anda mau mengubah posisi tombol whatsapp.

Anda bisa mengubah css
bottom: 10px
right: 30px
left: 20px
top: 50px
silahkan atur pixel yang anda inginkan.

Demikianlah cara membuat widget whatsapp melayang. semoga bermanfaat untuk blog anda dan memudahkan pengunjung untuk menghubungi anda.

Berbagi :