Template Login Hotspot Mikrotik Slideshow dan Responsive

Template Login Hotspot Mikrotik. Satu lagi iseng-iseng buat template untuk login hotspot mikrotik. Template yang kali ini saya buat berbentuk slide pada background dan judul tulisan. Sehingga background dan judul tulisan akan secara otomatis melakukan pergantian. Template ini adalah gabungan dari 2 template yang saya dapat dari om google.

Template hasil buatan kali ini saya design dengan menggabungkan template CSS3FullscreenSlideshow sebagai background body dan untuk login formnya saya menggunakan 23-dark-login-form. Kedua template tersebut saya gabungkan dan template login hotspot mikrotik sehingga hasilnya seperti contoh dibawah ini.

Fitur pada template ini adalah mempunyai effect slide show dan responsive.

Diatas adalah adalah beberapa slide yang terdapat pada template login hostpot mikrotik.

Untuk menerapkan template ini dapat menggunakan cara mengganti template login hotspot dan untuk file template ini dapat di download DISINI.

Nb : Silahkan Tinggalkan Email di Komentar BLOG Untuk DIKIRIMKAN PASSWORDNYA (JANGAN KOMENTAR FACEBOOK) atau bisa add saya di Google + atau di Facebook

Dowload Template Simple Login Hotspot Mikrotik

Template simple login hotspot Mikrotik. Ya lagi ga ada kerjaan dan sambil menunggu rasa ngantuk datang iseng-iseng ane buat template baru untuk login hotspot mikrotik. Template yang ane buat ini simple aja, ga perlu neko-neko heheh. Penggunaan gambarnya juga ga terlalu banyak hanya pada backgroundnya aja ya jadi lumayan ringanlah. walaupun tampilannya ga sebagus template-template yang udah banyak di internet. maklum lah ane ini masih newbie dalam mendesain template.

Pada template ini, ane hanya coba mempercantik tampilannya hanya dengan menggunakan css tanpa ada bantuan dari sotosop dan mba coreldraw. Sebenarnya tadi mau dipasangkan logo dengan effect animasi css3 tapi ya berhubung pantat ane sudah capek duduk, sampai disini saja deh desain templatenya :D. Pada tampilan judulnya ane cuman ngasih effect blur sama effect shadow biar kelihatan agak menyala gitu heheh. Selain itu background login, tarif hotspot dan info warnet ane kasih transparan dan ditambah dengan garis tepi warna putih.

Bagi yang minat template baru login hostpot mikrotik yang ada fitur slideshownya dan responsive klik link dibawah ini

Template Login Hotspot Slideshow dan Responsive Klik Disini

Jika ada yang berminat menggunakan template yang simple ini silahkan klik link download yang ada di akhir postingan ini dan gunakan cara ini untuk mengganti tampilan login hotspot ente. Ubah nama hotspot sesuai dengan nama hotspot sobat, sekalian dengan ubah tarifnya mas bro.

Selamat mencoba.

Download templatenya DISINI

NB. Silahkan Tinggalkan Email di Komentar Blogger Untuk di Kirimkan Passwordnya (Bukan Komentar Facebook) atau bisa add saya di Google + atau di Facebook

Redirect Halaman Login Hotspot Mikrotik ke Alamat web atau blog

Redirect halaman login hotspot mikrotik.  Pada saat login hotspot mikrotik halaman yang dituju adalah halaman yang saat itu di jelajahi di browser. Namun disini kita dapat merubah redirect halaman login hotspot menuju alamat website tertentu. Seperti contoh ketika user memasukkan username dan password mikrotik kemudian klik login setelah user login maka akan dibawah ke halaman website tertentu.

Cara merubah redirect halaman login pada hotspot mikrotik adalah dengan cara merubah script html yang ada pada file alogin.html di folder hotspot mikortik. Untuk mengambil file alogin.html kita dapat menggunakan cara modifikasi tampilan login hotspot mikrotik. Sebelum merubah script file alogin.html backuplah terlebih dahulu file tersebut, sehingga akan mudah ketika mengembalikannya ke file aslinya ketika terjadi error. Namun menurut pengalaman saya hampir tidak pernah terjadi error ketika mengubah script pada alogin.html

info :
- Template Simple Login Hotspot Mikrotik Klik Disini
- Template Login Hotspot Slideshow dan Responsive Klik Disini

Ikuti langkah-langkah berikut untuk merubah redirect login hotspot mikrotik sebagai contoh saya membuat redirect ke alamat blog saya.

