[Share] Bảng đăng nhập trượt phải forum

demo:
[You must be registered and logged in to see this link.]

Chèn Vô Cuối Header

Code:

<!-- BEGIN switch_user_logged_out -->
    <div><table width="100%" border="0" cellspacing="0" cellpadding="0"><tbody><tr><td align="left"><div class="guestwarn">

    <form action="/login?redirect=/forum" method="post" name="form_login" class="loginform"><table class="c3z1" border="0" cellpadding="0" cellspacing="3"><tbody><tr><td onmouseover="showtip('<b>Nhập Tên và Mật khẩu để đăng nhập vào diễn đàn.</b>');" onmouseout="hidetip();"><input id="username" class="post" size="22" name="username" value="Tên đăng nhập" onblur="if(this.value=='') this.value='Tên đăng nhập';" onfocus="if(this.value=='Tên đăng nhập') this.value='';" type="text"></td><td nowrap="nowrap"><label><img src="http://www.c3zone.net/users/2611/10/63/87/album/rem10.png"><input class="radio" name="autologin" checked="checked" type="checkbox"></label></td></tr><tr><td onmouseover="showtip('<b>Nhập Tên và Mật khẩu để đăng nhập vào diễn đàn.</b>');" onmouseout="hidetip();"><input id="password" class="post" size="10" name="password" value="Password" onblur="if(this.value=='') this.value='Password';" onfocus="if(this.value=='Password') this.value='';" type="password"></td><td nowrap="nowrap"><input class="mainoption" name="login" value="Go!" type="submit"></td></tr></tbody></table></form>
    <a href="#tip" class="close" onclick="closeBox('message-1'); return false;" onmouseover="showtip('Thu hẹp khung đăng nhập lại.')" onmouseout="hidetip()"></a>
    </div><div class="amature" style="display:none;"><a href="#tip" class="dady" onmouseover="showtip('Mở rộng khung đăng nhập ra!')" onmouseout="hidetip()"><span class=" open"></span>
    </a>

    </div></td></tr></tbody></table></div>
      <!-- END switch_user_logged_out -->


chèn thêm vô CSS

Code:

 .guestwarn, .amature {
      background:#000;
      color:#fff;
      max-width:280px;
      min-height:18px;
      padding:0 5px 3px;
      position:fixed;
      right: 2%;
      top: 50%;
      padding: 10px 15px;
      position: fixed;
      z-index: 10;
      font-size:12px;
      -moz-border-radius: 8px;
      -webkit-border-radius: 8px;
      filter:alpha(opacity=88);
      -moz-opacity:.88;
      opacity:.88;
      -moz-box-shadow:5px 5px 5px #191919;
      -webkit-box-shadow:5px 5px 5px #191919;
      box-shadow:5px 5px 5px #191919;
   
    }
    .close {
      float: right;
      background: transparent url(http://i1202.photobucket.com/albums/bb362/tnpu_ilusm/fancy_nav_right.png);
      width: 30px;
      height: 30px;
      position:fixed;
      right: 2%;
      top: 50%;
      position: fixed;
      z-index: 10;
      background-repeat:no-repeat;
    }
    .open {
      float: right;
      background: transparent url(http://i1202.photobucket.com/albums/bb362/tnpu_ilusm/fancy_nav_left.png);
      width: 30px;
      height: 30px;
      position:fixed;
      right: 2%;
      top: 50%;
      position: fixed;
      z-index: 10;
      background-repeat:no-repeat;
    }
    #password, #subject, #username {
    padding : 1px 1px 1px 16px;
    width : 100px;
    }
    #password {
    background : #fff url(http://vnteen.co.cc/users/1113/13/44/26/avatars/gallery/pass1010.png)  no-repeat scroll left center;
    }
    #username {
    background : #fff url(http://c3zone.net/users/2611/10/63/87/album/id10.png)  no-repeat scroll left center;
    }


Tạo một HTML với code

Code:


    function hiendn(){
    jQuery(".guestwarn").fadeOut("slow",function() {
        jQuery(".amature").fadeIn("slow");
   
    })
    };
    function andn(){
    jQuery(".amature").fadeOut("slow",function() {
        jQuery(".guestwarn").fadeIn("slow");
   
      });
    };
   
    jQuery(document).ready(function(){
    jQuery(".close").click(function(){
    hiendn();
    });
    jQuery(".dady").click(function(){
    andn();
   
    });
    });

Dùng thẻ

Code:

<script src="link trang HTML vừa tạo" type="text/javascript"></script>

Chèn vô trên trong header
nguồn : 4all