Cara Menciptakan Tombol Direct Chat Whatsapp Di Blog Dengan Svg
Cara Membuat Tombol Direct Chat Whatsapp Di Blog Dengan SVG - Tombol direct chat whatsapp ini biasanya dipakai oleh pengguna blog/website yang berkeinginan untuk mempermudah pengunjung berkomunikasi via chatting whatsapp.
Beraneka ragam cara dari mereka untuk meletakkan tombol chat whatsapp, ada yang berbentuk tombol yang di sematkan sesudah artikel yang mereka tulis dan ada juga yang meletakkannya di kepingan bawah halaman blog dengan posisi melayang.
Memang benar adanya, kalau ada yang menyampaikan dengan menyediakan tombol direct chat whatsapp di halaman blog akan cukup bermanfaat. Karena dengan link atau tombol direct chat whatsapp ini, pengunjung blog kita akan dengan sangat mudahnya untuk menghubungi kita via whatsapp.
Tombol Direct Chat Whatsapp yang akan dipakai kali ini memakai icon svg dengan perhiasan css untuk mengatur posisi dari ikon whatsapp nantinya.
Tombol Direct Chat Whatsapp Dengan icon SVG ini sanggup di terapkan di blog AMP dan Non AMP, dan juga tersedia dua versi pilihan yang sanggup kalian pilih sesuai dengan impian kalian
Bagi kalian yang tertarik untuk memasang Tombol Direct Chat Whatsapp Di Blog Dengan SVG ini di halaman blog kalian, silahkan ikuti tutorial singkatnya berikut :
Cara Memasang Tombol Direct Chat Whatsapp Di Blog
Login BoggerKlik Template - Edit HTML
Silahkan pilih variasi tombol chat whatsapp berikut sesuai selera
1. Full CSS
Dengan memakai Full Css, maka isyarat HTML akan menjadi lebih simple sebab tidak memakai isyarat HTML icon SVG
Simpan isyarat HTML berikut sebelum isyarat </body>
<a class='fixed-whatsapp' href='https://api.whatsapp.com/send?phone=628xxxxxxxxxx' rel='nofollow noopener' target='_blank' title='Whatsapp' />
Ganti isyarat 628xxxxxxxxxx dengan nomor whatsapp kalian.
Kemudian tambahkan CSS berikut sebelum </style>.
.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 hanya memakai HTML, maka ukuran CSS nya lebih kecil.
Simpan isyarat HTML berikut di atas isyarat </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 isyarat 628xxxxxxxxxx dengan nomor WA Anda.
Tambahkan CSS berikut sebelum isyarat </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;
}
Jika ingin menambahkan pesan atau kata-kata di atasnya, silahkan tambahkan CSS berikut :
.fixed-whatsapp:after {
content: "Hai...Sob, chat mimin di sini yah!";
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 yang ingin ditampilkan. Silahkan coba demonya dan hover ikonnya.
Jika ada yang ingin di tanyakan seputar goresan pena kali ini, silahkan tinggalkan komentar.
Demikian artikel perihal bagaimana Cara Membuat Tombol Direct Chat Whatsapp Di Blog Dengan SVG ini agar bermanfaat dan selamat mencoba.
Sumber https://www.pehawe.info/