Buka file alogin.html menggunakan notepad ataupun aplikasi lain seperti dreamweaver, kemudian cari code <meta http-equiv="refresh" content="2; url=$(link-redirect)"> dan rubah tulisan yang berwarna merah dengan alamat url sebuah web atau blog. Contoh : <meta http-equiv="refresh" content="2; url=http://freezon88.blogspot.com">

Selanjutnya cari code berikut dibawah :

<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=290,height=200');

                $(endif)

                location.href = '$(link-redirect)';

    }

//-->

</script>

Dan rubah tulisan berwarna merah menjadi alamat url web atau blog yang akan dituju ketika user login hotspot mikrotik.  Seperti contoh dibawah ini :

<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=290,height=200');

                $(endif)

                location.href = 'http://freezon88.blogspot.com';

    }

//-->

</script>

Jika sudah merubah kedua code diatas, cobalah log out dari hotspot dan lakukan login kembali. Setelah melakukan login browser kita langsung menuju pada halaman web atau blog freezon88.blogspot.com

Selamat mencoba

Cara Mengganti Background Hotspot Mikrotik

Setelah kita merubah tampilan login hotspot mikrotik, sekarang kita akan merubah background hotspot mikrotik. Pada artikel sebelumnya kita sudah membahas bagaimana cara cepat modifikasi tampilan login hotspot mikrotik.Namun pada tutorial sebelumnya kita belum melakukan perubahan pada background login hotspot mikrotik

sebelumnya tampilan login hotspot yang ada pada artikel belum mempunyai background. nah kali ini kita akan menambahkan background berupa gambar dan patern. untuk gambar dan patern dapat di download DISINI. copy gambar dan pattern tersebut ke dalam folder image hotspot mikrotik anda

Info : Download Template Login Hotspot Mikrotik Slideshow dan Responsive

Pertama-tama buka login-box.css dengan menggunakan aplikasi editor, kalau ga punya bisa menggunakan notepad ataupun wordpad, aplikasi bawaan windows. Kemudian tambahkan code berikut dibagian paling atas dan save.

body {
    background-image: url(images/pattern.png), url(images/2.jpg);
    background-attachment: fixed;
    background-color: rgba(0, 0, 0, 0);
    background-position: center center;
    background-repeat: repeat, no-repeat;
    background-size: auto auto, cover;
}

info : Download Template Simple Login Hotspot Mikrotik

keterangan dari code css diatas untuk menambahkan background hotspot mikrotik adalah :
background image berfungsi untuk mengambil gambar pattern dan gambar background, properti fixed berguna agar gambar tidak mengikuti scrool mouse, position center center berfungsi agar gambar background berada pada tengah browser, background repeat berfungsi agar pattern.png melakukan perulangan sedangkan no-repeat berfungsi agar gambar 2.jpg tidak melakukan perulangan gambar. Background size cover berfungsi agar gambar background memenuhi seluruh halaman browser.

cukup dengan menambahkan code diatas, tampilan login hotspot kita sudah tampil menarik dengan berupa gambar :)

untuk tampilan login hotspot mikrotik yang lengkap anda dapat mendownloadnya DISINI

Cara cepat modifikasi tampilan login hotspot mikrotik part 1

Tampilan login hotspot standar mikrotik sangatlah sederhana, nah untuk memperindah atau memodifikasi tampilan tersebut kita harus sedikit menguasai tentang penggunaan bahasa css. Namun kali ini saya akan share cara cepat modifikasi tampilan login hotspot mikrotik. Sebelum itu ada baiknya dulu sobat bloger membaca cara mengganti tampilan hotspot mikrotik untuk mempermudah dalam memodifikasi tampilan login hostpot nantinya.

Untuk memodifikasi tampilan hotspot kita tidak perlu melakukan coding dari awal , tapi cukup modifikasi tampilan login yang sudah ada. seperti contoh Template Login Hotspot Mikrotik Responsive dan Slideshow yang saya design. sebagai contoh disini saya menggunakan Blue Login Box yang bisa didownload disini. Ekstrak file arsip Blue login box kemudian buka file index.html menggunakan aplikasi dreamweaver ataupun aplikasi lainnya.

pertama ganti title-nya menjadi Login Hotspot Mikrotik seperti gambar dibawah

selanjutnya copykan code berikut tepat dibawah tag <body>

$(if chap-id)<br /> <form name="sendin" action="$(link-login-only)" method="post"><br />  <input type="hidden" name="username" /><br />  <input type="hidden" name="password" /><br />  <input type="hidden" name="dst" value="$(link-orig)" /><br />  <input type="hidden" name="popup" value="true" /><br /> </form><br /><br /> <script type="text/javascript" src="/md5.js"></script><br /> <script type="text/javascript"><br /> <!--<br />     function doLogin() {<br />  document.sendin.username.value = document.login.username.value;<br />  document.sendin.password.value = hexMD5('$(chap-id)' + document.login.password.value + '$(chap-challenge)');<br />  document.sendin.submit();<br />  return false;<br />     }<br /> //--><br /> </script><br />$(endif)<br />

