P. 1
Merubah Tampilan Login Hotspot

Merubah Tampilan Login Hotspot

|Views: 72|Likes:
Published by Adios Pardede

More info:

Published by: Adios Pardede on Feb 20, 2013
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

07/09/2013

pdf

text

original

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. yuk ikuti step by step-nya ………  . Pada tutorial kali ini kita akan sedikit mengutak atik tampilan login diatas agar lebih memiliki daya tarik.2 Pada kesempatan ini saya akan sedikit berbagi trik tentang utak atik tampilan login hotspot bawaan mikrotik. 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 ?. Apabila kita menengok settingan login bawaan mikrotik maka terlihat menjemukan dengan tampilan background putih dipadu area login putih juga.

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

font-family: verdana. font-size: 10px. padding: 2px. border: 1px solid #BBBBBB. Code default login page bawaan mikrotik seperti dibawah ini : ========================================= <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. Nah. 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 ++.select { background-color: #FDFBFB.4 7.dtd"> <html> <head> <title>mikrotik hotspot > login </title> <meta http-equiv="Content-Type" content="text/html. color: #808080.} textarea.org/TR/xhtml1/DTD/xhtml1-transitional. .0 Transitional//EN" "http://www. 8. Setelah masuk ke program editor maka sobat akan melihat sederet code-code html yang siap kita ubah.w3. 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: 14px. margin: 1px.input.

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

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

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

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

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

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

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

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

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

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

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. .16 bobot loading awal hotspot kita.

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

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->