Untuk mengedit halaman login mikrotik hanya dibutuhkan file login dari mikrotik, kemudian tinggal di edit dengan web editor, dalam hal ini netcomp menggunakan dreamweaver.
netcomp akan memberikan contoh dan langkah-langkah mengedit halaman logi mikrotik mulai dari mengcopy paste hingga contoh halaman login yang telah di edit (yang sederhana saja,,hehehe :)
langkah pertama adalah masuk dulu ke winbox application (jika belum ada download dulu)
lalu...
nih source code nya ( gua pakedream weaver):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> NETCOMP 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">
body {
color: #737373;
font-size: 16px;
font-family: verdana;
background-color: #000000;
}
textarea,input,select {
background-color: #FDFBFB;
border: 1px solid #BBBBBB;
padding: 2px;
margin: 1px;
font-size: 14px;
color: #FF3300;
}
a, a:link, a:visited, a:active { color: #AAAAAA; text-decoration: none; font-size: 10px; }
a:hover { border-bottom: 1px dotted #c1c1c1; color: #AAAAAA; }
img {border: none;}
td { font-size: 14px; color: #7A7A7A; }
body,td,th {
color: #FFFFFF;
}
.style1 {color: #FF3300}
.style2 {color: #FFFFFF}
.style3 {color: #FF6600}
.style4 {font-size: 36px}
.style5 {color: #FF3300; font-size: 9px; }
.style6 {color: #FFFF00}
.style7 {color: #00CC00}
.style8 {font-size: 9px}
#Layer1 {
position:absolute;
width:252px;
height:255px;
z-index:1;
left: 91px;
top: 301px;
}
#Layer2 {
position:absolute;
width:269px;
height:34px;
z-index:2;
left: 740px;
top: 243px;
}
#Layer3 {
position:absolute;
width:200px;
height:251px;
z-index:2;
left: 771px;
top: 302px;
}
.style12 {font-size: 36px; color: #FF0000; }
.style13 {
color: #FF0000;
font-weight: bold;
}
.style15 {color: #FF0000; font-weight: bold; font-style: italic; }
.style16 {font-weight: bold}
.style17 {font-size: 24px}
.style19 {
font-size: 36px;
font-weight: bold;
color: #FF0000;
}
.style20 {color: #0000FF}
</style>
</head>
<body>
$(if chap-id)
<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 align="center">
<a href="$(link-login-only)?target=lv&dst=$(link-orig-esc)" class="style4"><span class="style2">NET</span><span class="style1">COMP</span></a></div>
<table width="100%" style="margin-top: 0%;"><tr>
<td height="47" align="center" valign="middle"><img src="/img/netcomp.png" alt="mikrotik" /></td>
</tr>
<tr>
<td align="center" valign="middle"><marquee direction=”up” scrollamount=”5″>
<strong>Net<span class="style1">Com</span> Siap <span class="style1">Melayani</span> Anda. <span class="style6">Dapatkan Segera voucher anda di gerai kami!! Perum. Kedung Turi Permai K-4 </span></strong>
</marquee>
<span class="style6"><strong><span class="style7">SEGERA HUBUNGI KAMI Telp: 031-7889106, Hp: 0856 554 80002 </span></strong></span></td>
</tr>
<tr>
<td align="center" valign="middle"><span class="style12"><blink><span class="style17">Ingin Internet-an?? beli voucher-nya segera.. 2500,-/jam </span></blink></span></td>
</tr>
<tr>
<td height="155" align="center" ><p class="style17"><strong>PROMO!!!</strong></p>
<p class="style17">PAKET BERLANGGANAN <span class="style20">HANYA</span> <span class="style19"><blink>RP. 150.000,-/BULAN</blink></span></p>
<p class="style17"><span class="style17 style6">UNLIMITED, INTERNETAN SEPUASNYA!!! BURUAN DAFTAR </span></p> </td>
</tr>
<tr>
<td align="center" valign="middle">
<div class="notice" style="color: #c1c1c1; font-size: 9px">Silahkan <span class="style3">Masukkan</span> login <span class="style1">dan</span> Password <span class="style3">yang tertera</span> pada voucher <span class="style1">yang telah</span> anda beli <br />
$(if trial == 'yes')Free trial available, <a style="color: #FF8080"href="$(link-login-only)?dst=$(link-orig-esc)&username=T-$(mac-esc)">click here</a>.$(endif)</div>
<p> </p>
<table width="305" height="219" border="0" cellpadding="1" cellspacing="1" style="border: 0px solid #cccccc; padding: 0px;">
<tr>
<td width="303" height="149" colspan="" align="center" valign="top">
<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="right" bgcolor="#FF3300"><strong>login</strong></td>
<td bgcolor="#FF3300"><input style="width: px" name="username" type="text" value="$(username)"/></td>
</tr>
<tr><td align="right" bgcolor="#FF3300"><strong>password</strong></td>
<td bgcolor="#FF3300"><input style="width: px" name="password" type="password"/></td>
</tr>
<tr><td bgcolor="#FF3300"> </td>
<td bgcolor="#FF3300"><input type="submit" value="OK" /></td>
</tr>
</table>
<div align="center"></div>
</form> </td>
</tr>
<tr><td height="67" align="center"><a href="http://www.mikrotik.com" target="_blank" style="border: none;"><img src="/img/logobottom.png" alt="mikrotik" align="bottom" /></a></td>
</tr>
</table>
<div style="color: #c1c1c1; font-size: 7px">
<p align="center" class="style5 style8"><span class="style2">Rp. 2500,-/<span class="style1">Jam</span></span> <span class="style2">--></span> <span class="style1">Hubungi:</span> <span class="style2">031-7889106</span> <span class="style1">atau sms ke:</span> <span class="style2">0856 554 80002</span> </p>
<p align="center" class="style5"><span class="style2">Net</span>Comp ----> <span class="style2">Randy</span> email: <span class="style2">randyose@yahoo.com </span></p>
<p align="center" class="style5"><span class="style2">Perumahan</span> Kedung Turi Permai BloK K-4 Taman <span class="style2">Sidoarjo </span></p>
</div>
<p><span class="style16"><span class="style3">Terima Pesanan: - Komputer/PC Rakitan pentium 4, dual core, core 2 duo, core i3 , </span>- flashdisk kingstone, CD blank, - Service Komputer/ Laptop, <span class="style3">- Design Web, Logo, Cover Buku, Spanduk</span></span> </p>
<p>$(if error)<br />
</p>
<div style="color: #FF8080; font-size: 9px">$(error)</div>$(endif) </td>
</tr>
<tr>
<td height="19" align="center" valign="middle"><p align="center" class="style16">Assalamu'alaikum.. kepada seluruh pelanggan Net<span class="style1">com</span>: Gunakanlah Layanan Kami dengan sebaik-baiknya, Carilah Sesuatu Yang bermanfaat Bagi Anda dan keluarga Anda. Bila Anda menemui situs yang bermuatan Pornografi, <span class="style13">catat dan laporkan</span> pada kami, agar kami bisa <span class="style15">memblokir</span> situs tersebut. Terima kasih Atas Kerja Sama ini. :) </p> </td>
</tr>
</table>
<script type="text/javascript">
<!--
document.login.username.focus();
//-->
</script>
</body>
</html>
udah selesai,, silahkan copy paste kalo mau,, hehehe... tapi jangan lupa comment ya,, walau hanya ucapan terima kasih ( GE-ER) hehehe :) salam NETCOMP...
yupz
ReplyDeleteSiiip. trims
ReplyDeletemantap
ReplyDelete