Hay sahabat lapaklama.com, pada kesempatan kali ini aku ingin membagikan tips kepada teman-teman wacana cara menciptakan tombol chat whatsapp melayang di blog yang biasanya sangat diharapkan oleh mereka yang mempunyai blog toko online ataupun blog penyedia layanan jasa. alasannya ialah dengan adanya tombol chat whatsapp calon customer akan lebih gampang untuk mengunjungi anda.
dan untuk panduan cara menciptakan tombol chat whatsapp melayang ini kami memakai icon SVG. dan tutorial ini dapat kau terapkan/kamu pasang di blog AMP ataupun blog Non-AMP. selain itu aku juga menciptakan tombol chat whatsapp ini dengan 2 versi. yaitu versi menampilkan ikon dengan CSS dan menampilkan ikon dengan HTML. dan kedua versi tersebut tentunya memakai tombol SVG.
Template Gratis Keren:
Membuat Tombol Chat Whatsapp Melayang di Blog
Oke dari pada banyak basa-basi yang ngak jelas, eksklusif saja kita mulai panduan Cara Membuat Tombol Chat Whatsapp Melayang di Blog.
1. Icon Dengan CSS
Membuat tombol chat whatsapp melayang di blog dengan memakai HTML maka akan lebih alasannya ialah tidak memakai arahan HTML icon SVG
Langkah pertama kau hanya perlu mencari kode </body> dan menempelkan arahan dibawah ini sempurna pada bab atas kode </body> tadi.
<a class='fixed-whatsapp' href='https://api.whatsapp.com/send?phone=628xxxxxxxxxx' rel='nofollow noopener' target='_blank' title='Whatsapp' />
Note: Ganti kode 628xxxxxxxxxx dengan nomor whatsapp yang ingin kau publikasikan di blog.
Kemudian tambahkan arahan dibawah ini pada bagian 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. Icon Dengan HTML
Dengan cara ini, maka CSSnya akan jauh lebih kecil jikalau dibandingkan dengan cara pertama.
Sama menyerupai cara pertama, silahkan masuk ke dasboard blogger kamu, lalu pilih sajian Tema dan pilih Edit HTML.
Silahkan cari kode </body>. Untuk mempermudah menemukan suatu arahan didalam blog. gunakan dukungan kombinasi tombol CTRL+F pada keyboard komputer anda.
Jika kau sudah menemukan arahan tersebut. silahkan tambahkan arahan dibawah ini diatas kode </body> tadi.
<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 arahan 628xxxxxxxxxx dengan nomor WA Anda.
Kemudian tambahkan arahan CSS dibawah ini pada bagian 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;
}
Baca Juga:
Selesai.
Nah itulah panduan cara Membuat Tombol Chat Whatsapp Melayang di Blog. jikalau kau suka dengan konten-konten lapaklama menyerupai ini. silahkan like halaman fanspage kami dan jangan lupa untuk berlangganan artikel terbaru kami via email secara gratis. dan kau ialah orang yang pertama kali mendapat notifikasi jikalau lapaklama update artikel terbaru.
Sumber aciknadzirah.blogspot.com
