Ceaster Forum
Selamat Datang di Forum Ceaster
Bahas apa aja di sini sesuai forum !
Dapatkan Banyak Info,Ilmu,Berita di Sini !
AYO BURUAN DAFTAR ADA EVENT BERHADIAH BAGI PENDAFTAR !
Daftarnya mudah Tinggal Masukin data !

Ceaster Forum

Forum Pengetahuan Informasi dan Jual Beli Terlengkap di Indonesia


You are not connected. Please login or register

Ceaster Forum » Computer Stuff » Computer -Networking-OS/Software/Program-Web » Website, Webmaster, Webdeveloper » Login Pop Up Button Header Forumotion PunBB - LGForum Style Login

Login Pop Up Button Header Forumotion PunBB - LGForum Style Login

Topik sebelumnya Topik selanjutnya Go down  Message [Halaman 1 dari 1]

SGTAKASE


ceasterrer
ceasterrer
Mau Punya Login Pop Up Button header Kayak gini di Forum PunBB Forumotion ?


Kalo mau ikutin step step berikut ya gan! 
menggabungkan CSS, HTML, jQuery and Javascript


Yuk Menuju Admin Panel -> Display -> Colors -> CSS Stylesheet
Tambahkan Code Ini !
Code:
#LGoverlay {
  position: fixed;
  top: 0px;
  left: 0px;
  min-height: 101%;
  width: 100%;
  background-color: #000;
  opacity: 0.7;
  filter:Alpha(opacity=70);
  z-index: 999;
}
#LGlogin {
  background: #EEE;
  color: #777;
  left: 25%;
  position: fixed;
  top: 30%;
  width: 50%;
  z-index: 999;
  box-shadow: 10px 10px 40px black;
  -moz-box-shadow: 10px 10px 40px black;
  -webkit-box-shadow: 10px 10px 40px black;
  font-family: sans-serif;
  text-shadow: 0px 1px 1px white;
  color: #666;
}
#LGlogin h1 {
  background: #CCC;
  margin-top: 0;
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid #888;
}
#LGlogin form {
   margin: 10px auto;
   width: 90%;
}
#LGlogin img.closebutton {
  float: right;
  margin: 10px;
  background: url('http://i45.servimg.com/u/f45/16/95/07/69/bt_clo10.png') no-repeat 0 -20px;
  width: 20px;
  height: 20px;
  cursor: pointer;
}
#LGlogin img.closebutton:hover {background: url('http://i45.servimg.com/u/f45/16/95/07/69/bt_clo10.png') 0 0px;}
#LGlogin ul {
  list-style-type: none;
}
#LGlogin ul li {
  float: left;
  width: 50%;
  font-size: 1.2em;
}
#LGlogin li input {
  padding: 4px;
  background: #fff;
  border: 1px solid #CCC;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}
#LGlogin .login-submit {
  display: block;
  margin: 15px auto;
  background: #CCC;
  border: 1px solid;
  color: #666;
  padding: 5px 10px;
  font-weight: bold;
  text-shadow: 0px 1px 1px #fff;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  cursor: pointer;
}
#LGlogin .login-submit:hover {
  color: #AAA;   
}
#LGloginbtn {
  background: #CCC;
  border: 1px solid;
  color: #555;
  font-weight: bold;
  font-size: 1.4em;
  padding: 10px 30px;
  position: fixed;
  right: 10px;
  text-shadow: 0 1px 1px white;
  top: 5px;
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  box-shadow: 4px 8px 25px #444;
  -webkit-box-shadow: 4px 8px 25px #444;
  -moz-box-shadow: 4px 8px 25px #444;
  cursor: pointer;
}
#LGloginbtn:hover {
  color: #888; 
}



Oke setelah itu save lalu ganti menuju Announcement atau Widget . atau tambahkan di overall header atau overall footer template. pilih salah satu saya sarankan ke announcement aja.
Ini HTMLnya
Code:
<div id="LGoverlay" onclick="LGlogin()" style="display:none"></div>
<div id="LGloginbtn" onclick="LGlogin();">Log In</div>
<div id="LGlogin" style="display:none">
  <img src="http://illiweb.com/fa/empty.gif" class="closebutton" width="20px" height="20px" onclick="LGlogin();"/>
  <h1>Log In</h1>
  <form action="/login.forum" method="post">
    <ul>
      <li><label for="username">Username</label></li>
      <li><input type="text" name="username" size="25" /></li>
      <li><label for="password">Password</label></li>
      <li><input type="password" name="password" size="25" /></li>
      <li>Remember me?</li>
      <li><input type="checkbox" name="autologin" checked="checked" /></li>
    </ul>
    <div style="clear:left"></div>
    <input type="submit" class="login-submit" name="login" value="Log in" />
    <input name="redirect" type="hidden" value="">
  </form>
</div>



Save , dan lanjut sekarang ke JavaScriptnya klik Javascript management dan buat baru Javascript and pilih in all pages(semua halaman).
lalu copy kode dibawah ini :
Code:
function LGlogin() {
   var x = document.getElementById('LGlogin');  
   if (x.style.display == 'none') {
      jQuery(x).add('#LGoverlay').fadeIn('slow');
      var r = x.getElementsByTagName('form')[0].redirect;
      r.value = window.location.href;
   }
   else {
      jQuery(x).add('#LGoverlay').fadeOut('slow');
   }
}
jQuery(function(){ if(document.getElementById('logout')) document.getElementById('LGloginbtn').style.display = 'none'; });


Oke done , akhirnya selesai juga deh gan semoga bermanfaat postingan ane tentang Login Pop up Forumotion Header - LGStyle Forum Login :fufu

Source:
Source : http://www.avacweb.com/t59-5-lgforum-style-login

Lihat profil user

Topik sebelumnya Topik selanjutnya Kembali Ke Atas  Message [Halaman 1 dari 1]

Permissions in this forum:
Anda tidak dapat menjawab topik