ExactSeek: Relevant Web Search

cara edit templete voucher hotspot

              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">&nbsp;</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">&nbsp;</p> <!-- Ini Akhir BREAK -->

                                                             hasilnya

Posted in:
Tags:

2 Responses so far.

Leave a Reply