Home Design Hotspot Mikrotik Template Template Voucher Hotspot Mikrotik Gradasi

at
Template Voucher Hotspot Mikrotik

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhieP9Oi5_bqIO3OvZiEJA_YI2jivEIGxtG3fWYRHevHFe2D_rC9bb7RfH-2DTag1Hr8V_9Auo0cEmiZnlioLOOoSSq4C1j5qVDmFGy079MGTgI1z0C_wpeYiAnFVaLJP_6SpBjivCcmZ1P/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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhieP9Oi5_bqIO3OvZiEJA_YI2jivEIGxtG3fWYRHevHFe2D_rC9bb7RfH-2DTag1Hr8V_9Auo0cEmiZnlioLOOoSSq4C1j5qVDmFGy079MGTgI1z0C_wpeYiAnFVaLJP_6SpBjivCcmZ1P/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.
, , ,
Share To:
Axact

Z-PLATE

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

Design Hotspot Mikrotik Template

Post A Comment:

14 comments:

  1. UnknownRabu, 04 Oktober, 2017

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

    BalasHapus
    Balasan
    1. MA Nurul HudaRabu, 04 Oktober, 2017

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

      Hapus
  2. Ahmad TauhidMinggu, 26 November, 2017

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

    BalasHapus
  3. mozav007Minggu, 14 Januari, 2018

    Best sportsbook Asian handicap.

    sbobet
    ทางเข้า sbo
    ทางเข้า sbobet

    BalasHapus
  4. omar2002Senin, 22 Januari, 2018

    Thank You


    maxbet
    แทงบอล maxbet
    แทงบอล maxbet

    BalasHapus
  5. Prediksi Togel Online TerpercayaKamis, 14 Februari, 2019

    wow very nice article glad to see your article ....

    do not forget to visit our website as well: D: D

    thanks for the info very nice and creative

    successful greeting always: D: D

    nice article.....


    Prediksi Togel Online Terpercaya

    BalasHapus
  6. Fariz CahyaSabtu, 11 April, 2020

    kok background nya gk muncul ya pas mau di print? cm putih aja.. ak pke mikhmon
    ad yg tau gk caranya biar bisa muncul klo pas di print...

    BalasHapus
  7. gclubvip888Sabtu, 13 Agustus, 2022

    gclub888888Megagame สล็อตแตกง่าย สล็อต pg เว็บตรง ไม่ผ่านเอเย่นต์ 2022 อยากให้ทุกคนลองเล่น ทุกคนมาลองเล่นเกมในระบบกันคะ

    BalasHapus
  8. selatifanySenin, 09 September, 2024

    idebet

    BalasHapus
  9. bobSenin, 09 September, 2024

    Yuk buruan dapatkan info terbari dari program game terbaru bisa klik di NEWS Update hari ini

    BalasHapus
  10. unikbetRabu, 11 September, 2024

    Dapatkan info Voucher Hotspot terbaru di sini unikbet

    BalasHapus
  11. unikbetRabu, 11 September, 2024

    Dapatkan info Voucher Hotspot terbaru di sini unikbet its free.

    BalasHapus
  12. IDEBETSenin, 16 September, 2024

    Grafis Menakjubkan, Kemenangan Menggila! (Menekankan visual dan kemenangan)
    IDEBET
    livechat

    BalasHapus
  13. IDEBETSenin, 16 September, 2024

    Ingin merasakan sensasi jackpot terbesar? Daftar sekarang di situs slot terpercaya kami
    IDEBET
    livechat
    TELEGRAM

    BalasHapus

Langganan: Posting Komentar (Atom)