Baca Juga

Bismillahirrahmanirrahim, setelah membuat postingan tentang Cara Membuat Template Vouche Hotspot Mikrotik, pada postingan ini saya ingin share sebuah tempalate Voucher mikrotik yang bertema gradasi, karena saya pusing namanya mau apa, karena desainnya asal asalan, yang peting warna rame, hehee..

Langsung saja penampakan Voucher hotspotnya seperti di bawah ini. 

Template Voucher Hotspot Mikrotik Gradasi
Template Voucher Hotspot Mikrotik Gradasi
Silahkan sobat bisa edit sesukanya baik warna, logo, bentuk maupun bentuk dan ukurannya, terus perhatikan mana saja yang perlu di edit supaya berjalan dengan normal. template ini jika menggunakan kertas A4 menampung 10 Voucher selain itu template ini juga menggunakan scan barcode, langsung saja di coba sobat tinggal copy vaste kodenya di bawah namun pas di print warnya tidak sama dengan hasil priview, silahkan saja di coba.  

Tampilan ketika mau di print (CTRL + P)
Template Voucher Hotspot Mikrotik Gradasi
Template Voucher Hotspot Mikrotik Gradasi

Untuk Kolom Header Silahkan Masukan Kode di bawah ini

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://yourjavascript.com/1738710434/jquery-min.js"></script>            
 <script type="text/javascript" src="http://yourjavascript.com/4312271372/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>

Untuk Kolom Row Silahkan Masukan Kode di bawah ini

<div class="all">
<div class="header">
<div class="a"><img src="http://4.bp.blogspot.com/-Sl2jCiqRE38/V2AL_bX8V6I/AAAAAAAAEk8/I752ipzPPoYmUEnEljxOmHDLKKdV9IiXgCK4B/s1600/lgo%25252Bzplate.png"/> </div>
  <div class="b">
  <h1 >Z-PLATE 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">SCAN TO LOG IN OR BROWSE TO HTTPS://YOUR-IP.COM/ </div>
</div>

Untuk kode Row perhatikan kode kode yang harus di edit 
Untuk mengganti Logo ganti script di bawah

http://4.bp.blogspot.com/-Sl2jCiqRE38/V2AL_bX8V6I/AAAAAAAAEk8/I752ipzPPoYmUEnEljxOmHDLKKdV9IiXgCK4B/s1600/lgo%25252Bzplate.png

dengan alamat (URL) logo milik sobat,

Untuk mengganti ip / alamat log in  hotspot bila di scan cari kode 

https://nurulhuda.org/login?username

Ganti dengan alamat/ URL Hotspot milik sobat     

Untuk Kolom Footer Silahkan Masukan Kode di bawah ini

</body> </html> 

Untuk Kolom Break Silahkan Masukan Kode di bawah ini

<!-- Ini Awal BREAK --> <p class="noprint" style="font-size: 0px">   ................ page break ................ </p> <p class="pagebreak">&nbsp;</p> <!-- Ini Akhir BREAK -->

Oke munkin itu sedikit script untuk Template Voucher Hotspot Mikrotik Gradasi semoga bermanfaat Good Luck Happy Nice Dream.
Axact

Z-PLATE

Terima Kasih Telah Berkunjung dan Berkanan Membaca artikel dari Blog Kami, Silahkan Masukan Komentar Untuk menambah Motivasi Kami.

Post A Comment:

3 comments:

  1. bro, saya coba buat yg ini kok gak ada gambar barcode nya yah?
    itu kenapa bro?

    BalasHapus
    Balasan
    1. Java Scriptnya Bos.. situnya kadang tidak merespon, jadi Barcodenya tidak keluar

      Hapus
  2. pakai aplikasi ini jadi lebih mudah membuat voucher yang ada qrcodenya
    http://theuserman.blogspot.co.id/

    BalasHapus