Template Voucher Hotspot Mikrotik Keren ini didedikasikan bagi yang sedang mencari free template voucher hotspot mikrotik keren, ga pake ribet, ga perlu familiar untuk mengerti Cara Membuat Voucher Hotspot Mikrotik via User Manager, karena untuk Membuat/ mengedit Template Voucher Hotspot di Userman setidaknya harus mengerti juga bahasa pemprograman, seperti HTML dan kroni kroninya.
Jadi Anda dapat menggunakan Template Voucher Hotspot Mikrotik Keren ini dan mengimplementasikannya langsung pada Mikrotik atau User manager anda, dengan cara mengedit Template voucher Hotspot Mikrotik yang sudah ada sebelumnya, atau dengan cara menambahkan Template voucher Hotspot Mikrotik baru dengan berkas yang saya share kali ini.
Silahkan download template voucher hotspot mikrotik keren ini pada link free template voucher hotspot mikrotik keren berikut ini:
Link Download Template Voucher Hotspot Mikrotik Keren Custom.
~ File Header: Download
~ File Row: Download
~ File Footer: Download
~ File Break: Download
Implementasi:
Untuk mengintegrasikan file Template Voucher Hotspot Mikrotik hasil custom tersebut diatas kedalam User Manager, Anda hanya perlu menyalin File file tersebut kedalam Template User Manager sesuai dengan nama masing masing file. Untuk membuka/ melihat isi file html tersebut, anda dapat menggunakan Notepad++ atau aplikasi sejenisnya di PC.
Untuk cara yang lebih sederhana, Anda juga bisa mengunakan kode html berikut ini dan cukup dengan menyalinnya kedalam Template Voucher baru atau template yang sudah ada sebelumnya di User Manager dengan cara mereplace atau menimpanya.
~ File Header
Salin Syntax berikut ini ke dalam "Header" Templates User Manager.
<!--- Salin Syntax berikut ini ke dalam "Header" Templates User Manager-->
<!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>Voucher Hotspot</title>
<link href="https://fonts.googleapis.com/css?family=Amaranth|Coda|Mitr|Oswald|Righteous|Russo+One|Teko" rel="stylesheet">
<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>
@media print{.noprint{display:none}.pagebreak{page-break-after:always}}
.canvas{
background-image:url(https://sites.google.com/site/archivesiugi/wifi_hotspot/voucher_01.png);
background-color:#DFE0E1;
background-size:cover;
width:227px;
height:151px;
margin:3px 3px 3px 3px;
padding:0;
float:left
}
body{
font-family:'Oswald',sans-serif
}
.row{
width:200px;
margin:3px 0 3px 3px;
height:145px;
float:left
}
.tittle{
width:150px;
height:35px
}
.tittle h5{
line-height:15px;
margin:0;
font-size:15px;
padding-left:21px;
padding-top:5px;
font-family:'Righteous',cursive
}
.tittle h5 span{
color:#D9141A
}
.tittle p{
margin:0;
font-size:9px;
line-height:8px;
padding-left:21px
}
.konten{
width:51%;
height:75px;
margin-top:35px;
margin-left:4%;
float:left
}
.konten p{
margin:0;
font-size:12px;
line-height:11px;
font-family:'Teko',sans-serif;
color:#383635
}
.konten p .a{
margin-left:2px
}
.konten p .b{
margin-left:16px
}
.konten h5{
margin:0;
font-size:7px;
line-height:8px;
color:#D9141A;
font-family:'Righteous',cursive;
font-weight:400
}
.konten .footer{
margin:7px 0 0 28px
}
.konten .footer h4{
margin:0;
font-size:10px;
line-height:12px;
color:#242323;
font-weight:400
}
.user{
width:45%;
height:110px;
float:left
}
.user .abs{
margin:7px 0 1px 15px;
width:22px;
float:left
}
.user .abs p{
margin:2px 0 1px 0;
font-size:10px
}
.user .abr{
margin:7px 0 1px 1px;
width:43px;
float:left
}
.user .abr p{
margin:1.3px 0 1px 0;
font-size:10px;
background-color:rgba(240,133,25,.3);
padding:0 0 0 2px;
letter-spacing:.4px;
border:.5px solid #D9141A;
border-radius:4px
}
.side{
width:23px;
height:145px;
float:left;
margin-top:3px
}
.side p{
margin-top:55px;
margin-right:1px;
color:#fff;
font-size:17px;
font-weight:700;
font-family:'Coda',cursive;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg)
}
.qrcode{
width:62px;
margin-top:1px;
margin-left:15px;
padding:2px;
background-color:#fff;
clear:left
}
</style>
</head>
<body>~ File Row
Salin Syntax berikut ini ke dalam "ROW" Templates User Manager
<!--- Salin Syntax berikut ini ke dalam "ROW" Templates User Manager-->
<div class="canvas">
<div class="row">
<div class="tittle">
<h5><span>A-sha</span>.NET</h5>
<p>Free Wi-Fi HOTSPOT</p>
</div>
<div class="konten">
<p>Masa Aktif <span class="a">: %u_timeLeft%</span></p>
<p>Durasi <span class="b">: %u_limitUptime%</span></p>
<h5>Nikmati Internet Unlimited... bebas quota tanpa batas...!</h5>
<div class="footer">
<h4>Kedai Sesotel</h4>
<h4>0857-11000-837</h4>
</div>
</div>
<div class="user">
<div class="abs">
<p>USER</p>
<p>PASS</p>
</div>
<div class="abr">
<p>%u_username%</p>
<p>%u_password%</p>
</div>
<div class="qrcode" id="%u_username%">
</div>
</div>
</div>
<div class="side"><p>%u_moneyPaid%</p></div>
</div>
<script> jQuery(function(){jQuery('#%u_username%').qrcode(
{
"render": 'canvas',
"size": 62,
"minVersion": 5,
"maxVersion": 5,
"ecLevel": 'L',
"mode": 0,
"text": "http://10.10.80.1/login?username=%u_username%&password=%u_password%",
"quiet": 0,
}
); }) </script>
~ File Footer
Salin Syntax berikut ini ke dalam "Footer" Templates User Manager
<!--- Salin Syntax berikut ini ke dalam "Footer" Templates User Manager-->
</body>
</html>
~ File Break
Salin Syntax berikut ini ke dalam "Break" Templates User Manager
<!--- Salin Syntax berikut ini ke dalam "Break" Templates User Manager-->
<p class="noprint" style="font-size: 10px"> ................ page break ................ </p> <p class="pagebreak"> </p>
Untuk lebih spesifik cara menerapkan kode kode diatas, dapat dilihat pada contoh gambar Cara Edit Template Voucher Hotspot di Userman berikut ini:
itulah sekilas bagaimana untuk meng-edit Template Voucher Hotspot Mikrotik di User Manager hingga menjadi sebuah Template Voucher Hotspot Mikrotik keren. Terimakasih, semoga bermanfaat!
Download Template Voucher Hotspot Mikrotik Terkeren lain disini
Post A Comment:
0 comments: