Cara Membuat Tombol Direct Chat Whatsapp Di Blog Dengan SVG
Cara Membuat Tombol Direct Chat Whatsapp Di Blog Dengan SVG - Tombol direct chat whatsapp ini biasanya digunakan 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 setelah artikel yang mereka tulis dan ada juga yang meletakkannya di bagian bawah halaman blog dengan posisi melayang.
Memang benar adanya, jika ada yang mengatakan 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 digunakan kali ini menggunakan icon svg dengan tambahan css untuk mengatur posisi dari ikon whatsapp nantinya.
Tombol Direct Chat Whatsapp Dengan icon SVG ini dapat di terapkan di blog AMP dan Non AMP, dan juga tersedia dua versi pilihan yang dapat kalian pilih sesuai dengan keinginan 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 menggunakan Full Css, maka kode HTML akan menjadi lebih simple karena tidak menggunakan kode HTML icon SVG
Simpan kode HTML berikut sebelum 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 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 menggunakan HTML, maka ukuran 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 sebelum kode </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 tulisan kali ini, silahkan tinggalkan komentar.
Demikian artikel tentang bagaimana Cara Membuat Tombol Direct Chat Whatsapp Di Blog Dengan SVG ini semoga bermanfaat dan selamat mencoba.
0 Response to "Cara Membuat Tombol Direct Chat Whatsapp Di Blog Dengan SVG"
Post a Comment