Setting desain voucher hotspot mikrotik

Cara mengganti desain voucher hotspot

tokopuas.com – secara default, tampilan voucher yang ada di usermanager terlihat kurang cantik dan menarik. tapi, anda juga bisa melakukan custom desain voucher hotspot dengan mudah, hanya perlu menggunakan kode html.

untuk membuat desain voucher ada beberapa kode yang harus di masukkan, kode ini berfungsi untuk menampilkan fungsi.

kode kode yang bisa di masukkan :

  • %u_username% = menampilkan username
  • %u_password% = menampilkan password
  • %u_totalPrice% = menampilkan harga total
  • %u_timeLeft% = masa berlaku voucher/ expired / kadaluarsa .
  • %u_limitDownload% = menampilkan kuota internet.
  • %u_limitUptime% = menampilkan waktu lamanya user bisa mengakses internet.
  • %u_moneyPaid% = menampilkan harga untuk voucher.

untuk menggunakan kode di atas, anda di haruskan menguasai pemrogaman html. tapi, anda tidak perlu khawatir, karena saya sudah buatkan kodenya, sehingga anda bisa melakukan copy paste saja dengan mudah…

setting template voucher hotspot

silahkan anda login ke usermanager, dan klik pada menu setting. untuk mengakses user manager, bisa menggunakan ip adress yang sebelumnya telah di setting. anda bisa membaca tutorial saya sebelumya.

jika anda belum setting user manager maka klik disini : cara install usermanager

cara buat voucher hotspot

lanjutkan dengan mengklik tab templates :

setting desain voucher

di bagian template, terdapat form name, header, row , footer, break dan extension. form ini harus di isi dengan kode html desain voucher. untuk memulai membuat template , silahkan klik tombol +

cara jualan hotspot

lanjutkan dengan memberi nama voucher yang anda inginkan, dan sebuah template baru akan di buat.

trik mudah belajar mikrotik

sekarang, anda hanya perlu memasukkan kode di bagian header, row, footer, dan break. namun, tenang saja, saya sudah membuatkan kodenya, jadi anda hany perlu copy paste..

kode voucher hotspot mikrotik.

untuk kode header, silahkan copy paste di bawah ini :

<!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>Vouchers</title>
<style>
@media print {
.noprint {
display: none;
}
.pagebreak {
page-break-after: always;
}
}
body
{
padding: 0;
margin:0;
min-width: 700px;
color: #303F50;
font-size: 10px;
font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
line-height: 85%; 
}
.tokopuas table, table.tokopuas
{
border-collapse: collapse;
margin: 2px;
}
.tokopuas th, .tokopuas td
{
padding: 2px;
border: solid 1px #E2341D;
vertical-align: top;
text-align: center;
}
.vertical-text {
transform: rotate(90deg);
padding: 4px;
float: right;
font-size: 15px;
margin-top: 8px;
width: 10px;
color: #E2341D;
}
</style>
</head>
<body> 

untuk code row, bisa copy paste code di bawah ini :

<table class="tokopuas" style=" display: inline-block; background-color:#E2341D; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; width: 200px; height:120px;">
<tbody>
<tr>
<td style="width: 190px; text-align: center;"><span style="font-weight: bold; color: rgb(255, 255, 255); font-size: 11px; font-family: Tahoma;"> HOTSPOT TOKOPUAS</span><br>
<table class="tokopuas" style="background-color:#FFFFFF; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; width: 100%; margin-right: auto; margin-left: auto;">
<tbody>
<tr>
<td style="width: 50%; text-align: center;">Package</td>
<td style="width: 50%; text-align: center;">%u_actualProfileName%</td>
</tr>
<tr>
<td style="width: 50%; text-align: center;">Data limit</td>
<td style="width: 50%; text-align: center;">%u_limitDownload%</td>
</tr>
<tr>
<td style="width: 50%; text-align: center;">Time Limit</td>
<td style="width: 50%; text-align: center;">%u_limitUptime%</td>
</tr>
<tr>
<td style="width: 50%; text-align: center;">Validity</td>
<td style="width: 50%; text-align: center;">%u_timeLeft%</td>
</tr>
</tbody>
</table>
<table class="tokopuas" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; width: 100%; margin-right: auto; margin-left: auto;">
<tbody>
<tr>
<td style="width: 50%; text-align: center;"><span style="color: rgb(255, 255, 255); font-family: Tahoma;">Username</span></td>
<td style="width: 50%; text-align: center;"><span style="color: rgb(255, 255, 255); font-family: Tahoma;">Password</span></td>
</tr>
 <tr>
<td style="background-color:#FFFFFF; width: 50%; text-align: center;"><span style="color: rgb(163, 180, 200); font-family: Tahoma;">%u_username%</span></td>
<td style="background-color:#FFFFFF; width: 50%; text-align: center;"><span style="color: rgb(163, 180, 200); font-family: Tahoma;">%u_password%</span></td>
</tr>
</tbody>
</table>
<table class="tokopuas" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; width: 100%; margin-right: auto; margin-left: auto;">
<tbody>
<tr>
<td style="width: 40%; text-align: left;"><span style="color: rgb(255, 255, 255); font-family: Tahoma;">1Mbps Speed</span></td>
<td style="width: 60%; text-align: right;"><span style="color: rgb(255, 255, 255); font-family: Tahoma;">tokopuas.com</span></td>
</tr>
</tbody>
</table>
</td>
<td style="background-color:#FFFFFF; width: 10px; text-align: center;"><div align="center" class="vertical-text" >Rp %u_moneyPaid%</div></td>
</tr>
</tbody>
</table>

untuk kode footer, masukkan kode di bawah ini :

</body></html>

dan kode page break, bisa memakai kode :

<p class="noprint" style="font-size: 10px">   ................ page break ................ </p> <p class="pagebreak"> </p>

jika anda kebingungan, kode bisa di download dengan mengklik link disini.

kode membuat voucher

menggenerate kode voucher

untuk mencoba desain voucher yang baru di buat tadi, silahkan klik menu user, dan pilih beberapa user yang ingin di jadikan voucher hotspot.

generate kode voucher hotspot

selanjutnya, klik generate, dan pilih nama template voucher yang telah di buat tadi.

trik memakai voucher

lanjutkan dengan mengklik generate.

setting hotspot voucher

dan akan muncul tampilan voucher yang sudah siap di cetak dengan printer.

cara mencetak desain vocher

untuk mencetak, silahkan anda tekan di keyboard ” CTRL + P ” , dan voucher siap di cetak.

cara mudah ganti desain

hasil voucher yang telah saya cetak, dan tinggal di potong saja.

Cara desain voucher hotspot

dengan adanya tutorial ini, sekarang anda sudah bisa berjualan voucher internet hotspot.. jangan lupa like dan share yaa…