Khung đăng nhập đẹp hiển thị khi chưa đăng nhập

Demo: http://muabantunggiay.com

http://data.sinhvienit.net/2012/T02/...re%2810%29.png


1. Download file về up ngang hàng với rot http://muabantunggiay.com/login.rar
2. Thêm vào additional.css và đổi domain.com bằng tên miền của bạn

Code:

---

.wotquick_login {
      background: url("http://domain.com/login/bgQuick_02.gif") repeat-x scroll 0 0 transparent;
      bottom: 0;
      font-family: Arial,Helvetica,sans-serif;
      font-size: 12px;
      left: 0;
      position: fixed;
      width: 100%;
      z-index: 9999;
  }
  .wotquick_login_bg_quick {
      background: url("http://domain.com/raovat/login/bgQuick.png") no-repeat scroll 0 0 transparent;
      bottom: 0;
      height: 50px;
      margin: 0 auto 0;
      position: relative;
      width: 1000px;
  }
  .wotquick_login_user {
      left: 90px;
      position: absolute;
      top: 19px;
  }
  .wotquick_login_form5 {
      background: none repeat scroll 0 0 transparent;
      border: medium none;
      color: #CCCCCC;
      height: 18px;
      width: 130px;
  }
  .wotquick_login_pass {
      left: 316px;
      position: absolute;
      top: 19px;
  }
  .wotquick_login_choingay {
      left: 457px;
      position: absolute;
      top: 19px;
  }
  .wotquick_login_link_quick {
      left: 750px;
      position: absolute;
      top: 19px;
  }

---

3. Thêm vào Footer và nhớ đổi domain cho phù hợp nha

Code:

---

<vb:if condition="$show['guest']">
  <script src="login/javascripts/jquery.js" type="text/javascript"></script>
  <script type="text/javascript">
          $(document).ready(function() {
 
              $(".signin").click(function(e) {
                  e.preventDefault();
                  $("fieldset#signin_menu").toggle();
                  $(".signin").toggleClass("menu-open");
              });
 
              $("fieldset#signin_menu").mouseup(function() {
                  return false
              });
              $(document).mouseup(function(e) {
                  if($(e.target).parent("a.signin").length==0) {
                      $(".signin").removeClass("menu-open");
                      $("fieldset#signin_menu").hide();
                  }
              });           
 
          });
  </script>
  <script type="text/javascript" src="clientscript/vbulletin_md5.js?v={vb:raw vboptions.simpleversion}"></script>
 
  </br></br>
 
 
 
  <div class="wotquick_login">
 
  <form action="login.php?{vb:raw session.sessionurl}do=login"  method="post" onsubmit="md5hash(vb_login_password,  vb_login_md5password,  vb_login_md5password_utf, {vb:raw  show.nopasswordempty})">
                  <fieldset id="logindetails" class="logindetails">
  <div class="wotquick_login_bg_quick">
 
   
 
 
  <div class="wotquick_login_user">
 
  <input type="text" class="wotquick_login_form5"  name="vb_login_username" id="navbar_username" size="10" accesskey="u"  tabindex="101" value="<vb:if condition="$username">{vb:raw  username}<vb:else />{vb:rawphrase username}</vb:if>"  onfocus="if (this.value == '<vb:if condition="$username">{vb:raw  username}<vb:else />{vb:rawphrase  username}</vb:if>'){this.value=''; this.style.color='black';}"  onblur="if (this.value == '') {this.value='<vb:if  condition="$username">{vb:raw username}<vb:else  />{vb:rawphrase  username}</vb:if>';  this.style.color='#828282';}"/>
                     
  </div>
  <div class="wotquick_login_pass">
 
  <input type="password" class="wotquick_login_form5" tabindex="102"  name="vb_login_password" id="navbar_password" size="10" />
                      <input type="text" class="wotquick_login_form5"  tabindex="102" name="vb_login_password_hint" id="navbar_password_hint"  size="10" value="{vb:rawphrase password}" style="display:none;" />
                     
  </div>
  <div class="wotquick_login_choingay">
  <input type="submit" class="loginbutton" tabindex="104"  value="{vb:rawphrase log_in}" title="{vb:rawphrase  enter_username_to_login_or_register}" accesskey="s" />
  </div>
  </fieldset>
  <input type="hidden" name="s" value="{vb:raw session.sessionhash}" />
                  <input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
                  <input type="hidden" name="do" value="login" />
                  <input type="hidden" name="vb_login_md5password" />
                  <input type="hidden" name="vb_login_md5password_utf" />
              </form>
  <div class="wotquick_login_link_quick">
  <a target="_blank" href="http://muabantunggiay.com/raovat/login.php?do=lostpw">
  <img src="http://muabantunggiay.com/raovat/login/quentk.png">
  </a>
  <a target="_blank" href="http://http://muabantunggiay.com/raovat/register.php">
  <img src="http://muabantunggiay.com/raovat/login/quick_dk.png">
  </a>
  <a target="_blank" href="http://muabantunggiay.com/raovat/huong-dan-dien-dan/">
  <img src="http://muabantunggiay.com/raovat/login/quick_hd.png">
  </a>
  </div>
  </div>
  </vb:if>

---

4. Thanks đê http://sinhvienit.net/@forum/images/...ewYahoo/67.gif