[Code] Bảng đăng nhập hiệu ứng Trượt cực PRO

Demo:






Bước 1 :


xóa hết Mod_login Chèn đoạn code này vào Mod_login :

Code:


<!-- BEGIN switch_login_small -->
<div class="dangnhapvds">
 
<div class="module-tm">
<div class="module-tl">
<div class="module-tr">
<div class="cattitle" align="center"><b>KHUNG ĐĂNG NHẬP</b></div><hr />
<div class="topics">
 
<form class="vdslogin" action="{S_LOGIN_ACTION}" method="post">

<div style="float:left;"><span class="gen">Tài khoản:</span></div>
<div style="float:right;position:relative;padding-right:1px;"><input type="text" name="username" value="{USERNAME}" size="10" maxlength="30" style="width:100px;" /></div>

<div class="clear"></div>

<div style="float:left;"><span class="gen">Mật khẩu:</span></div>
  <div style="float:right;position:relative;padding-right:1px;"><input type="password" name="password" size="10" maxlength="50" style="width:100px;" /></div>

<div class="clear"></div>

<div align="center">
  <span class="gen">Đăng nhập tự động: <input type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></span><br />
  <input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /><br />
<span class="gensmall"><a class="gensmall" href="{U_SEND_PASSWORD}" rel="nofollow">:: {L_SEND_PASSWORD}</a></span>
</div>
 
</form>
 
</div></div></div></div>
 
</div>
<!-- END switch_login_small -->

<!-- BEGIN switch_profile -->
<div class="thongtinthanhvienvds">
 
<div class="module-tm">
<div class="module-tl">
<div class="module-tr">

<div class="cattitle" align="center"><b>THÔNG TIN THÀNH VIÊN</b></div>
  <hr />
 
<div class="topics">
 
<div class="cattitle" align="center"><b>{USERNAME}</b></div>
  <hr />
  <span class="genmed">» {L_MESSAGES} : <strong>{NB_MESSAGES}</strong></span><br />
  <span class="genmed">» {L_PM} : <strong>{NB_PM_UNREAD} / {NB_PM_READ}</strong></span>
  <hr />
        <span class="genmed">• <a href="{U_PROFILE}">Lý lịch của tôi</a></span><br />
        <span class="genmed">• <a href="/profile?mode=editprofile&page_profil=preferences">Tùy chỉnh giao diện</a></span><br />
        <span class="genmed">• <a href="/profile?mode=editprofile&page_profil=signature">Thay đổi chữ ký</a></span><br />
        <span class="genmed">• <a href="/profile?mode=editprofile&page_profil=avatars">Thay đổi Avatar</a></span><br />
        <span class="genmed">• <a href="/profile?mode=editprofile&page_profil=friendsfoes">Danh sách: Bạn / Thù</a></span>
  <hr />
  <span class="genmed">Avatar</span><br />
  <div class="avatarvds" align="center">{USERNAME_AVATAR}</div>
 
</div></div></div></div>
 
</div>
<!-- END switch_profile -->
 

Bước 2 : MODULES >> Portal & Widgets >> Forum widgets management >> cho Mod_login lên

Bước 3 : Chèn đoạn này vào css :

Code:





#header-overlay {
  background: url("http://i48.servimg.com/u/f48/13/58/60/43/header10.png") 0 0 repeat-x;
  height: 109px;
}
#mainbody-overlay {
  background: url("http://i48.servimg.com/u/f48/13/58/60/43/overla14.png") 50% 0 no-repeat;
}

.top-surround {
  background: url("http://i48.servimg.com/u/f48/13/58/60/43/horizm10.png") 50% 0 no-repeat;
}

.ngancachtopic {
  background: url("http://i48.servimg.com/u/f48/13/58/60/43/module10.png") 50% 0 no-repeat;
  padding-top: 10px;
  margin-top: 10px;
}

.news-bar {
  background: url("http://i48.servimg.com/u/f48/13/58/60/43/newsfl10.png") 50% 0 no-repeat;
  overflow: hidden;
  margin: 0 50px;
  position: relative;
  line-height: 48px;
  height: 50px;
  font-size: 14px;
}
.control-prev {
  background-image: url("http://i48.servimg.com/u/f48/13/58/60/43/newsfl11.png");
  background-position: 0 0;
  margin-left: 70px;
  margin-top: 13px;
  cursor: pointer;
  height: 21px;
  width: 20px;
  float: left;
}
.control-next {
  background-image: url("http://i48.servimg.com/u/f48/13/58/60/43/newsfl11.png");
  background-position: 0 -21px;
  margin-right: 70px;
  margin-top: 13px;
  cursor: pointer;
  height: 21px;
  width: 20px;
  float: right;
}
.control-prev:hover {background-position: 0 -42px;}
.control-next:hover {background-position: 0 -63px;}

