Template Voucher Hotspot Mikrotik dengan QR Code yang elegan dan profesional sangat cocok untuk menggantikan default voucher hotspot bawaan User Manager Mikrotik yang terbilang kaku dan kurang menarik. ada 8 pilihan warna voucher template yang dapat kita gunakan.
Disini saya sediakan default template voucher hotspot mikrotik, untuk memakai salah satu voucher template tinggal klik kanan dan copy link gambarnya / salin lokasi gambar.
Silahkan masuk ke pengaturan "Setting" -> "Templates" pada User Manager
Paste isyarat ini dikolom 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> <script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lrsjng.jquery-qrcode/0.14.0/jquery-qrcode.min.js" type="text/javascript"></script> <style> @page { size: A4; margin: 0; } @media print { html, body { width: 210mm; height: 297mm; margin-left: auto; margin-right: auto; } } @media screen { html, body { width: 800px; } } body { padding: 20px; margin:0; margin-left: auto; margin-right: auto; font-size: 12px; font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif; } #main-wrap { background-color: #fff; height: 180px; text-align: left; display: inline-block; } #main-wrap > div { height: 180px; } #main-wrap { width: 39%; padding-top: 10px; padding-bottom: 10px; } #inner { background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7kcfSKz-uWNr238R7L_kMuo1_7nb0YzrsuOeCYrwBIQG5us7fShLeFXYUXEtIQw9FTwgtkDJpwwGbbf0cNb9cervtPGIh4isE-_vyVtHAb9b2BEgRdCtU4k9RE4EJY9TMBgKs_OAdaBCd/s1600/q4.png") no-repeat; width: 286px; height: 174px; padding: 0px; } #hotspot-name { padding-left: 15px; color:#fff; font-size: 11px; font-weight:bold; } #user-pass { padding-top: 4px; padding-left: 10px; font-size: 11px; font-weight: bold; color: #000; margin-top: 5px; padding-bottom: 2px; font-weight: bold; } #price { width: 286px; height: 25px; padding: 0px; color:#fff; font-size: 14px; font-weight:bold; display: inline-block; } #kanan { padding-top: 6px; padding-left:5px; text-align: center; font-size: 12px; font-weight:bold; color:#fff; } #info { padding-top: 12px; padding-right:5px; text-align: right; font-size: 11px; font-weight:bold; color:#fff; } #kontak { padding-top: 15px; padding-right:5px; text-align: right; font-size: 11px; font-weight:bold; color:#fff; } .qrcode { padding-top:5px; padding-left:10px; } .left-half { color:#000; float: left; width: 50%; } .right-half { color:#000; float: left; width: 50%; } </style> </head> <body> Paste isyarat ini di kolom Row.
Untuk isyarat yang saya kasih tanda warna kuning tinggal sesuai aja dengan kondisi masing-masing
<div id="main-wrap"> <div id="inner"> <div id="price"> <div style="padding:5px 5px 5px 10px">Rp.%u_moneyPaid%</div> </div> <div class="left-half"> <div id="user-pass"> User: [ %u_username% ]<br> Pass: [ %u_password% ]<br> </div> <div class="qrcode" id="%u_username%"></div> <script> jQuery(function(){jQuery('#%u_username%').qrcode( { "render": 'canvas', "size": 100, "minVersion": 5, "maxVersion": 5, "ecLevel": 'L', "mode": 0, "text": "http://namahotspot.net/login?username=%u_username%&password=%u_password%", "quiet": 0, } ); }) </script> </div> <div class="right-half"> <div id="kanan"> <br> BUANANET HOTSPOT<br> </div> <div id="info"> <u>namahotspot.net</u><br><br> Duration: %u_limitUptime%<br> Validation: %u_timeLeft%<br> Quota: %u_limitDownload%<br> Shared: %u_shared_users% User<br> </div> <div id="kontak"> CP: 081328298xxx </div> </div> </div> </div> Paste ini di kolom Footer
</body></html>
Terakhir paste ini di kolom Break
<p class="noprint" style="font-size: 10px"> ................ page break ................ </p> <p class="pagebreak"> </p>Sumber http://www.o-om.com
1 komentar
Sangat bermanfaat mas, sudah saya coba n bagus, tp waktu print kok cuma 2 kolom ya jd banyak kertas yg kosong, atau mkn ada setingan lain, terima kasih..
EmoticonEmoticon