Cara Membuat Tombol Chat Whatshap Melayang Diblog Dengan SVG
Itu sangat penting bagi seorang yang bergelut didunia julan online hal ini memudahkan pengunjung bisa langsung chat ke nomer telephone. Hal ini memudahkan pmebeli untuk menghubungi kamu.
Dan pada pstingan kali ini saya akan memberikan tentang cara Cara Membuat Tombol Chat Whatshap Melayang Diblog Dengan SVG.
Cara ini bisa digunakan untuk semua blog APM maupun Non APM kamu bisa membuat Whatshap melayang diblog kamu.
Tombol ini dibuat dengan 2 versi yaitu menapilkan icon dengan CSS dan menampilkan dengan HTML dan tentunya keduanya menggunakan icon SVG.
Untuk langkah- langkahnya ikuti tutorial dibawah ini dengan kode berikut :
1. Icon dengan menggunakan CSS
Dengan hal ini maka kode HTML menjadi lebih simpel karena tidak menggunakan kode HTML Icon SVG.
Simpan kode berikut diatas </body>
anti kode 628xxxxxxxxxx' dengan no Whastshap kamu dan tambahkan kode CSS di Style diblog kamu.
Maka akan terlihat seperti ini .
2. Icon dengan HTML:
Dengan ini kamu bisa menggunakan dengan menggunakan CSS lebih kecil
Simpan kode HTML berikut diatas kode
Dan jika kamu ingin menambahkan kata - kata diatas Whastshap kamu bisa menambahkan kode CSS berikut :
Kamu juga bisa mengganti kata- katanya dengan bahasa kamu sendiri dengan mengganti kata berikut "Hai...kakak, chat mimin di sini yah!"
Selamat mencobanya kak semoga postingan kali ini bermanfaat untuk kamu dan bisa digunakan diweb Toko Online kamu.
Itu sangat penting bagi seorang yang bergelut didunia julan online hal ini memudahkan pengunjung bisa langsung chat ke nomer telephone. Hal ini memudahkan pmebeli untuk menghubungi kamu.
Dan pada pstingan kali ini saya akan memberikan tentang cara Cara Membuat Tombol Chat Whatshap Melayang Diblog Dengan SVG.
Cara ini bisa digunakan untuk semua blog APM maupun Non APM kamu bisa membuat Whatshap melayang diblog kamu.
Tombol ini dibuat dengan 2 versi yaitu menapilkan icon dengan CSS dan menampilkan dengan HTML dan tentunya keduanya menggunakan icon SVG.
Untuk langkah- langkahnya ikuti tutorial dibawah ini dengan kode berikut :
1. Icon dengan menggunakan CSS
Dengan hal ini maka kode HTML menjadi lebih simpel karena tidak menggunakan kode HTML Icon SVG.
Simpan kode berikut diatas </body>
<a class='fixed-whatsapp' href='https://api.whatsapp.com/send?phone=628xxxxxxxxxx' rel='nofollow noopener' target='_blank' title='Whatsapp' />
anti kode 628xxxxxxxxxx' dengan no Whastshap kamu dan tambahkan kode CSS di Style diblog kamu.
.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);
}Maka akan terlihat seperti ini .
Dengan ini kamu bisa menggunakan dengan menggunakan CSS lebih kecil
Simpan kode HTML berikut diatas 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> .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;
}
.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;
}
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;
}
.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;
}
.fixed-whatsapp:after {
content: "Hai...kakak, 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;
}
content: "Hai...kakak, 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;
}
Kamu juga bisa mengganti kata- katanya dengan bahasa kamu sendiri dengan mengganti kata berikut "Hai...kakak, chat mimin di sini yah!"
Selamat mencobanya kak semoga postingan kali ini bermanfaat untuk kamu dan bisa digunakan diweb Toko Online kamu.