.maincontent-tm {
  background: url("http://i48.servimg.com/u/f48/13/58/60/43/mainco10.png") 0 0 repeat-x;
  margin: 0 12px;
}
.maincontent-tl {
  background: url("http://i48.servimg.com/u/f48/13/58/60/43/mainco11.png") 0 0 no-repeat;
  margin-left: -12px;
}
.maincontent-tr {
  background: url("http://i48.servimg.com/u/f48/13/58/60/43/mainco12.png") 100% 0 no-repeat;
  margin-right: -12px;
  height: 20px;
}
.maincontent-m{
  background: url("http://i48.servimg.com/u/f48/13/58/60/43/mainco13.png") 0 0;
  margin: 0 12px;
}
.maincontent-l {
  background: url("http://i48.servimg.com/u/f48/13/58/60/43/mainco14.png") 0 0 repeat-y;
  margin-left: -12px;
}
.maincontent-r {
  background: url("http://i48.servimg.com/u/f48/13/58/60/43/mainco15.png") 100% 0 repeat-y;
  margin-right: -12px;
  padding: 0 12px;
}
.maincontent-surround {
  background: url("http://i48.servimg.com/u/f48/13/58/60/43/mainco16.png") 0 0 repeat-x;
  padding: 5px;
}
.maincontent-bm {
  background: url("http://i48.servimg.com/u/f48/13/58/60/43/mainco17.png") 0 0 repeat-x;
  margin: 0 12px;
}
.maincontent-bl {
  background: url("http://i48.servimg.com/u/f48/13/58/60/43/mainco18.png") 0 0 no-repeat;
  margin-left: -12px;
}
.maincontent-br {
  background: url("http://i48.servimg.com/u/f48/13/58/60/43/mainco19.png") 100% 0 no-repeat;
  margin-right: -12px;
  height: 12px;
}

.module-tl {
  background: url("http://i48.servimg.com/u/f48/13/58/60/43/sidemo10.png") 0 0 no-repeat;
  margin-left: -10px;
}
.module-tr {
  background: url("http://i48.servimg.com/u/f48/13/58/60/43/sidemo11.png") 100% 0 no-repeat;
  margin-right: -10px;
  padding: 10px;
}
.module-tm {
  background: url("http://i48.servimg.com/u/f48/13/58/60/43/sidemo12.png") 0 0 repeat-x;
  clear: left;
  margin: 0 10px;
}
.module {
  background: url("http://i48.servimg.com/u/f48/13/58/60/43/sidemo13.png") 0 0;
  padding: 3px;
  overflow: hidden;
}

.dangnhapvds {
z-index: 999;
position: fixed;
width:200px;
height:170px;
left:5px;
bottom:-125px;
transition: all 3s ease; -webkit-transition: all 3s ease; -moz-transition: all 3s ease;
transition-delay: 3s; -webkit-transition-delay: 3s; -moz-transition-delay: 3s;
}
.dangnhapvds:hover {
bottom:0;
transition: all 1s cubic-bezier(1,0.1,0.1,1); -webkit-transition: all 1s cubic-bezier(1,0.1,0.1,1); -moz-transition: all 1s cubic-bezier(1,0.1,0.1,1);
}

.thongtinthanhvienvds {
z-index: 999;
position: fixed;
width:200px;
height:450px;
left: 5px;
bottom:-405px;
transition: all 3s cubic-bezier(0,1,0.1,0.8); -webkit-transition: all 3s cubic-bezier(0,1,0.1,0.8); -moz-transition: all 3s cubic-bezier(0,1,0.1,0.8);
}
.thongtinthanhvienvds:hover {
bottom:0;
transition: all 1s cubic-bezier(1,0.1,0.1,1); -webkit-transition: all 1s cubic-bezier(1,0.1,0.1,1); -moz-transition: all 1s cubic-bezier(1,0.1,0.1,1);
}


Xong !

Nguồn: Cntt-k3