Pada pembahasan sebelummnya kita sudah melakukan Bypass WhatsApp Pada Hotspot MikroTik, selanjutnya anda dapat membuat tombol whatsapp melayang untuk menghubungi admin di halaman login page Hotspot MikroTIk. Hal ini agar terlihat lebih menarik sehingga pengguna dapat menghubungi admin di halaman login page.
Login Page Hotspot atau Captive Portal merupakan halaman yang berfungsi untuk mengakses internet dengan autentifikasi Username dan Password. Halaman ini biasanya menampilkan sebuah informasi mengenai layanan internet seperti paket dan harga atau informasi kontak yang bisa di hubungi untuk memudahkan komunikasi antar pengguna dengan penyedia layanan internet.
Membuat Link/tombol whatsapp melayang di halaman login page
Langsung saja, berikut langkah-langkah membuat tombol WA melayang di halaman login page Hotspot MikroTIk …
1. Kita harus menambahkan sebuah script CSS dan HTML pada login.html atau pada status.html menggunakan teks editor.
2. Tambahkan script berikut di paling bawah sebelum tag </body></html>
<a class='fixed-whatsapp' href='https://api.whatsapp.com/send?phone=6289560471234 &text=Halo admin praktekotodidak.com, ' 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>
Perhatikan baris berikut !!!
<a class='fixed-whatsapp' href='https://api.whatsapp.com/send?phone=6289560471234
Pada bagian “phone=6289560471234” silahkan diganti nomor whatsapp anda
lalu di bagian “text=Halo admin praktekotodidak.com” silahkan diganti tulisan pembuka nya sesuai keinginan anda
3. Setelah itu cari kode </style> lalu tambahkan script CSS dibawah ini, sebelum kode </style>
<style type="text/css">
a, a:link, a:visited, a:active { color: #AAAAAA; text-decoration: none; font-size: 10px; }
a:hover { border-bottom: 1px dotted #c1c1c1; color: #AAAAAA; }
img {border: none;}
td { font-size: 14px; color: #7A7A7A; }
.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;
}
Hasilnya
Begitulah cara membuat tombol whatsapp melayang di Login Page Hotspot MikroTik. Semoga bermanfaat..
