Home › Komputer › MikroTik › Network › Template Voucher Hotspot Mikrotik Keren

Template Voucher Hotspot Mikrotik Keren

Posted by: Dahe Ugi 12/12/2019

Template Voucher Hotspot Mikrotik Keren - Template Voucher Hotspot ini dilengkapi dengan qrcode, dapat memudahkan pengguna untuk login hanya dengan menscan kode QR, selain dengan cara memasukan Username dan password yang tertera dalam voucher.

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">&nbsp;</p>

Untuk lebih spesifik cara menerapkan kode kode diatas, dapat dilihat pada contoh gambar Cara Edit Template Voucher Hotspot di Userman berikut ini:

cara_edit_template_voucher_hotspot_mikrotik

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

Komputer

MikroTik

Network

0 komentar:

Catatan :

Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau URL_Gambar
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau URL_Video
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau Kutipan_Anda
Untuk menyisipkan Kode: [code]KODE[/code]
atau KODE
atau KODE
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon

Konversi Kode

Emoticon

Template Voucher Hotspot Mikrotik Keren

~ File Header

~ File Row

~ File Footer

~ File Break

0 komentar:

Post a Comment

Catatan :

Anda sudah mengaktifkan penyaringan konten ( AdBlocker di Aktifkan )

Template Voucher Hotspot Mikrotik Keren

~ File Header

~ File Row

~ File Footer

~ File Break

Next

Newer Post

Previous

Older Post

0 komentar:

Post a Comment

Catatan :

Anda sudah mengaktifkan penyaringan konten ( AdBlocker di Aktifkan )