Popup đăng nhập và đăng ký ( cũng là file header và index)
<!-- PNG FIX for IE6 -->
<!-- <b><font color=red>[Chỉ có thành viên mới xem link được. <a href="register.php"> Nhấp đây để đăng ký thành viên......</a>]</font></b> -->
<!--[if lte IE 6]>
<script type="text/javascript" src="js/pngfix/supersleight-min.js"></script>
<![endif]-->
<!-- jQuery - the core -->
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<!-- Sliding effect -->
<script src="js/slide.js" type="text/javascript"></script>
<!-- Header Images Sliding effect -->
<script src="js/s3slider.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#s3slider').s3slider({
timeOut: 9000
});
});
</script>
</head> sau đây là chèn dưới phần head
<body>
<!-- Login -->
<div id="toppanel">
<div id="panel">
<div class="content clearfix">
<!-- Welcome Block Starts -->
<div class="left">
<h1>Welcome to Smartages</h1>
<h2>Sliding login panel Demo with jQuery</h2>
<p class="grey">You can put anything you want in this sliding panel: videos, audio, images, forms... The only limit is your imagination!</p>
</div>
<!-- Welcome Block Ends -->
<!-- Members Login Starts -->
<div class="left">
<form class="clearfix" action="#" method="post">
<h1 class="padlock">Member Login</h1>
<label class="grey" for="log">Username:</label>
<input class="field" type="text" name="log" id="log" value="" size="23" />
<label class="grey" for="pwd">Password:</label>
<input class="field" type="password" name="pwd" id="pwd" size="23" />
<label><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label>
<div class="clear"></div>
<input type="submit" name="submit" value="Login" class="bt_login" />
<a class="lost-pwd" href="#">Lost your password?</a>
</form>
</div>
<!-- Members Login Ends -->
<!-- Reister Block Starts -->
<div class="left right">
<form action="#" method="post">
<h1>Not a member yet? Sign Up!</h1>
<label class="grey" for="signup">Username:</label>
<input class="field" type="text" name="signup" id="signup" value="" size="23" />
<label class="grey" for="email">Email:</label>
<input class="field" type="text" name="email" id="email" size="23" />
<label>A password will be e-mailed to you.</label>
<input type="submit" name="submit" value="Register" class="bt_register" />
</form>
</div>
<!-- Reister Block Ends -->
</div>
</div>
<!-- /login -->
<!-- The tab on top -->
<div class="tab">
<ul class="login">
<li class="left"> </li>
<li>Hello Guest!</li>
<li class="sep">|</li>
<li id="toggle">
<a id="open" class="open" href="#">Log In | Register</a>
<a id="close" style="display: none;" class="close" href="#">Close Panel</a>
</li>
<li class="right"> </li>
</ul>
</div>
<!-- / top -->
</div>
<!--panel -->
đoạn dưới là chèn vào style.css v...
/* Panel Tab/button */
.tab {
background: url(../images/tab_b.png) repeat-x 0 0;
height: 42px;
position: relative;
top: 0;
z-index: 999;
}
.tab ul.login {
display: block;
position: relative;
float: right;
clear: right;
height: 42px;
width: auto;
font-weight: bold;
line-height: 42px;
margin: 0;
right: 50px;
color: white;
font-size: 80%;
text-align: center;
}
.tab ul.login li.left {
background: url(../images/tab_l.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li.right {
background: url(../images/tab_r.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li {
text-align: left;
padding: 0 6px;
display: block;
float: left;
height: 42px;
background: url(../images/tab_m.png) repeat-x 0 0;
}
.tab ul.login li a {
color: #bfbfbf;
}
.tab ul.login li a:hover {
color: white;
}
.tab .sep {color:#414141}
.tab a.open, .tab a.close {
height: 20px;
line-height: 20px !important;
padding-left: 30px !important;
cursor: pointer;
display: block;
width: 100px;
position: relative;
top: 11px;
}
.tab a.open {background: url(../images/bt_open.png) no-repeat left 0;}
.tab a.close {background: url(../images/bt_close.png) no-repeat left 0;}
.tab a:hover.open {background: url(../images/bt_open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(../images/bt_close.png) no-repeat left -19px;}
/* sliding panel */
#toppanel {
position: absolute;
top: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#panel {
width: 100%;
height: 270px;
color: #999999;
background: #272727;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}
#panel h1 {
font-size: 1.6em;
padding: 5px 0 10px;
margin: 0;
color: white;
}
#panel h2{
font-size: 1.2em;
padding: 10px 0 5px;
margin: 0;
color: white;
}
#panel p {
margin: 5px 0;
padding: 0;
}
#panel a {
text-decoration: none;
color: #bfbfbf;
}
#panel a:hover {
color:#fff;
}
#panel a-lost-pwd {
display: block;
float: left;
}
#panel .content {
width: 960px;
margin: 0 auto;
padding-top: 15px;
text-align: left;
font-size: 0.85em;
}
#panel .content .left {
width: 280px;
float: left;
padding: 0 15px;
border-left: 1px solid #333;
}
#panel .content .right {
border-right: 1px solid #333;
}
#panel .content form {
margin: 0 0 10px 0;
}
#panel .content label {
float: left;
padding-top: 8px;
clear: both;
width: 280px;
display: block;
}
#panel .content input.field {
border: 1px #1A1A1A solid;
background: #414141;
margin-right: 5px;
margin-top: 4px;
width: 200px;
color: white;
height: 16px;
}
#panel .content input:focus.field {
background: #545454;
}
/* BUTTONS */
/* Login and Register buttons */
#panel .content input.bt_login,
#panel .content input.bt_register {
display: block;
float: left;
clear: left;
height: 24px;
text-align: center;
cursor: pointer;
border: none;
font-weight: bold;
margin: 10px 0;
}
#panel .content input.bt_login {
width: 74px;
background: transparent url(../images/bt_login.png) no-repeat 0 0;
}
#panel .content input.bt_register {
width: 94px;
color: white;
background: transparent url(../images/bt_register.png) no-repeat 0 0;
}
#panel .lost-pwd {
display: block;
float:left;
clear: right;
padding: 15px 5px 0;
font-size: 0.95em;
text-decoration: underline;
}
/* Links Styles Starts */
readmore{
font-size:9px;
}
a.readmore{
font-size:10px;
}
#container p.hr{
border:solid #d3d3d3;
border-width:1px 0 0 0;
margin:0;
outline:none;
}
#mainarea a{
border-bottom:1px dotted;
}
#mainarea a:hover{
text-decoration:none;
}
/* Links Styles Ends */
/* Form Styles */
#mainarea form{
padding:0 5px;
}
#mainarea form p{
margin:0 0 5px 0;
}
#mainarea form p.floatleft{
margin-right:15px;
}
.input{
border:1px solid #a5a5a5;
background:none;
cursor:text;
margin:5px 0;
padding:2px;
width:200px;
}
textarea.input{
width:415px;
height:100px;
}
.input:focus, .textarea:focus{
border:1px solid #000;
}
.signin-btn, .button1{
background: transparent url(../images/bt_register_black.png) no-repeat 0 0;
width:94px;
height:24px;
line-height:20px;
margin:8px 0;
padding:2px 10px !important;
padding:2px 0;
color:#fff;
font-weight:bold;
border:none;
outline:none;
cursor:pointer;
}
/* Form Styles */
/* Paragraph and list Styles */
#container p{
margin:0 0 15px 0;
}
#container form p{
margin:0 0 5px 0;
}
#container p img.floatleft{
margin:0 20px 0 0;
}
#container p img.floatright{
margin:0 0 0 20px;
}
#mainarea img.floatleft, #mainarea p img.floatleft{
margin:10px 10px 10px 0;
}
#mainarea img.floatright, #mainarea p img.floatright{
margin:10px;
}
#container ul, #container ol{
margin:0 0 0 20px;
}
#container ol{
margin:0 0 0 30px;
}
#container ul#works{list-style:none;margin:0;}
#container dt{
font-weight:bold;
margin:5px 0;
}
/* Paragraph Styles */
/* Genric Styles Starts */
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
a {
color:#222;
text-decoration:none;
font-weight:bold;
}
a:hover {text-decoration:underline;color:#ea4900;}
h1{font-size:32px;}
h2{font-size:22px;}
h3{font-size:18px;}
h4{font-size:16px;}
h5, h6{font-size:14px;}
h1,h2,h3,h4,h5,h6{margin:0 0 15px 0; color:#5c5b5b;font-family:"Trebuchet MS";font-weight:normal;}
img{border:none;}
.clear{clear:both;}
.floatleft{float:left;}
.floatright{float:right;}
.center{text-align:center;}
.text-left{text-align:left;}
.text-right{text-align:right;}
.normal, .normal a{font-weight:normal;}
.textbold{font-weight:bold;}
#container .nomargin, .nomargin{margin:0;}
#container.nobg, .nobg{background:none;}
/* Genric Styles Ends */
Download file kèm theo cho hai hướng dẫn. không biết thiếu gì không nữa.
<b><font color=red>[Chỉ có thành viên mới xem link được. <a href="register.php"> Nhấp đây để đăng ký thành viên......</a>]</font></b>