TRENDING NOW

Z-PLATE.NET Tutorial Blogspot Wordpress, Tips anda Trick Seo, Busines Online,Design Template Blogspot, Tupperware
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="https://sites.google.com/site/tutorialblogspotseo/home/jquery.min.js"></script>            
 <script type="text/javascript" src="https://sites.google.com/site/tutorialblogspotseo/home/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="http://4.bp.blogspot.com/-Sl2jCiqRE38/V2AL_bX8V6I/AAAAAAAAEk8/I752ipzPPoYmUEnEljxOmHDLKKdV9IiXgCK4B/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

http://4.bp.blogspot.com/-Sl2jCiqRE38/V2AL_bX8V6I/AAAAAAAAEk8/I752ipzPPoYmUEnEljxOmHDLKKdV9IiXgCK4B/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.
Z-PLATE.NET Tutorial Blogspot Wordpress, Tips anda Trick Seo, Busines Online,Design Template Blogspot, Tupperware
Bismillahirrahmanirrahim, pada postingan ini saya ingin sedikit menyimpan tulisan tentang cara Cara Membuat Template Voucher  Hotspot Mikrotik, membuat voucher dalam mikrotik sangatlah mudah dan gampang, apalagi kalau sobat semua sudah level master dalam dunia mikrotik, mungkin membuat voucher ini bukan lagi hal yang aneh.

Untuk membuat voucher dalam mikrotik tentunya kita (sebagai pemula) perlu langkah langkah yang harus di lakukan, jika kita belum tau cara membuat voucher dalam usermanager mikrotik ikuti caraya seperti di bawah ini.

Cara Membuat Template Voucher Hotspot Mikrotik
Cara Membuat Template Voucher Hotspot Mikrotik 

Langkah pertama login ke Usermanager Mikrotik masukan username dan password 
Langkah selanjutnya klik menu setting di bawah terus klik tempalates disana ada form yang harus di isi diantaranya :

Header
Row
Footer
Break

Tampilannya seperti di bawah ini

Cara Membuat Template Voucher Hotspot Mikrotik
Cara Membuat Template Voucher Hotspot Mikrotik 
Silahkan isi form tersebut oleh sobat dengan menggunakan Script HTML.

Untuk Form Header sobat isi dengan kode-kode html yang dari mulai kode <!DOCTYPE html>
sampai tag pembuka <body>
contohnya seperti di bawah

<!DOCTYPE html>
.......
isi dari form ini dari mulai script java script, css dan lain lain yang berhubungan dengan template
....... 
<body> 

Untuk Form Row silahkan isi dengan konten template contohnya seperti di bawah
<div> 
.........................
isi dari konten terserah isinya sesuai kebutuhan  
.........................
</div>
pada form row ini sobat bisa memanggil profil, harga, limitasi dari usermanager mikrotik seperti di bawah ini

%u_actualProfileName% (Untuk Menampilkan Profil Hotspot)
%u_limitDownload% (Untuk Menampilkan Limit Download)
%u_limitUptime% (Untuk Menampilkan Limit Uptime)
%u_timeLeft% (Untuk Menampilkan Time Left)
%u_moneyPaid% (Untuk Menampilkan Money Paid/harga paket)
%u_username% (Untuk Menampilkan user)
%u_password% (Untuk Menampilkan password)

Selanjutnya Form Footer di isi dengan tag penutup dari tag body dan tag html contohnya seperti di bawah

</body></html>

Terkhir Form Break isinya sebgai berikut :

<!-- Ini Awal BREAK --> 
<p class="noprint" style="font-size: 0px">  
 ................ page break ................ 
</p> 
<p class="pagebreak">&nbsp;</p> 
<!-- Ini Akhir BREAK -->

Setelah beres dengan desainnya langkahnya selanjutnya klik save terus masuk ke menu user, jika belum ada user silahkan sobat buat dulu usernya, jika sudah ada sobat tinggal klik menu Generate terus klik nama yang tadi di buat pada templates.

Jika sudah keluar popupnya sobat tinggal tekan CTRL + P untuk mencetaknya. selesai deh vouchernya.. saya rasa itu secara singkat Cara Membuat Template Voucher Hotspot Mikrotik dan kurang lengkap dengan gambar hehe..

