[Hot]khung đăg nhập style mới

demo : như forum mình
Code trên được rip và design lại từ khung đăng nhập của cntt-k3.

Chức năng:
- bảng đăng nhập nhanh.
- trượt cùng forum.

Cách làm:
css :

Code:

#topnav{font-size:11px;line-height:23px;padding:0px 0 12px;text-align:right}
#topnav a.signin{-moz-border-radius:4px;-webkit-border-radius:4px;background:#0D3156;border-radius:4px;color:#fff;font-weight:700;padding:4px 6px 6px;text-decoration:none}
#topnav a.signin:hover{background:#15579B}a.signin{margin-left:3px;position:relative}a.signin span{background-image:url(http://4r.ninja9x.net/login/images/toggle_down_light.png);background-position:100% 50%;background-repeat:no-repeat;padding:4px 16px 6px 0}
#topnav a.register{-moz-border-radius:4px;-webkit-border-radius:4px;background:#0D3156;border-radius:4px;color:#fff;font-weight:700;padding:4px 6px 6px;text-decoration:none}
#topnav a.register:hover{background:#15579B}a.register{margin-left:0;position:relative}a.register span{background-image:url(http://4r.ninja9x.net/login/images/register_light.png);background-position:100% 50%;background-repeat:no-repeat;padding:4px 16px 6px 0}
#topnav a.menu-open{background:#0d3156!important;color:#fff!important;outline:none}#small_signup{display:inline;float:none;line-height:23px;margin:25px 0 0;width:170px}a.signin.menu-open span{background-image:url(http://4r.ninja9x.net/login/images/toggle_up_light.png);color:#fff}
#signin_menu{-moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:5px;-moz-border-radius-topleft:5px;-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;-webkit-border-top-left-radius:5px;background:url(http://4r.ninja9x.net/login/images/login_back.png) #0d3156 repeat-x;border:1px transparent;color:#fff;display:none;font-size:11px;margin-right:-1px;margin-top:5px;padding:12px;position:absolute;right:0;text-align:left;top:24.5px;width:210px;z-index:100}
#signin_menu input[type=password],#signin_menu input[type=text]{-moz-border-radius:4px;-webkit-border-radius:4px;background:url(http://4r.ninja9x.net/login/images/field_back.png) repeat-x;border:1px solid #0d3156;display:block;font-size:13px;margin:0 0 5px;padding:5px;width:203px}
#signin_menu p{margin:0}#signin_menu a{color:#fff}#signin_menu label{font-weight:400}
#signin_menu p.remember{padding:10px 0}
#signin_menu p.complete,#signin_menu p.forgot{clear:both;margin:5px 0}
#signin_menu p a{color:#fff!important}
#signin_menu p a:hover{text-decoration:underline}
#signin_submit{-moz-border-radius:4px;-webkit-border-radius:4px;background-color:#0d3156;border:1px solid #fff;color:#fff;font-size:11px;font-weight:700;margin:0 5px 0 0;padding:4px 10px 5px;text-shadow:0 -1px 0 #39d}

.khung{
background:#d7d7d7 url(http://t3.gstatic.com/images?q=tbn:ANd9GcSS12lGOkAieoGDGCIc9WDS4mRBcpzkani1VNuA1-MBM4gpuLvh) repeat-x top;
height:18px;
width:100%;
}

#rep-mail-bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  height: 25px;
  font-size: 11px;
  width: 100%;
  z-index: 999;
}


chèn vào cuối header

Code:


<--Code by Bui Minh Phong -->
<!-- BEGIN switch_user_logged_out -->
<div id="rep-mail-bar"> <div class="khung"   
<div id="topnav" class="topnav"><font color="white">Welcome to MaiKhongQuen.Com      Have an account?</font>
 <a href="login" class="signin" style=""><span>Login</span></a>
<a href="/register" class="register" style=""><span>Register</span></a> </div>
<fieldset id="signin_menu" style="display: none; "><form action="/login?redirect=/" method="post" name="form_login" id="signin"><label for="username">Tên Đăng Nhập</label><input class="field" id="log" type="text" size="10" name="username"><label for="password">Mật Khẩu</label><input class="field" id="pwd" type="password" size="10" name="password"><input id="signin_submit" class="bt_login" type="submit" name="login" value="Đăng nhập"><label><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever">  Nhớ tôi</label><p class="forgot"> <a href="profile?mode=sendpassword">Quên mật khẩu</a> </p><div class="clear"></div></form></div></div>
<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>
<!-- END switch_user_logged_out -->
<!-- Code by Bui Minh Phong -->


nguồn: maikhongquen.com