Modifikasi Template Login Wifi Hotspot Mikrotik

[ Di update 21 Mei 2015 ]

Ini catatan yang lumayan berat, pembahasannya panjang.

Saya berterima kasih & mengapresiasi GmiB26.Net, karena memberikan template login wifi hotspot mikrotik hasil karyanya dengan tanpa pamrih sehingga membuat pekerjaan saya menjadi lebih mudah dalam memodifikasi tampilan login wifi hotspot mikrotik sesuai keinginan saya, ya seperti yang kita ketahui bersama bahwa template login wifi hotspot mikrotik bawaan aslinya adalah biasa saja, sangat sederhana & bertemakan serba putih, mungkin dengan tujuan untuk mempercepat waktu loading login page tsb jadi desain default login wifi hotspot mikrotiknya memang dibuat seminimalis mungkin.

Ada fitur-fitur baru yang ditambahkan oleh GmiB26.Net sehingga menambah bagus tampilan login wifi hotspot mikrotiknya yaitu sebagai berikut :

1. Horizontal Menu.
2. Scrolling Text News
3. Iklan.
4. Background.

Kemudian dalam versi saya, dimodifikasi kembali, ada bagian tertentu yang sengaja saya hilangkan ( removed ), ya disesuaikan untuk tempat saya bekerja, namun disini saya berikan yang versi bangandi.web.id bukan yang versi untuk tempat saya bekerja, tidak masalah kan ya, nanti bisa disesuaikanlah menurut keinginan anda masing-masing.

Disini anda akan saya ajak sedikit mempelajari kode HTML & kode CSS, syukur-syukur kita bisa sama-sama menambah/ mengembangkan pengetahuan kita tentang bahasa yang sering digeluti oleh seorang Webmaster ini, saya pun juga masih harus banyak belajar, terutama kode-kode yang lain Php, JavaScript, HTML5 dan lain sebagainya. Dan mungkin saja karya modifikasi anda ternyata lebih mantap dari modifikasi saya, silahkan dikreasikan sendiri, asal jangan error saja nanti hasilnya ya, hoho.

Saya pun sangat yakin banyak yang sudah mahir memahami kode HTML & CSS, berarti template ini akan sangat membantu anda untuk menghasilkan karya yang lebih baik.

Jika kita menatap positif kedepan, ilmu webmaster ini bila ditekuni maka tidaklah sia-sia banyak manfaatnya, contohnya saya... ya walaupun ilmu saya di bidang ini belumlah cukup/ pantas jika dikategorikan sebagai seorang webmaster, maklum saja saya belajar secara otodidak, plus tidak ada sertifikat ini itu, guru saya pun hanyalah internet. Namun, saya sudah mendapatkan penghasilan dari ilmu webmaster ini, walaupun tidak seberapa tapi lumayanlah, tingkat amatir seperti saya saja bisa mendapatkan bayaran kuramg lebih 1 juta per desain website, bayangkan saja besarnya bayaran untuk jasa seorang webmaster profesional sungguhan, tidak terbayangkan upah jasanya, wuuiih... mantab jaya.

Lagipula di era teknologi ini, jasa seorang webmaster sangatlah dibutuhkan, setiap perusahaan, instansi-instansi pemerintahan berlomba-lomba memperbagus tampilan websitenya, belum lagi semua sistem sudah serba berbasis IT : e-Proc, e-Asset, e-Finance, e-Learning, e-Library dan lain sebagainya, peluang kita sebagai praktisi IT begitu besar. Ini adalah Ilmu yang bermanfaat bagi kita dan orang lain, kita harus raih peluang ini.

Oke, cukup, saya malah jadi cerita panjang lebar, maaf. Berikut dibawah ini screenshoot hasil modifikasi template versi bang andi.

Klik untuk memperbesar gambar.

Cara editnya :

1. Download dulu file rar template login wifi hotspotnya disini.
2. Direkomendasikan membuka file html nya dengan wordpad karena lebih enak melihat struktur kode Htmlnya rapi, pakai notepad juga boleh namun akan terlihat acak-acakan. Atau gunakan aplikasi Editor HTML yang versi Offline atau Online, ada banyak tuh.
3. Untuk melihat hasil edit file Html buka dengan Mozilla Firefox > Menu > Open File > Pilih file Html, jika ada perubahan tinggal di reload saja.
4. Jika file Html tidak mau disimpan ( save ), maka tutup dahulu tanpa menyimpan perubahan! lalu buka kembali. Biasanya ini terjadi saat kita melakukan copy paste kode Html di wordpad ke wordpad yang lain, diakali saja dengan copy paste dahulu ke notepad ( agar clear segala format ) baru copy paste kembali ke wordpad yang dimaksud.

Berikut ini kode Html & Petunjuknya, sbb :

[ Maaf petunjuknya belum rapi semuanya, nanti saya update lagi! ]

LOGIN HTML.

Petunjuknya : Sesuaikanlah yang saya tandai dengan warna merah, ubahlah kode html lainnya jika perlu, seperti font type, font size dsb.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head><title>bangandi.web.id &gt; Login</title> 

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<meta http-equiv="pragma" content="no-cache"> 
<meta http-equiv="expires" content="-1"> 
<link rel="stylesheet" href="gmi.css" type="text/css" media="screen"> 
<script src="jquery-latest.pack.js" type="text/javascript"></script> 
<script src="jcarousellite_1.0.1c4.js" type="text/javascript"></script> 
<script type="text/javascript"> 

$(function() { 
$(".newsticker-jcarousellite").jCarouselLite({ 
vertical: false, 
hoverPause:true, 
visible: 1, 
auto:3000, 
speed:2000 
}); 
}); 
</script> 

</head> 

<body bottommargin="0" topmargin="0" leftmargin="0" rightmargin="0"> 
$(if chap-id) 
<form name="sendin" action="$(link-login-only)" method="post"> 
<input name="username" type="hidden"> 
<input name="password" type="hidden"> 
<input name="dst" value="status" type="hidden"> 
<input name="popup" value="true" type="hidden"> 
</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) 

<center> 
<table class="main-login" width="959"> 
<tbody> 
<tr height="30"> 
<td colspan="2"> 
<img src="./img/banner%20bangandi.png" style="width: 700px; height: 150px;"> 
<br> 
<br> 

<div class="menu"> 
<ul> 
<li><a href="status">Home</a></li>
<li><a href="#" target="blank">Menu 1</a></li> 
<li><a href="#" target="blank">Menu 2</a></li> 
<li><a href="#" target="blank">Menu 3</a></li> 
<li><a href="#" target="blank">Menu 4</a></li> 
<li><a href="#" target="blank">Menu 5</a></li> 
</ul> 
</div> 
</td> 
</tr> 

<tr height="10"> <td colspan="2">&nbsp;</td>
</tr> 
<tr height="30"> 
<td class="welcome"> 
<font style="font-size: 15px; font-family: Calibri; font-weight: bold; color: rgb(255, 255, 255);">Welcome, <b>Guest!</b></font><br> 
<font style="font-size: 15px; font-family: Calibri; font-weight: bold; color: rgb(255, 255, 255);">Please Login first!</font> 
</td> 
<td></td> 
</tr> 
<tr height="375" valign="top">
<td colspan="2"> 
<table> 
<tbody> 
<tr> 
<td>
</td> 

<td class="benefitgerak" height="75" width="350"> 
<div id="newsticker-demo"> 
<div class="newsticker-jcarousellite"> 
<ul>
<li>
<font style="font-size: 12px; font-family: Calibri; font-weight: bold; color: rgb(0, 0, 0);">Berita/ Informasi 1. </font>
</li> 
<li><font style="font-size: 12px; font-family: Calibri; font-weight: bold; color: rgb(0, 0, 0);">Berita/ Informasi 2. </font></li> 
<li><font style="font-size: 12px; font-family: Calibri; font-weight: bold; color: rgb(0, 0, 0);">Berita/ Informasi 3. </font></li> 
</ul> 
</div> 
</div> 
</td> 
</tr> 
</tbody> 
</table> 

