Cara Merubah Tampilan Login Hotspot Mikrotik Sendiri Responsive

Memiliki desain halaman login hotspot   tentu menjadi keingininan sendiri, ada manfaat yang bisa kita lihat dari mendesain halaman login mikrotik sendiri seperti ; 
- Memicu ketertarikan pengunjung untuk menggunakan hotspot
- Sebagai media untuk periklanan, hal ini juga menjadi peluang tambahan

Apabila kita melihat kedalam Files di storage router akan terlihat kumpulan file yang berekstensi html. Salah satunya ada file dengan nama login. Dari file inilah tampilan-tampilan login hotspot itu berasal.

Kita juga bisa mengubah tampilan standart dari login hotspot menjadi lebih artistik sesuai dengan keinginan kita. Namun sebelumnya kita harus mengetahui fungsi dari masing-masing file login tersebut. Diantara file tersebut adalah login.html, alogin.html, rlogin.html, flogin.html. Untuk penjelasannya adalah sebagai berikut :

• login html – Merupakan sebuah halaman login yang ditampilkan untuk autentikasi user dengan memasukkan username dan password.
• alogin.html – Sebuah halaman yang ditampilkan setelah user berhasil di autentikasi. Halaman ini menampilkan sebuah pop-up tentang status dari halaman apakah 'Log In' atau 'Log Off' dan juga akan diredirect (otomatis/manual) ke halaman web yang diakses oleh user.
• rlogin.html – Sebuah halaman yang me-redirect user dari mengakases halaman URL ke halaman login, jika user tersebut memerlukan autorisai untuk melakukan akses.
• flogin.html – Sebuah halaman login yang ditampilkan apabila terdapat kesalahan (error) terjadi. Misal, ketika user salah memasukkan 'Username' maupun 'Password'.

Kemudian untuk cara kerja dari request halaman “/login” adalah :

- Apabila user belum terautentikasi dan melakukan akses sebuah web maka akan di-redirect ke halaman login.html.
- Apabila prosedur login gagal (baik salah memasukkan username atau password), maka akan ditampilkan halaman flogin.html; Jika halaman flogin.html tidak ditemukan maka akan ditampilkan halaman login.html.
- Apabila user telah berhasil terautentukasi (login), alogin.html akan ditampilkan; apabila alogin.html tidak ditemukan maka akan langusung di-redirect ke halaman web yang di akses oleh user tersebut atau ke halaman status.

Nah, untuk mengubahnya, kita akan memodifikasi script dari file login.html. File tersebut dapat kita download terlebih dahulu dari router, baik menggunakan FTP (Linux dan Mac OS) atau cukup 'Drag & Drop' untuk Windows OS.

<style type="text/css">
html {
 font-family: calibri;

}
#nav a{
color: #ddd;
font-family: arial;
padding: 0px 10px;
}
#nav a:hover{
color: #fff;
}
nav{
height: 40px;
padding: 0;
}


.center{
text-align:center;
}
.left{
text-align:left;
}
.right{
text-align:right;
}
.right-center{
text-align:right;
}
.left-center{
text-align:left;
}
body{
margin: 0;
padding: 0;
font-size: 16px;
line-height: 1.42857143;
box-sizing: border-box;
}
#nav{
background: #424242;
color: #ddd;
width: 100%;
position: fixed;
padding: 10px 20px;
}
#credit{
font-family: monospace;
border-top:1px solid#aaa;
width: auto;
font-size: 12px;
padding: 12px;
}
header{
background: #f2f2f2;
color:#424242;
border-bottom: 4px solid#0079df;
padding: 12px;
}
.content{
padding: 2px;
background: #fff;
min-height: 400px;
}
footer{
border-top: 5px solid#0079df;
background: #626262;
color: #f2f2f2;
padding: 11px 12px;
text-align: center;
}
a{
color: #aaa;
font-weight: bolder;
font-size: 14px;
font-family: sans-serif;
text-decoration: none;
}
a:hover{
color: #656565;
text-decoration: none;
}
footer a{
color: #ddd;
}
footer a:hover{
color: #fff;
}
h1,h2,h3,h4{
color: #626262;
font-weight: 700;
}
input[type=text],input[type=password]{
padding: 12px 8px;
font-size: 14px;
width: 60%;
color: #aaa;
font-family: arial;
border-radius: 5px;
border:1px solid#aaa;
margin-bottom: 4px;
}
input[type=submit]{
padding:12px;
border-radius: 5px;
width: 60%;
font-family: arial;
color: #fff;
font-weight: bolder;
box-shadow: 2px 2px 1px #ddd;
background: #04d80e;
border:0px solid#aaa;
}
input[type=submit]:hover{
background: #03b10c;
cursor: pointer;
}
input[type=submit]:focus{
background: #007d06;
}
/*================================= Untuk Tata Letak ====================================================================*/
.row{
overflow: hidden;
}
.col-md-1{
width: 29%;
padding: 5px;
float: left;
padding: 4px;
margin: 4px;

}
.col-md-4{
width: 68%;
padding: 5px;
margin: 4px;
float: left;
}


.description{
font-size: 14px;
color: #a4a4a4;
font-family: kalinga;
}
@media(max-width: 900px){
.left-center{
text-align:center;
}
#credit{
font-size: 7px;
}
.content{
padding: 0;
}
.description{
font-size: 8px;
}
#nav{
background: rgba(66,66,66,.95);
color: #aaa;
padding: 9px;
}
.right-center{
text-align:center;
}
.col-md-1{
width: 100%;
float: none;
padding: 0;
}
.col-md-4{ /**/
width: 100%;
float: none;
padding: 0;
margin: 2px;
}
input[type=submit]{
width: 85%;
}
input[type=text],input[type=password]{
width: 80%;
}

}

/* ======================================================------------============================================== */
</style>

<!DOCTYPE html>
<html>
<head>
<title>RAJOEhotspot</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
</head>
<body>
<nav>
<div class="left-center" id="nav">
<a href="">Home</a>
<a href="">Privacy</a>
<a href="">Policy</a>
<a href="">About US</a>
</div>
</nav>
<header>
<div class="row">
<div class="col-md-1 center"><img style="margin: 12px; cursor: pointer;" title="MYhotspot" onclick="location.href=''" src="image/logokalian.png" width="250" height="80" alt="Masukan Logo Kamu"></div>
<div class="col-md-4 right-center description">Contact us : 0852-xxxx-xxxx  &nbsp;|&nbsp; mail : rajoe001@gmail.com</div>
</div>
</header>
<content>
<div class="content">
<div class="row">
<div class="col-md-1 center">
<h2>Welcome to Myhotspot</h2>
<form>
<input type="text" name="username" placeholder="Username" required><br />
<input type="password" name="password" placeholder="Password" required><br />
<input type="submit" value="Login Now"><br /><br />
<a href="">Saya tidak memiliki akun !</a><br /><br />
</form>
</div>
<div class="col-md-4 right-center">
<img src="image/slide3.jpg" alt="Masukan Slideshow Kamu" width="100%" height="300">
</div>
</div>
</div>
</content>
<footer>
<a href="">Privacy</a> <a href="">Policy</a> <a href="">About US</a><br />
<div id="credit">Copyright &copy; 2017. Design by Edy Kurniawan All Reserve</div>
</footer>

</body>
</html>

Juga bisa di download kok file nya ;
Download

• Tweet
• Share
• Share
• Share
• Share