<[Code] Bảng đăng nhập , đăng ký đóng mở
Family fun

Family fun

chúng ta là một gia đình, Hãy chia sẽ những miền vui, buồn phiền...của bạn
 
Trang ChínhTrang Chính  CalendarCalendar  Trợ giúpTrợ giúp  Đăng kýĐăng ký  Đăng NhậpĐăng Nhập  
::Family Fun ::
  • Family Fun

[Code] Bảng đăng nhập , đăng ký đóng mởXem chủ đề cũ hơn Xem chủ đề mới hơn Go down
Tác giả

avatar
Admin
Hiện:
RuHa's rank
RuHa's rank
Chủng tộc Chủng tộc : Cầu vòng
Giới tính Giới tính : Nữ
posts posts : 630
Join date Join date : 31/03/2012
Age Age : 17
Đến từ Đến từ : nơi thuộc về tôi
Bài gửiTiêu đề: [Code] Bảng đăng nhập , đăng ký đóng mở Mon Jul 23, 2012 11:35 pm
#1
Demo:



Cách làm:

Vào Footer Begin thêm đoạn code sau vào cuối

Code:

[font=Courier New]<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>[/font]

Tiếp theo vào Header chèn bảng đăng nhập này vào chỗ nào mình muốn


Code:
[font=Courier New]<!-- BEGIN switch_user_logged_out -->

    <div id="container12">
  <div id="topnav" class="topnav"> Have an account? <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>
 <script type="text/javascript">//<![CDATA[
$(function(){$('#signin').attr('action','/login?redirect='+this.location.pathname);});//]]></script>

  </fieldset>
</div> 
 
    <!-- END switch_user_logged_out -->[/font]

Cuối cùng cho cái này vào Css :

Code:
[font=Courier New]/* SinhVienVT.Net Custom Login */
#container12 {
    float:right;
    margin:0 auto;
      margin-top: -6px;
    position: relative;
}




a img {
    border-width:0;
}
#topnav {
    padding:10px 0px 12px;
    font-size:11px;
    line-height:23px;
    text-align:right;
}
#topnav a.signin {
background: #0D3156;
padding: 4px 6px 6px;
text-decoration: none;
font-weight: bold;
color: white;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#topnav a.signin:hover {
background: #15579B;
}
#topnav a.signin, #topnav a.signin:hover {
}
a.signin {
    position:relative;
    margin-left:3px;
}

a.signin span {
background-image: url("http://4r.ninja9x.net/login/images/toggle_down_light.png");
background-repeat: no-repeat;
background-position: 100% 50%;
padding: 4px 16px 6px 0;
}
#topnav a.register {
background: #0D3156;
padding: 4px 6px 6px;
text-decoration: none;
font-weight: bold;
color: white;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#topnav a.register:hover {
background: #15579B;
}
#topnav a.register, #topnav a.register:hover {
}
a.register {
    position:relative;
    margin-left:0px;
}

a.register span {
    background-image:url("http://4r.ninja9x.net/login/images/register_light.png");
    background-repeat:no-repeat;
    background-position:100% 50%;
    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-topleft:5px;
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    -webkit-border-top-left-radius:5px;
    -webkit-border-bottom-left-radius:5px;
    -webkit-border-bottom-right-radius:5px;
    display:none;
  /* background-color:#0d3156; */
    background:url(http://4r.ninja9x.net/login/images/login_back.png) #0d3156 repeat-x;
    position:absolute;
    width:210px;
    z-index:100;
    border:1px transparent;
    text-align:left;
    padding:12px;
    top: 24.5px;
    right: 0px;
    margin-top:5px;
    margin-right: 0px;
    *margin-right: -1px;
    color:#fff;
    font-size:11px;
}

#signin_menu input[type=text], #signin_menu input[type=password] {
    display:block;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border:1px solid #0d3156;
    background:url(http://4r.ninja9x.net/login/images/field_back.png) repeat-x;
    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:normal;
}
#signin_menu p.remember {
    padding:10px 0;
}
#signin_menu p.forgot, #signin_menu p.complete {
    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;
    text-shadow:0 -1px 0 #39d;
    padding:4px 10px 5px;
    font-size:11px;
    margin:0 5px 0 0;
    font-weight:bold;
}
#signin_submit::-moz-focus-inner {
padding:0;
border:0;
}
#signin_submit:hover, #signin_submit:focus {
    background-position:0 -5px;
    cursor:pointer;
}[/font]

Hoàn thành òi ó

Nguồn: http://sweetdream.foruml.biz/



Chữ ký của Admin

_________________






Spoiler:
 

Tài sản của Admin

Tài sản
Tài sản:
Huy hiệu-Huy chương:


avatar
Sherry Sakura
Hiện:
Mod
Mod
Chủng tộc Chủng tộc : Mặt trăng
Giới tính Giới tính : Nữ
posts posts : 36
Join date Join date : 30/05/2012
Age Age : 17
Đến từ Đến từ : Clow
Bài gửiTiêu đề: Re: [Code] Bảng đăng nhập , đăng ký đóng mở Fri Oct 19, 2012 9:43 pm
#2
tks Ru Ha nhé^^~



Chữ ký của Sherry Sakura

_________________
Mn vô đây nha: http://sakurafanland.lovelyforum.net

Tài sản của Sherry Sakura

Tài sản
Tài sản:
Huy hiệu-Huy chương:

[Code] Bảng đăng nhập , đăng ký đóng mởXem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang
Trang 1 trong tổng số 1 trang

Permissions in this forum:Bạn không có quyền trả lời bài viết
Family fun :: 

Phòng tài năng/ thiết kế

 :: 

Share

 :: 

Code

-