Seiring perkembangan jaman, dengan semakin menjamurnya aplikasi pesan seperti WhatsApp dan Telegram, maka tak heran jika setiap pengunjung website ingin menghubungi via aplikasi tersebut, sehingga pemilik website perlu untuk meletakkan fitur tersebut dalam website mereka.
Berikut cara dengan langkah-langkah yang menyisipkan kode skrip di bagian body, head atau jika di blogger bisa diletakkan dalam tata letak dengan fitur html script.
1. Buka file html biasanya berupa index.html atau index.php. jika dalam blogger buka tata letak dengan menambahkan fitur html script, bisa pula dengan tema bagian edit html.
2. Masukkan kode scrip berikut:
<style>
.fixed-whatsapp {position:fixed;bottom:50px;right:70px;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)}
.fixed-whatsapp:after {content:"Hallo, ada yang bisa dibantu?";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}
.fixed-telegram {position:fixed;bottom:50px;right:15px;width:50px;height:50px;z-index:9999}
.fixed-telegram:before {content:"";background-repeat:no-repeat;background-size:34px 34px;background-position:center center;width:50px;height:50px;background-image:url("https://img.icons8.com/fluency/48/000000/telegram-app.png");background-color:#0088cc;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)}
</style>
<a class='fixed-whatsapp' href='https://api.whatsapp.com/send?phone=6282337877533' rel='nofollow noopener' target='_blank' title='Whatsapp' ></a>
<a class='fixed-telegram' href='https://t.me/xingyue94' rel='nofollow noopener' target='_blank' title='Telegram' ></a>
3. Edit untuk bagian nomor WhatsApp atau Telefram, lalu Simpan file tersebut.
Selamat mencoba..
Post a Comment