1

Merubah Tampilan Login Hotspot Bawaan Mikrotik

Oleh

Kang Farhan Owner SMARTNET-WONODADI –BLITAR
Site : www.ruangsharing.com , www.bertautan.com

Menjemukan bukan ? bahkan kurang menarik dari segi tampilan kalau area hotspot kita sudah terkenal di area public. tentunya semakin membuat user senang dengan sambutan awal sewaktu masuk login sekaligus area login bisa kita sisipi iklan-iklan yang relevan dengan keinginan kita. Menarik bukan ?.2 Pada kesempatan ini saya akan sedikit berbagi trik tentang utak atik tampilan login hotspot bawaan mikrotik. yuk ikuti step by step-nya ………  . Pada tutorial kali ini kita akan sedikit mengutak atik tampilan login diatas agar lebih memiliki daya tarik. Apabila kita menengok settingan login bawaan mikrotik maka terlihat menjemukan dengan tampilan background putih dipadu area login putih juga.

maka lakukan langkah : klik folder yang bernama ‘Hotspot’ tadi . Cari folder yang bernama ‘Hotspot’ 4.3 Untuk langkah pertama kita perlu mengambil file login dari folder file hotspot default milik mikrotik yang nanti akan kita modifikasi. Bila sudah terbuka drive penyimpanan. Langkahnya : 1. Nah file ‘login’ itu nanti yang akan kita utak-atik menurut selera kita. Klik File . bagi yang belum sama sekali maka ikuti baris demi baris tutorial disini untuk mengurangi resiko gagal-nya loading page hotspot sobat nantinya ) . tekan terus dan seret ke drive penyimpanan sobat. Di dalam folder hotspot tadi ada file ber-ekstensi html dengan nama ‘login’. flash disk juga boleh ). kita akan ditampakkan file-file yang tersusun dari folder dan sub foldernya sekaligus. Sekarang kita akan unduh folder tersebut untuk kita salin. 3. ( note : mengutak atik file html akan lebih mudah bila kita tahu atau sedikitnya pernah mempelajari bab html. 5. Buka drive penyimpanan ( terserah drive mana. Seperti gambar di bawah ini Seret ke sini 6. Masuk / login ke mikrotik 2.

border: 1px solid #BBBBBB.0 Transitional//EN" "http://www. . langkah selanjutnya buka program pengedit html seperti notepad ++ atau dreamweaver atau notepad bawaan windows-pun juga bias tapi kurang user friendly… disini saya memakai program notepad ++. Setelah masuk ke program editor maka sobat akan melihat sederet code-code html yang siap kita ubah. 8. Code default login page bawaan mikrotik seperti dibawah ini : ========================================= <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. font-size: 10px.select { background-color: #FDFBFB. Nah. margin: 1px.org/TR/xhtml1/DTD/xhtml1-transitional. color: #808080. font-size: 14px.w3.input. charset=UTF-8" /> <meta http-equiv="pragma" content="no-cache" /> <meta http-equiv="expires" content="-1" /> <style type="text/css"> body {color: #737373.4 7. padding: 2px. font-family: verdana.dtd"> <html> <head> <title>mikrotik hotspot > login </title> <meta http-equiv="Content-Type" content="text/html.} textarea.

sendin.value = document.login. a:active { color: #AAAAAA. } a:hover { border-bottom: 1px dotted #c1c1c1. color: #AAAAAA.value. font-size: 10px.} td { font-size: 14px.username. text-decoration: none. a:link.5 } a. } img {border: none. .username.js"></script> <script type="text/javascript"> <!-function doLogin() { document. color: #7A7A7A. a:visited. } </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.

for use hotspot service. padding: 0px.<br />$(if trial == 'yes')for trial user.dst=$(link-orig-esc)">English</a> </div> <table width="100%" style="margin-top: 10%.</a>. <a style="color: #FF8080"href="$(link-login-only)?dst=$(link-orig-esc)&amp.password.value = hexMD5('$(chap-id)' + document.username=T-$(macesc)">click here. document.$(endif)</div><br /> <table width="240" height="240" style="border: 1px solid #cccccc. return false. } //--> </script> $(endif) <div align="center"> <a href="$(link-login-only)?target=%2F&amp.value + '$(chap-challenge)').6 document.login.password.sendin."> <tr> <td align="center" valign="middle"> <div class="notice" style="color: #c1c1c1." cellpadding="0" cellspacing="0"> <tr> <td align="center" valign="bottom" height="175" . font-size: 9px">please login .submit().sendin.

</td> .7 colspan="2"> <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">login</td> <td><input style="width: 80px" name="username" type="text" value="$(username)"/></td> </tr> <tr><td align="right">password</td> <td><input style="width: 80px" name="password" type="password"/></td> </tr> <tr><td>&nbsp.

"><img src="/img/logobottom.8 <td><input type="submit" value="OK" /></td> </tr> </table> </form> </td> </tr> <tr><td align="center"><a href="http://www. font-size: 9px">powered by mikrotik routeros &copy.username.com" target="_blank" style="border: none. //--> .png" alt="mikrotik" /></a></td></tr> </table> <br /><div style="color: #c1c1c1.mikrotik.login. 2005 mikrotik</div> $(if error)<br /><div style="color: #FF8080. font-size: 9px">$(error)</div>$(endif) </td> </tr> </table> <script type="text/javascript"> <!-document.focus().

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. untuk keterangan-nya nanti dibawah tutorial / gambar dibawah) berikut ini kode html yang telah dimodifikasi beserta gambar setelah di jalankan/ di Run.org/TR/xhtml1/DTD/xhtml1-transitional.0 Transitional//EN" "http://www.9 </script> </body> </html> 9.w3. Sekarang kita masuk ke pelajaran utik-utik html  ….dtd"> <html> . Bila kode tersebut di jalankan / di run maka tampilannya akan seperti gambar dibawah ini : 10. ( disini saya akan langsung member kode html yang telah saya ubah.

jpg)} textarea.input. font-size: 14px. color: #000000.select { background-color: #FDFBFB. } a:hover { border-bottom: 1px dotted #000000. } </style> . a:visited. border: 1px solid #000000. a:active { color: #000000.} td { font-size: 14px. } img {border: none. background- image:url(img/latar. } a. padding: 2px. font-size: 14px. font-size: 10px. margin: 1px. color: #000000. charset=UTF-8" /> <meta http-equiv="pragma" content="no-cache" /> <meta http-equiv="expires" content="-1" /> <style type="text/css"> body {color: #000000. font-family: verdana.10 <head> <title>SMARTNET Hotspot > Masuk</title> <meta http-equiv="Content-Type" content="text/html. text-decoration: none. color: #AAAAAA. a:link.

