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 |
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 |
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"> </p> <!-- Ini Akhir BREAK -->
Oke munkin itu sedikit script untuk Template Voucher Hotspot Mikrotik Gradasi semoga bermanfaat Good Luck Happy Nice Dream.
bro, saya coba buat yg ini kok gak ada gambar barcode nya yah?
BalasHapusitu kenapa bro?
Java Scriptnya Bos.. situnya kadang tidak merespon, jadi Barcodenya tidak keluar
Hapuspakai aplikasi ini jadi lebih mudah membuat voucher yang ada qrcodenya
BalasHapushttp://theuserman.blogspot.co.id/
Best sportsbook Asian handicap.
BalasHapussbobet
ทางเข้า sbo
ทางเข้า sbobet
Thank You
BalasHapusmaxbet
แทงบอล maxbet
แทงบอล maxbet
wow very nice article glad to see your article ....
BalasHapusdo 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
kok background nya gk muncul ya pas mau di print? cm putih aja.. ak pke mikhmon
BalasHapusad yg tau gk caranya biar bisa muncul klo pas di print...
gclub888888Megagame สล็อตแตกง่าย สล็อต pg เว็บตรง ไม่ผ่านเอเย่นต์ 2022 อยากให้ทุกคนลองเล่น ทุกคนมาลองเล่นเกมในระบบกันคะ
BalasHapusidebet
BalasHapusYuk buruan dapatkan info terbari dari program game terbaru bisa klik di NEWS Update hari ini
BalasHapusDapatkan info Voucher Hotspot terbaru di sini unikbet
BalasHapusDapatkan info Voucher Hotspot terbaru di sini unikbet its free.
BalasHapusJangan hanya mengejar kemenangan, nikmati perjalanan menuju gacor
BalasHapushttps://inamc.or.id
Kata-Kata Motivasi Malam: Kalimat penyemangat untuk tidur
BalasHapushttps://nyctaxiphoto.com/
Social Media Marketing: Cara Membangun Audiens Online
BalasHapushttps://forbesaustria.com/
Kata-Kata Motivasi Malam: Kalimat penyemangat untuk tidur
BalasHapushttps://philipbradatsch.com/
Spin gratis lebih lanjut dapat ditambahkan jika Loki mengubah simbol lain menjadi Wild, sehingga meningkatkan potensi kemenangan Cek disini unikbet,
BalasHapusFitur Tumble muncul selama Spin Gratis, memberikan kemenangan dan menambahkan lebih banyak posisi kosong ketika simbol kemenangan menghilang sementara kemenangan maksimum 10,000x tersedia dalam petualangan dramatis ini Cek disini unikbet.
Grafis Menakjubkan, Kemenangan Menggila! (Menekankan visual dan kemenangan)
BalasHapusIDEBET
livechat
Ingin merasakan sensasi jackpot terbesar? Daftar sekarang di situs slot terpercaya kami
BalasHapusIDEBET
livechat
TELEGRAM
Bermainlah dengan hati yang tenang, gacor akan datang dengan sendirinya
BalasHapusIDEBET
livechatIDEBET
TELEGRAMIDEBET
Pengali mempertahankan nilainya selama putaran berlangsung Cek disini unikbet.
BalasHapusLima Putaran Gratis tambahan dapat diberikan jika tiga simbol Scatter muncul di gulungan selama putaran bonus Cek disini unikbet.
Bingung cari situs slot gacor di mana bisa di coba di situs ini
BalasHapusIDEBET
livechatJITU
TELEGRAMJITU