cara ganti edit/ templete voucher hotspot
Template Voucher Hotspot Mikrotik dapat kita rubah dengan berbagai macam tampilan yang lebih menarik daripada tampilan Voucher Hotspot Mikrotik default nya. Pada toturial kai ini kali ini Anda bisa Download Template Voucher Hotspot Mikrotik secara Gratis dan menggantinya di User Manager Mikrotik Anda.
baik langsung saja kita lihat gambar
1. Login ke User Manager Mikrotik --> Masuk ke menu Settings --> Templates
2. Klik tombol + pada bagian kanan -->Beri nama template voucher yang akan Anda buat.
3. Masukkan script template voucher hotspot mikrotik pada kolom yang disediakan
silahkan di copy code html di bawah ini
header
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Vouchers</title> <style> @media print { .noprint { display: none; } .pagebreak { page-break-after: always; } } </style></head> <body> |
Row:
| <table style="display: inline-block; width: 250px; border: 1px solid ;#7FFF00 line-height: 110%; font-family: arial; font-size: 12px; margin: 1px;"> <tbody> <tr> <td style="text-align: center; color: red; font-size: 13px; border-bottom: 1px #7FFF00 solid;"><b>HOTSPOT VOUCHER</b></td> </tr> <tr> <td> <table style=" text-align: center; width: 240px; background-color: #7FFF00; line-height: 110%; font-size: 11px;"> <tbody> <tr style="background-color: #7FFF00;"> <td style="background-color: #7FFF00; width: 33%"><b>PLAN</b></td> <td style="width: 33%">Speed</td> <td style="width: 33%">Data</td> </tr> <tr> <td ><b>%u_actualProfileName%</b></td> <td>Up to 1Mbps</td> <td>%u_limitDownload%</td> </tr> </tbody> </table> </td> </tr> <tr> <td> <table style=" text-align: center; width: 240px; background-color: #7FFF00; line-height: 110%; font-size: 11px;"> <tbody> <tr style="background-color: #7FFF00;"> <td style="width: 33%">Time Limit</td> <td style="width: 33%">Validity</td> <td style="width: 33%">Price</td> </tr> <tr> <td>%u_limitUptime%</td> <td>%u_timeLeft%</td> <td>Rp %u_moneyPaid%</td> </tr> </tbody> </table> </td> </tr> <tr> <td> <table style=" text-align: center; width: 240px; background-color: #7FFF00; line-height: 110%; font-size: 12px; border-top: 1px solid #ccc;"> <tbody> <tr style="color: red; font-size: 11px;"> <td style="width: 50%">Username</td> <td>Password</td> </tr> <tr style="background-color: #FFD700;"> <td style="color:red; border: 1px #ccc solid;">%u_username%</td> <td style="color: red; border: 1px #ccc solid;">%u_password%</td> </tr> </tbody> </table> </td> </tr> <tr> <td style="text-align: center; font-size:11px;">Call 082 324 689 351</td> </tr> </tbody> . |
footer
| </body></html>....... |
break
| <p class="noprint" style="font-size: 10px"> ................ page break ................ <p class="pagebreak"> </p>.. |
hasilnya
| Header | <!DOCTYPE html> <html> <head> <script type="text/javascript" src="https://sites.google.com/site/tutorialblogspotseo/home/jquery.min.js"></script> <script type="text/javascript" src="https://sites.google.com/site/tutorialblogspotseo/home/jquery.qrcode.min.js"></script> <style> @media print { .noprint { display: none; } .pagebreak { page-break-after: always; } } body { padding: 0; margin:0; min-width: 1200px; min-heigt: 1700px; font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif; } .all { width: 450px; height: 250px; margin: 10px 10px 10px 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-color: #fff; float: left; } .header{ height: 50px; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; color: white; clear: left; text-align: center; padding-top: 10px; background-image:-webkit-linear-gradient(top, #FF5A00 0%, #FFAE00 100%); background-image: -moz-linear-gradient(top, #FF5A00 0%, #FFAE00 40%); background-image: -ms-linear-gradient(top, #FF5A00 0%, #FFAE00 20%); background-image: -o-linear-gradient(top, #FF5A00 0%, #FFAE00 10%); background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 0%); } .a { float:left; margin:0px 0px 0px 10px; width: 80px; height: 50px; } .a img { width:75%; height: 100%; } .b { float:center; text-align: center; } .b h1{color: #00810c; font-size: 25px; line-height: 10px; margin: 5px 0 10px 0; text-shadow: 1px 1px 5px #789; } .footer { color: white; background-color: black; clear: left; text-align: center; height: 20px; padding:10px 0px 5px 0px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; background-image:-webkit-linear-gradient(top, #FF5A00 0%, #FFAE00 100%); background-image: -moz-linear-gradient(top, #FF5A00 0%, #FFAE00 40%); background-image: -ms-linear-gradient(top, #FF5A00 0%, #FFAE00 20%); background-image: -o-linear-gradient(top, #FF5A00 0%, #FFAE00 10%); background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 0%); } .kiri { float: left; width: 100px; margin:10px 0px 0px 0px; border-color: black solid; height: 150px; padding:0px 0px 0px 10px; } .kanan { padding: 10px 25px 0px 0px; text-align: center; float: right; width: 200px; } .kanan label { color: #c9112d; font-size: 20px; line-height: 15px; margin: 10px 0 10px 0; text-shadow: 1px 1px 5px #789; } .tengah { width: 25px; float: left; padding: 30px 10px 0px 12px; } .main{ height: 160px; background: linear-gradient( limegreen, transparent ), linear-gradient( 90deg, skyblue, transparent ), linear-gradient( -90deg, coral, transparent ); background-blend-mode: screen; } .btn { background-color: #8E8E8E; border: 0; border-radius: 3px; color: #FFF; box-shadow: 2px 2px 2px #111; width: 80%; height: 40px; padding-left: 10px; margin: 5px 0; text-align: center; } .btn span { font-size: 16px; line-height: 40px; } .biru { background-color: #3B5998; } .biru i { float: left; } .biruu { background-color: #1CB5E8; } .biruu i { float: left; } .tengah h2 { display: inline-block; white-space: nowrap; margin-top: 30px; color: #c9112d; font-size: 20px; text-shadow: 1px 1px 5px #789; line-height: 30px; -moz-transform: rotate(-90deg); -moz-transform-origin: center center; -webkit-transform: rotate(-90deg); -webkit-transform-origin: center center; -ms-transform: rotate(-90deg); -ms-transform-origin: center center; } </style> </head> <body> |
| Row | <div class="all"> <div class="header"> <div class="a"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg7zhzz8F5bStr_gJxXOQwkcFsnAqPWASCb3uXQoIce_-HSMSqnMVM5bYDXP__6Fw7XplGSF4supvPCTOVBDzOVVuUs68r6kzXZHNkZBVnID5U_Gg3jRbKmCfd-sGWup4nckaVKKyyYt80/s1600/lgo%25252Bzplate.png"/> </div> <div class="b"> <h1 >POHANK HOTSPOT</h1> <h1 >VOUCHER</h1> </div> </div> <div class="main"> <div class="kiri"> <div class="barcode"> <div class="qrcode" id="%u_username%"></div> <script> jQuery(function(){jQuery('#%u_username%').qrcode( { "render": 'div', "size": 150, "minVersion": 5, "maxVersion": 5, "ecLevel": 'L', "mode": 0, "text": "https://nurulhuda.org/login?username=%u_username%&password=%u_password%", "quiet": 0, } ); }) </script> </div> </div> <div class="tengah"> <h2>Rp. %u_moneyPaid%</h2> </div> <div class="kanan"> <label>USER NAME</label><br/> <button class="btn biru" ><i></i><span>%u_username%</span></button><br/> <label>PASSWORD</label><br/> <button class="btn biruu" ><i></i><span>%u_password%</span></button> </div> </div> <div class="footer">pastikan userman dan passwod menggunakan hurup kecil </div> </div> |
| Footer | |
| Break | <!-- Ini Awal BREAK --> <p class="noprint" style="font-size: 0px"> ................ page break ................ </p> <p class="pagebreak"> </p> <!-- Ini Akhir BREAK --> |
hasilnya
trima kasih bos...
Makasih..