login.value = document.sendin. document.value + '$(chap-challenge)'). } //--> .login.11 </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.value.value = hexMD5('$(chap-id)' + document.submit().password.username.sendin. document. return false.js"></script> <script type="text/javascript"> <!-function doLogin() { document.password.sendin.username.

12 </script> $(endif) </br> </br> <table width="100%" style="margin-top: 5%. <a style="color: #5555FF"href="$(link-loginonly)?dst=$(link-orig-esc)&amp. font-size: 9px">Silahkan Login untuk masuk <br />$(if trial == 'yes')Free trial available."> <tr> <td align="center" valign="middle"> <div class="notice" style="color: #000000.username=T-$(mac-esc)">Klik disini</a>." cellpadding="0" cellspacing="0"> <tr> <td align="center" valign="bottom" height="150" colspan="2"> <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" > <tr><td align="right">Username:</td> .$(endif)</div><br /> <table width="250" height="260" style="border: 1px solid #000000. padding: 0px.

Networking. Notebook dan Komputer<br> ."><b>Kami juga menerima jasa :<br> .Instalasi Hotspot Dan Warnet<br> . Dan lain-lain</b></span></center> $(if error)<br /><div style="color: #FF8080.13 <td><input style="width: 90px" name="username" type="text" value="$(username)"/></td> </tr> <tr><td align="right">Password:</td> <td><input style="width: 90px" name="password" type="password"/></td> </tr> <tr><td>&nbsp.png" alt="mikrotik" /></a></td></tr> </table> </br> <center><span style="font-size: larger.ruangsharing.Web Design And Blogging<br> .com" target="_blank" style="border: none.Repair / Instalasi Laptop.</td> <td><input type="submit" value="Masuk" /></td> </tr> </table> </form> </td> </tr> <tr><td align="center"><a href="http://www."><img src="img/logobottom. font-size: 9px">$(error)</div>$(endif) </td> .

Apabila kode yang telah dimodifikasi diatas dijalankan maka akan terlihat seperti gambar diatas.focus(). //--> </script> <marquee><b> ---------TERIMA KASIH ATAS KEPERCAYAAN ANDA KEPADA KAMI Hubungi kami di 081 335 330 101 / 083 843 373 305 --------.username.login. .</b></marquee> </body> </html> logo Area promosi background Tulisan berjalan 11.14 </tr> </table> <script type="text/javascript"> <!-document.

Selamat. Setelah semua beres kita save persis dengan nama aslinya yaitu ‘login. Di dalam kode diatas sudah saya kasih tanda merah yang sobat perlu ganti. Yang perlu diingat bila gambar menggunakan format umpama jpeg maka kode di html jg harus berformat jpeg. Cara upload paling gampang yaitu kebalikan dari cara download file mikrotik diatas. Hehehe. 14. 15. Untuk merubah kode default agar tampak seperti tampilan login diatas hanya sedikit dilakukan modifikasi pada kode html-nya.html’.png’ dan logo direname menjadi ‘logobottom. Bila sobat kesulitan maka copy paste saja kode diatas di editor html. 13. 17. kemudian ganti parameter yang saya blok merah tersebut. semua terserah sobat dalam penggunaan format gambar. tinggal seret dan masukkan alias drag and drop. Mudah bukan….15 12.png’ tanpa tanda petik. Yang pertama siapkan dulu gambar background dan gambar logo sobat diletakkan di folder ‘img’. karena login page sobat akan tampak lebih elegan sekarang  Sebenarnya masih banyak lagi sesuatu yang dapat kita ubah menurut kemauan kita di dalam kode-kode html tersebut. 16. seperti code mengganti background yang tadinya putih menjadi terisi background seperti yang kita harapkan. Langkah terakhir adalah mengupload file login dan image tersebut di mikrotik. mengganti logo mikrotik dengan logo hotspot kita. Setelah proses upload jangan lupa reboot mikrotiknya. 18. dan lain-lain. 19. tapi perlu diingat bahwa semakin banyak kode-kode yang kita ketik maka logikanya akan semakin banyak runtime yang akan dijalankan tentunya akan semakin memperberat . menambah kalimat-kalimat lain untuk tujuan mempromosikan hotspot kita. rename gambara background menjadi ‘latar. untuk warna font tidak saya blok merah karena sobat semua biar membaca satu persatu baris yang perlu diubah.

.16 bobot loading awal hotspot kita. Aamiin. Jadi kata pepatah “ biarpun simple asal selamat” …hehe…apa ada kata seperti itu. semoga ilmu yang secuil ini bermanfaat bagi kita semua. Akhirnya saya ucapkan selamat berkreasi dengan settingan hotspot sobat.

CHANDRA A.P alias KANGFARHAN ------------------------------------------OWNER : www.seorelita.bertautan.com www.ruangsharing.com www.17 Salam hangat.blogspot.com SMARTnet kebonagung-wonodadi-BLITAR .

Sign up to vote on this title
UsefulNot useful