Edit login page hotspot mikrotik
Berawal dari banyaknya pertanyaan di blog sebelah tentang bagaimana mengedit tampilan login page hotspot mikrotik, maka pada kesempatan ini saya akan memberi sedikit tips untuk mengedit tampilan hotspot tersebut.
Langkah awal yang harus dilakukan adalah copy/download dulu file login.html pada mikrotik anda. Untuk melakukan ini bisa langsung masuk ke winbox mikrotik anda atau juga bisa via FTP. langkah ini untuk mengantisipasi jika terjadi kegagalan dalam editing html kodenya. Jadi tinggal dibalikin lagi default kode HTML nya.
Setelah langkah diatas dilakukan maka langsung saja rubah kode HTML default menjadi kode HTML dibawah 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”>
<!–hack-by-sujianto-sp—>
<!–script-login-ini-berjalan-pada-MikroTik-versi-2.9.27–>
<!–copy-paste-script-login-ini-pada-file-login.html–>
<head>
<title>Internet WiFi Hotspot > login</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<meta http-equiv=”pragma” content=”no-cache” />
<meta http-equiv=”expires” content=”-1″ /><style type=”text/css”>
a, a:link, a:visited, a:active { color: #AAAAAA; text-decoration: none; font-size: 10px; }
a:hover { border-bottom: 1px dotted #c1c1c1; color: #FF0000; font-weight: bold;}
img {border: none;}
td { font-size: 14px; color: #7A7A7A; }#layer-utama {
position:absolute;
width:500px;
height:374px;
z-index:0;
left: 150px;
top: 0;
}
#layer-login {
position:absolute;
width:100px;
height:100px;
z-index:1;
left: 180px;
top: 185px;
}
.style-login {
font-size: 12px;
font-family: Verdana;
}
.style-text-1 {
font-family: Tahoma;
font-size: 10px;
}
.style-text-2 {
font-family: Tahoma;
font-size: 10px;
}–>
</style>
</head>
<body> <p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>$(if chap-id)</p>
<form name=”sendin” action=”$(link-login-only)” method=”post”>
<input type=”hidden” name=”username” />
<input type=”hidden” name=”password” />
<input type=”hidden” name=”dst” value=”$(link-orig)” />
<input type=”hidden” name=”popup” value=”true” />
</form><script type=”text/javascript” src=”/md5.js”></script>
<script type=”text/javascript”>
<!–
function doLogin() {
document.sendin.username.value = document.login.username.value;
document.sendin.password.value = hexMD5(’$(chap-id)’ + document.login.password.value + ‘$(chap-challenge)’);
document.sendin.submit();
return false;
}
//–>
</script>
$(endif)
<div id=”layer-utama” style=”position: absolute; left: 62px; top: -1px; width: 600px; height: 279px”><img src=”/img/free-wifi1.jpg” width=”194″ height=”222″ /><img src=”/img/wifi_hotspot1.jpg” width=”208″ height=”222″ /><img src=”/img/hotspot1.gif” width=”193″ height=”222″ /><img src=”/img/background_sunshine3.jpg” width=”628″ height=”558″ /><br>
<table border=”0″ width=”100%” id=”table1″ cellspacing=”1″>
<tr>
<td height=”18″ bgcolor=”#FFFFCC” style=”border-left-width: 1px; border-right-width: 1px; border-top-style: dotted; border-top-width: 1px; border-bottom-width: 1px”><span></span><span></span></td>
<td width=”363″ height=”18″ bgcolor=”#FFFFCC” style=”border-left-width: 1px; border-right-width: 1px; border-top-style: dotted; border-top-width: 1px; border-bottom-width: 1px”>
<div align=”right”><a href=terms-conditions.html ><span style=”text-decoration: none”>Terms and Conditions</span></a> | <a href=”registrasi-notebook.html”>Internet Vvip Akses</a> | <a href=”antivirus-update.html”>Antivirus Update</a></font> | 571 </div></td>
</tr>
</table>
</div>
<div id=”layer-login” style=”position: absolute; left: 248px; top: 378px”>
<form name=”login” action=”$(link-login-only)” method=”post”
$(if chap-id) onSubmit=”return doLogin()” $(endif)>
<input type=”hidden” name=”dst” value=”$(link-orig)” />
<input type=”hidden” name=”popup” value=”true” /><table width=”100″ style=”background-color: #ffffff”>
<tr>
<td align=”left”><span>USERNAME </span></td>
<td><input style=”width: 80px” name=”username” type=”text” value=”$(username)”/></td>
</tr>
<tr><td align=”left”><span>PASSWORD </span></td>
<td><input style=”width: 80px” name=”password” type=”password”/></td>
</tr>
<tr><td><span></span></td>
<td><input type=”submit” value=”LOGIN” /></td>
</tr>
<tr>
<td colspan=”2″><div>
FREE LOGIN $(if trial == ‘yes’)<a style=”color: #FF8080″href=”$(link-login-only)?dst=$(link-orig-esc)&username=T-$(mac-esc)”>CLICK
HERE!</a>$(endif)</div></td>
</tr>
</table>
</form>
</div>
$(if error)<br /><div style=”color: #FF8080; font-size: 9px”>$(error)</div>$(endif)<script type=”text/javascript”>
<!–
document.login.username.focus();
//–>
</script>
</body>
</html>
Setelah selesai merubah kode html tersebut maka upload kembali file login.html menuju folder hotspot di mikrotik anda.
Maka tampilan login page hotspot mikrotik anda akan berubah menjadi seperti ini.
Untuk langkah awal setting hotspot mikrotik silahkan menuju halaman ini.
wah mantabbb mas.. artikel ini banyak sekali yang membutuhkan. semoga bermanfaat buat saya dan mereka..
budiono´s last blog ..Juri Telkomsel Campus Blog Competition
wah boleh dicoba nih triknya…
kalau mau buat host login mikrotik jadi hotspot.com gimana ya?
wahyu´s last blog ..Dua Orang Kakek di Ujung Hidupnya
wah…, sip tenaqn ini, semoga mendapat balasan dari Tuhan YME we
pelintas batas´s last blog ..Ih…., Ada Banci…….
seandainya punya domain sendiri
edda´s last blog ..Oleh-oleh Hibernasi (O2H) Part 1
Pengin mencoba juga…
Semoga berhasil.
Makasih Mas
waduuuh durung tekan kono pelajarane kang, nggak mudenggg
ami´s last blog ..lagi lagi setahun
tak kusangka tak kuduga dirimu ternyata sudah sangat ahli. kereeeeeeeeeeeeeeeenn!!!!
mbah sangkil´s last blog ..Membuat Vektor Wajah Dengan Vector Magic dan Corel
mangstaf jaya …
SemutGeni.Net´s last blog ..The Traffic
ilmune tambah mumpuni… ra ngoyak blaaassss… (doh)
gan gimana nih… download login page nya…
4r03l´s last blog ..Tips, Trik dan Contoh Bertrading
cara up load image sesuai disain kita gimana gan ?
mas saya masih ningung ne….. tolong di jelasin lebih dtail lagi dong…… klo misalnya rubah melalui winboxnya gmn???? thx….. tolong di balas ke emai saja mas. (x.onie@yahoo.co.id)
lebih banyak lagi disni :
http://www.forummikrotik.com/dude-and-user-manager/7274-share-design-login-page-hotspot.html
mantap bro…. lanjutkan kalau ada yg lain yaaa tampilannya he he he
permisi njiplak script masgaluh, mudah2an ra keberatan, matur suwun sak derenge lan sasampunipun.