Oke deh akhir kata Good Luck Happy Nice Dream.....     


       
Z-PLATE.NET Tutorial Blogspot Wordpress, Tips anda Trick Seo, Busines Online,Design Template Blogspot, Tupperware
Bismillahirrahmanirrahim... pada postingan ini sesuai dengan judul diatas yaitu Template Voucher Mikrotik Versi cdr (Corel Draw), saya ingin sedikit berbagi dan sekaligus menyimpan arsip saya di dumay (dunia maya), kadang kala kalau disimpan di di dalam komputer file file suka hilang dan lupa menyimpannya, apalagi kalo komputernya hank dan hardisknya badsector udah deh hilang semua.

Oke langsung saja bagi rekan rekan se pekerjaan atau rekan rekan yang suka mainin hotspot dan suka pakai voucher,  kali ini saya ingin berbagi template untuk membuat  voucher bagi pelanggan/client, file voucher ini ber extensi .cdr (Corel Draw), voucher ini bersifat manual dan harus di tulis satu satu dalam aplikasi corel draw, supaya bisa di integrasikan dengan script di user manager nanti dalam postingan berikutnya, untuk sekarang saya baru bisa share mentahannya saja berupa file cdr.

Penampakan templatenya seperti di bawah  ini

Template Voucher Mikrotik Versi cdr (Corel Draw)
Template Voucher Mikrotik Versi cdr (Corel Draw) 
Sebelum mendowload pastikan komputer sudah terinstall aplikasi Corel Draw minimal Corel Draw X4, jika komputer sudah ready silahkan sobat dowload pada link di bawah ini.

Sekian dulu postingan tentang Template Voucher Mikrotik Versi cdr (Corel Draw), semoga bermanfaat, Good Luck happy Nice Dream.         
Z-PLATE.NET Tutorial Blogspot Wordpress, Tips anda Trick Seo, Busines Online,Design Template Blogspot, Tupperware
Bismillahirrahmanirrahim... setelah sekian lama tidak update di blog, pada kesempatan ini saya ingin sedikit berbagi tentang login page mikrotik, sesuai dengan judul diatas yaitu Login Page Mikrotik Dengan Kode Voucher Only, mungkin rekan rekan atau para admin hotspot sudah tidak asing lagi dengan yang namanya login page ini.

Login Page Mikrotik Dengan Kode Voucher Only
Login Page Mikrotik Dengan Kode Voucher Only 
Seperti biasanya di sebuah login page pada hotspot mikrotik itu memasukan dua buah kata atau dikenal dengan nama username dan password untuk dapat mengakses internet. Untuk membuat login page hotspot mikrotik hanya dengan kode voucher saja sebenarnya tidak susah dan tidak ribet, yang perlu kita lakukan hanya tinggal memodifikasi sebuah secript html pada kolom input type text username dan pada script input type password dan type submit jika ingin diganti dengan kata lain.

Untuk memodifikasinya pun sangat mudah, langkah yang pertama sobat masuk mikrotik dengan menggunakan aplikasi winscp (jika belum punya silahkan cari softwarenya di google), jika sudah masuk ke mikorotik silahkan sobat buka file login.html terus cari script seperti di bawah

<input  name="username"  type="text" value="$(username)"/>

terus sobat ganti dengan kode di bawah ini

<input  name="username" onblur="password.value=username.value"   type="text" value="$(username)"/>

yang kedua silahkan sobat lagi cari script input type password, secriptnya seperti di bawah ini

<input  name="password" type="password"/>

terus sobat ganti dengan kode script di bawah ini.

<input   name="password" type="hidden"/>

Untuk yang ketiga ini opsional mau diganti atau tidak terserah sobat, yaitu cari script type submit contohnya seperti di bawah ini.

<input type="submit" value="LOGIN"  />

Jika ingin diganti sobat tinggal ganti saja kata login menjadi kata AKTIPKAN VOCUHER, itu terserah sobat.

jika sudah selesai langkah selanjutnya sobat tinggal membuat user dan password di usermanager mikrotik seperti biasa, dengan catatan user dan password client harus sama. seperti gambar di bawah ini
Login Page Mikrotik Dengan Kode Voucher Only
Login Page Mikrotik Dengan Kode Voucher Only 

Sebagai contoh silahkan sobat bisa dowload tempalate nya pada link di bawah ini, template ini saya donwload dari situs template emo yang di modif menjadi login page hotspot. 

Saya rasa postingan tentang Login Page Mikrotik Dengan Kode Voucher Only di cukupkan sekian semoga bermanfaat, jika ada kesalahan mohon di betulkan dan di perbaiki... akhir kata Good Luck Happy Nice Dream...