kemudian ubah kode dibawah yang saya tandai dengan kotak warna merah

untuk input username ubah name="q" menjadi name="username", masukkan value="$(username)" begitu juga untuk input password name="password",  dan hapus code yang menampilkan tombol button dan yang menampilkan checkbox remember me. kita akan membuat sendiri tombol button yang sesuai dengan form login.

tambahkan code berikut untuk membuat button login tepat dibawah code input password
<div id="login-box-submit"><input type="submit" value="" /></div>

nah yang terakhir copy code dibawah ini dan paste tepat di atas tag </body>,,ingat diatas tag </body>
<script type="text/javascript"><br /><!--<br />  document.login.username.focus();<br />//--><br /></script>
 jika sudah benar, maka hasilnya akan seperti gambar dibawah ini

sekarang tambahkan code css untuk merubah tombol button diatas, buka login-box.css dan tambahkan code berikut

 #login-box-submit > input {<br />    background: url("images/login-btn.png") repeat scroll 0 0 transparent;<br />    height: 42px;<br />    margin-left: 90px;<br />    width: 103px;<br />}

selanjutnya save semua file yang telah dimodifikasi tersebut, ubah nama file index.html menjadi login.html, kemudian copy folder images, file login.html dan login-box.css ke folder hotspot mikrotik dengan mengikuti tutorialnya DISNI

selamat mencoba :)

Cara Mengganti Tampilan Hotspot Mikrotik

Kali ini saya akan share tentang bagaimana cara mengganti atau memodifikasi tampilan hotspot mikrotik. Sebelumnya saya biasanya menggunakan Filezilla untuk mengganti tampilan hotspot mikrotik, namun saya merasa lebih mudah dan cepat dengan menggunkan windows explore.

Untuk mengganti tampilan hotspot mikrotik, terlebih dahulu koneksikan komputer anda dengan mikrotik, bisa dengan menggunakan jaringan LAN ataupun dengan menggunakan Hotspot mikrotik. Kemudian buka windows explorer, dan ketikan "ftp://IP_Mikrotik" sebagai contoh ftp://192.168.2.1 kemudian enter, Akan muncul jendela baru yang akan meminta username dan password mikrotik. Isi dengan user dan password mikrotik anda. Setelah login dengan user mikrotik, maka akan muncul folder hotspot. nah dalam folder inilah tersimpan file-file hotspot mikrotik. Untuk merubahnya copy file-file tersebut ke folder dalam komputer anda dan modifikasi dengan menggunakan dreamweaver ataupun dengan menggunakan aplikasi edit html yang lain.

Sampai disini dulu cara mengganti tampilan hotspot mikrotik, untuk merubahnya sesuai dengan keinginan kita hanya perlu menambahkan beberapa code html dan css saja, dan akan saya buatkan tutorial selanjutnya :). kalau berminat template hotspot mikrotik ini ada template yang saya desain sendiri template freezon

Baca juga :
-Cara cepat modifikasi tampilan hotspot mikrotik
- Cara mengganti background Hotspot mikrotik

semoga bermanfaat :)

Penyebab Hotspot Mikrotik Sering Disconnect

Para pengguna hotspot mikrotik mungkin pernah mengalami disconnect user hotspot, sehingga perlu login kembali untuk akses internet. Hal inilah yang saya alami ketika maintenance hotspot mikrotik teman. User hotspot akan disconnect kurang dari 5 menit, dan sangat menggangu ketika sedang melakukan browsing.
Hal yang pertama saya cek adalah idle time out pada hotspot. kemudian saya merubah idle time out selama 10 menit lebih besar dari sebelumnya yaitu 5 menit. setelah saya merubah settingan idle time out, saya mencoba restart mikrotik dan login hotspot mikrotik, alhasil belum cukup 5 menit user kembali disconnect heheh.

Karena penasaran, saya mencoba mencari dan  bertanya tentang penyebabnya pada forum-forum mikrotik dan akhirnya ketemu juga penyebab user disconnet. Bukan dari settingan mikrotiknya melainkan dari hardware hotspot mikrotik itu sendiri. Penyebabnya adalah kabel penghubung ke antena sectoral, setelah dilakukan pergantian kabel Alhamdulillah masalah disconnect user hotspot tidak lagi terjadi. Sehingga user pengguna hotspot tidak lagi terganggu ketika sedang browsing.