<table> 
<tbody> 
<tr> 
<td class="isi" width="220"> 
<input name="dst" value="$(link-orig)" type="hidden">
<input value="true" name="popup" type="hidden"> 
<table class="login"> 
<form name="login" action="$(link-login-only)" method="post" $(if="" chap-id="" onsubmit="return doLogin()" $(endif=""></form> 

<tbody> 
<tr> 
<td colspan="2">&nbsp;</td> 
</tr> 
<tr> 
<td class="judul">Username:</td> 
<td><input class="isian" name="username" value="$(username)" type="text">
</td> 
</tr> 

<tr> 
<td class="judul">Password:</td> 
<td>
<input class="isian" name="password" type="password">
</td> 
</tr> 
<tr> 
<td colspan="2" align="center">
<input class="button" value="Login" type="submit">
</td> 
</tr> 
<tr> 
<td colspan="2" align="center">
$(if error) 

<div style="color: red; font-size: 10px; text-decoration: blink;">
<blink>
<b> 
<script type="text/javascript"> 
var error = "$(error)"; 
if (error == "credit limit reached") { document.write("Maaf, Masa Aktif Voucher Anda Sudah Habis | ");
} 
if (error == "uptime limit reached") { 
document.write("Maaf, Waktu Internet Voucher Anda Sudah Habis | "); } 
if (error == "download limit reached") { 
document.write("Kuota Voucher Anda Telah Habis | "); 
} 
if (error == "no valid profile found") { 
document.write("Maaf, akun $(username) tidak memiliki paket internet aktif | "); 
} 
if (error == "invalid password") { 
document.write("Password Yang Anda Masukan Salah, Hubungi Kami Atau Coba Lagi | "); 
} if (error == "simultaneous session limit reached") 
{ 
document.write("Username $(username) sudah login atau sedang aktif. Silahkan logout terlebih dahulu untuk bisa login dengan akun tsb.");
} 
else { 
document.write("$(error)"); 
} 

</script>
</b>
</blink>
</div> 
$(endif)
</td> 
</tr> 
</tbody> 
</table> 
</td> 
<td align="center" valign="top" width="739"> 

<table class="boxiklan"> 
<tbody> 
<tr> 
<td align="left"> 
<iklan> 
<b>MOHON PERHATIAN!</b>
<br> 
<br> 
<font style="font-size: 12px; font-family: Calibri; color: rgb(0, 0, 0);"> <b>1. Dengan menekan tombol LOGIN berarti Anda setuju untuk tunduk dan patuh pada </b>.<a href="#" target="_blank">
<font style="font-size: 12px; font-family: Calibri; color: red;"><b>Terms of services bangandi.web.id</b></font></a> 
<br> 
<br> 
<b>2. Dilarang mengakses konten negatif yang memuat SARA, Pornography, Kekerasan, Judi dan sebagainya yang berdasarkan pada </b>
<a href="https://jdih.kominfo.go.id/produk_hukum/view/id/215/t/peraturan+menteri+komunikasi+dan+informatika+nomor+19+tahun+2014+tanggal+17+juli+2014" target="_blank">
<font style="font-size: 12px; font-family: Calibri; color: red;"><b>Peraturan Menteri Komunikasi dan Informatika Nomor 19 Tahun 2014</b></font></a> 
<br> 
<br> 
<b>3. Direkomendasikan mengunakan browser Google Chrome untuk mendapatkan kecepatan browsing yang cepat &amp; stabil.</b> 
<br> 
<br> 
<b>4. Ikutlah berpartisipasi dalam Program Depkominfo untuk menerapkan Internet Positif+. Dengan cara melaporkan ke admin bangandi.web.id apabila Anda menemukan website yang memuat konten negatif dan akan segera kami blokir.</b> 
<br> 
<br> 
<b>5. Hubungi Admin bangandi.web.id apabila Anda membutuhkan bantuan.</b> 
<br> 
<br> 
<br> 
</font> 
</iklan> 
</td> 
</tr> 
</tbody> 
</table> 
</td> 
</tr> 

<tr height="75" valign="top"> 
<td colspan="2" align="center">
<br> 
<br> 
<br> 
<br> 
<br> 
<br> 
<br> 
<br> 
<br> 

<div class="footer">
<font style="font-size: 10px; font-family: verdana; font-weight: bold; color: rgb(255, 255, 255);">bangandi.web.id©2009 - 2015 All Rights Reserved</font>
<br> 
</div> 
</td> 
</tr> 
</tbody> 
</table> 

<script type="text/javascript"> 
<!-- document.login.username.focus(); //--> 
</script> 
</td> 
</tr> 
</tbody> 
</table> 
</center> 
</body>
</html>

LOGOUT HTML.

Petunjuknya : Sesuaikanlah yang saya tandai dengan warna merah, ubahlah kode html lainnya jika perlu, seperti font type, font size dsb.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head><title>bangandi.web.id &gt; Logout</title> 

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<meta http-equiv="pragma" content="no-cache"> 
<meta http-equiv="expires" content="-1"> 
<link rel="stylesheet" href="gmi.css" type="text/css" media="screen"> 
</head> 
<body> 
<script language="JavaScript"> 
<!-- function openLogin() { 
if (window.name != 'hotspot_logout') return true; 
open('$(link-login)', '_blank', ''); 
window.close(); 
return false; 
} 
//--> 
</script> 

<center> 
<table class="main" width="959"> 
<tbody> 
<tr height="30"> 
<td colspan="2"> 
<img src="./img/banner%20bangandi.png" style="width: 700px; height: 150px;"> 
<br> 
<br> 
<div class="menu"> 
<ul> 
<li><a href="status">Home</a></li> <li><a href="#">MENU 1</a></li>
<li><a href="#">MENU 2</a></li> 
<li><a href="#">MENU 3</a></li> 
<li><a href="#">MENU 4</a></li> 
<li><a href="#">MENU 5</a></li> 
</ul> 
</div> 
</td> 
</tr> 

<tr height="10"> 
<td colspan="2">&nbsp;</td> 
</tr> 
<tr height="415" valign="top"> 
<td colspan="2"> 
<table class="tabula"> 
<tbody> 
<tr> 
<td colspan="2">&nbsp;</td> 
</tr> 

<tr> 
<td colspan="2"> 
<div class="notice">
<font style="font-size: 10px; font-family: verdana; font-weight: bold; color: rgb(255, 255, 255);">Thank You for using our service</font>
<br> 
<font style="font-size: 10px; font-family: verdana; font-weight: bold; color: rgb(255, 255, 255);">Logged out, Your cookies has been cleared!</font>
</div> 
<br> 
</td> 
</tr> 

<tr> 
<td colspan="2" align="center">
<font style="font-size: 10px; font-family: verdana; font-weight: bold; color: rgb(255, 255, 255);">Your Access Information</font>
</td> 
</tr> 

<tr> 
<td>
$(if session-time-left) 
$(endif) 
<table class="data"> 
<tbody> 
<tr> 
<td align="right">username:</td>
<td>
$(username)</td> 
</tr> 

<tr> 
<td align="right">IP address:</td> 
<td>
$(ip)</td> 
</tr> 

<tr> 
<td align="right">MAC address:</td>
<td>
$(mac)</td> 
</tr> 

<tr> 
<td align="right">session time:</td> 
<td>
$(uptime)</td> 
</tr> 

<tr> 
<td align="right"><font style="color: red; font-weight: bold;">Sisa Waktu Koneksi :</font>
</td> 

<td><font style="color: red; font-weight: bold; font-size: 15px;">
$(session-time-left)</font>
</td>
 </tr> 

<tr> 
<td align="right">bytes up/down:</td> 
<td>
$(bytes-in-nice) / $(bytes-out-nice)
</td> 
</tr> 
</tbody> 
</table> 
</td> 
</tr> 
</tbody> 
</table> 

<form action="$(link-login)" name="login" onsubmit="return openLogin()"> 
<br> 
<input class="button" value="Relogin" type="submit"> 
</form> 
</td> 
</tr> 

<tr height="75" valign="top"> <td colspan="2" align="center"> 
<div class="footer"><font style="font-size: 10px; font-family: verdana; font-weight: bold; color: rgb(255, 255, 255);">bangandi.web.id©2009 - 2015 All Rights Reserved</font>
<br> 
</div> 
</td> 
</tr> 
</tbody> 
</table> 
</center> 
</body>
</html>

ERROR HTML.

Petunjuknya : Sesuaikanlah yang saya tandai dengan warna merah, ubahlah kode html lainnya jika perlu, seperti font type, font size dsb.

<html> 
<head> 
<title>bangandi.web.id > error</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta http-equiv="pragma" content="no-cache"> <meta http-equiv="expires" content="-1"> 
<link rel="stylesheet" href="gmi.css" type="text/css" media="screen" /> 
</head> 

<body> 
<center> 
<table class="main" width="959" height="642"> 
<tr> 
<td align="center" valign="middle">
<font style="font-size: 10px; font-family: verdana; font-weight: bold; color: rgb(255, 255, 255);"> Hotspot ERROR: $(error)</font>
<br> 
<br> 
<font style="font-size: 10px; font-family: verdana; font-weight: bold; color: rgb(255, 255, 255);">Login page: </font>
<a href="$(link-login)">$(link-login)</a> 
</td> 
</tr> 

<tr height="170" valign="bottom"><td>&nbsp;</td>
</tr> 
<tr height="75" valign="top">
<td align="center"> 
<div class="footer"><font style="font-size: 10px; font-family: verdana; font-weight: bold; color: rgb(255, 255, 255);">bangandi.web.id©2009 - 2015 All Rights Reserved</font>
<br> 
</td>
</tr> 
</table> 
</center>
</body> 
</html>

STATUS HTML.

Petunjuknya : Sesuaikanlah yang saya tandai dengan warna merah, ubahlah kode html lainnya jika perlu, seperti font type, font size dsb.

<html> 
<head> 
<title>bangandi.web.id > status</title> 
$(if refresh-timeout) 
<meta http-equiv="refresh" content="$(refresh-timeout-secs)"> 
$(endif) 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<meta http-equiv="pragma" content="no-cache"> 
<meta http-equiv="expires" content="-1"> 
<link rel="stylesheet" href="gmi.css" type="text/css" media="screen" />

<script language="JavaScript"> 
<!-- 
$(if advert-pending == 'yes') var popup = ''; 
function focusAdvert() { 
if (window.focus) popup.focus(); 
} 
function openAdvert() { 
popup = open('$(link-advert)', 'hotspot_advert', ''); setTimeout("focusAdvert()", 1000); 
} 
$(endif) function openLogout() { 
if (window.name != 'hotspot_status') return true; 
open('$(link-logout)', 'hotspot_logout', 'toolbar=0,location=0,directories=0,status=0,menubars=0,resizable=1,width=280,height=250'); 
window.close(); 
return false; 
} 
//--> 
</script> 
</head> 

<body bottommargin="0" topmargin="0" leftmargin="0" rightmargin="0" $(if advert-pending == 'yes') onLoad="openAdvert()" $(endif) 
> <center> 
<table class="main-status" width="959"> 
<tr height="30"><td colspan="2"> 
<div class="menu">
<ul> 
<li><a href="status">Home</a></li> 
<li><a href="#">Menu 1</a></li> 
<li><a href="#">Menu 2</a></li> 
<li><a href="#">Menu 3</a></li> 
<li><a href="#">Menu 4</a></li> 
<li><a href="#">Menu 5</a></li> 
</ul>
</div> 
</td> 
</tr> 

<tr>
<td valign="top"> 
<table> 
<tr height="435">
<td valign="top" width="400"> 
<form action="$(link-logout)" name="logout" onSubmit="return openLogout()"> 
<table class="tabula" valign="top"> 

<tr>
<td colspan="2" valign="top"> 
$(if login-by == 'trial') 
<div class="notice">
<font style="font-size: 10px; font-family: verdana; font-weight: bold; color: rgb(255, 255, 255);">Welcome trial user!</font>
</div>
<br> 
$(elif login-by != 'mac') 
<br>

<div class="notice"><font style="font-size: 10px; font-family: verdana; font-weight: bold; color: rgb(255, 255, 255);">Welcome back,</font>
<font style="font-size: 10px; font-family: verdana; font-weight: bold; color: rgb(255, 255, 255);"><b> $(username)!</b></font>
</div>
<br> 
$(endif) 
</td>
</tr> 

<tr>
<td colspan="2" align="center">
<font style="color: #fff; font-weight: bold; font-size: 16px;">Account Information</font>
</td>
</tr> 

<tr>
<td>
<table class="data"> 
<tr>
<td align="right">IP address :</td>
<td>
$(ip)
</td>
</tr> 

<tr>
<td align="right">MAC address :
</td>
<td>
$(mac)
</td>
</tr> 

<tr>
<td align="right">bytes up/down :</td>
<td>
$(bytes-in-nice) / $(bytes-out-nice)
</td>
</tr> 
$(if session-time-left) 
<tr>
<td align="right">Uptime/connected :</td>

<td>$(uptime)</td>
</tr> 

<tr>
<td align="right"><font style="color: #fff; font-weight: bold;">Sisa Waktu Koneksi :</font></td><td><font style="color: #fff; font-weight: bold; font-size: 15px;">$(session-time-left)</font></td></tr> 
$(else) 

<tr>
<td align="right">connected:</td>
<td>$(uptime)</td></tr> 
$(endif) $(if blocked == 'yes') 

<tr><td align="right">status :</td><td>
<div style="color: #fff"> <a href="$(link-advert)" target="hotspot_advert">advertisement</a> required</div>
</td> 
$(elif refresh-timeout) 

<tr><td align="right">status refresh :</td>

<td>$(refresh-timeout)</td> 
$(endif) </table> 
$(if login-by-mac != 'yes') 
<br> 
<!-- user manager link. if user manager resides on other router, replace $(hostname) by its address <button onclick="document.location='http://$(hostname)/user?subs='; return false;">status</button> 
<!-- end of user manager link --> 

<input type="submit" class="button" value="Logout"> 
$(endif) </form> 
</td>
</tr> 
</table>

<div class="inf-status">
<br> 
<br> 
</div> 
</td><
<br /> 
<br /> 
</tr> 

<tr height="75" valign="top">
<td align="center" colspan="2"> 
<div class="footer"><font style="font-size: 10px; font-family: verdana; font-weight: bold; color: rgb(255, 255, 255);">bangandi.web.id©2009 - 2015 All Rights Reserved</font>
<br> 
</td>
</tr> 
</table> 
</center> 
</body> 
</html>

REDIRECT HTML.

Petunjuknya : Sesuaikanlah yang saya tandai dengan warna merah, ubahlah kode html lainnya jika perlu, seperti font type, font size dsb.

<html> 
<head> <title>...</title> 
<meta http-equiv="refresh" content="0; url=$(link-redirect)">

<meta http-equiv="pragma" content="no-cache"> 
<meta http-equiv="expires" content="-1"> 
<link rel="stylesheet" href="gmi.css" type="text/css" media="screen" /> 
</head> 

<body> 
<div class="footer">
<font style="font-size: 10px; font-family: verdana; font-weight: bold; color: rgb(255, 255, 255);">bangandi.web.id©2009 - 2015 All Rights Reserved</font>
<br>
</div> 
</body> 
</html>

RLOGIN PAGE.

Petunjuknya : Sesuaikanlah yang saya tandai dengan warna merah, ubahlah kode html lainnya jika perlu, seperti font type, font size dsb.

<html> 
<!-- 
<?xml version="1.0" encoding="UTF-8"?> 
<WISPAccessGatewayParam xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://$(hostname)/xml/WISPAccessGatewayParam.xsd"> 

<Redirect> 
<AccessProcedure>1.0</AccessProcedure> 
<AccessLocation>$(location-id)</AccessLocation> 
<LocationName>$(location-name)</LocationName> 
<LoginURL>$(link-login-only)?target=xml</LoginURL> 
<MessageType>100</MessageType> 
<ResponseCode>0</ResponseCode> 
</Redirect> 
</WISPAccessGatewayParam> 
--> 

<head> 
<title>...</title> 
<meta http-equiv="refresh" content="0; url=$(link-redirect)"> 
<meta http-equiv="pragma" content="no-cache"> 
<meta http-equiv="expires" content="-1"> 
<link rel="stylesheet" href="gmi.css" type="text/css" media="screen" /> 
</head> 

<body> 
<div class="footer"><font style="font-size: 10px; font-family: verdana; font-weight: bold; color: rgb(255, 255, 255);">bangandi.web.id©2009 - 2015 All Rights Reserved</font>
<br>
</div> 
</body> 
</html>

ALOGIN PAGE.

Petunjuknya : Sesuaikanlah yang saya tandai dengan warna merah, ubahlah kode html lainnya jika perlu, seperti font type, font size dsb.

<html> 
<head> 
<title>bangandi.web.id > redirect</title> 
<meta http-equiv="refresh" content="2; url=$(link-redirect)"> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<meta http-equiv="pragma" content="no-cache"> 
<meta http-equiv="expires" content="-1"> 
<link rel="stylesheet" href="gmi.css" type="text/css" media="screen" /> 
<script language="JavaScript"> 
<!-- function startClock() { 
$(if popup == 'true') open('$(link-status)', 'hotspot_status', 'toolbar=0,location=0,directories=0,status=0,menubars=0,resizable=1,width=500,height=500'); 
$(endif) location.href = '$(link-redirect)'; 
} //--> 
</script> 
</head> 

<body onLoad="startClock()"> 
<center> 
<table class="main" width="959" height="642"> 
<tr> 
<td valign="middle"> <font style="font-size: 10px; font-family: verdana; font-weight: bold; color: rgb(255, 255, 255);">You are logged in</font> 
<br>
<br> 
<font style="font-size: 10px; font-family: verdana; font-weight: bold; color: rgb(255, 255, 255);">If nothing happens, click </font><a href="$(link-redirect)"><font style="font-size: 10px; font-family: verdana; font-weight: bold; color: rgb(255, 255, 255);">here</font></a>
</td> 
</tr> 

<tr height="170" valign="bottom"><td>&nbsp;
</td>
</tr> 
<tr height="75" valign="top"><td align="center"> <div class="footer"><font style="font-size: 10px; font-family: verdana; font-weight: bold; color: rgb(255, 255, 255);">bangandi.web.id©2009 - 2015 All Rights Reserved</font>
<br> 
</td>
</tr> 
</table> 
</center> 
</body> 
</html>

Dan...


GMI CSS.

Petunjuknya : Gantilah gambar latar background, di bagian yang saya tandai dengan warna merah, cari wallpaper yang bagus menurut selera anda, dan kompress ukuran tidak lebih dari <500 kb.="" span="">

Kode CSS nya tidak saya tampilkan semua dibawah ini, namun hanya pada bagian gambar latar saja/ wallpaper, jika mau anda bisa mencoba mengutak-atik kode CSS ini sendiri lalu lihat hasilnya. 

body{ 
background:url('./img/Palembang Ampera.jpg') no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
padding-top:20px; 
background-color:#fff; 
align:center; 
color:#737373; 
font-size:12px; 
font-family:Calibri; 
}

Artikel kali ini, lumayan capek buatnya... hehe :D

Semoga Bermanfaat!