Hôm nay rảnh rỗi ngồi vọc Fb_vote của anh Vong, nảy ra ý làm cái Form Login. Nhìn cũng được.


Dành cho ai đang sử dụng Fb_vote (có Wall) thôi nhé, còn chưa thì có ở dưới. CSS.

Đưa vào bất cứ đâu, Header càng tốt:

Code:

<div style="margin: 0 0 0 0;" id ="loginra" class="vote-plus-post">
<p class="vote-note">Type your username and password:</p>
<form name="form_login" method="post" action="/login">
<input onblur="if (this.value == '') this.value = '.....';" onclick="if (this.value == '.....') this.value = '';" value="....." class="post" type="text" size="10" name="username" style="height: 19px;width: auto;" /> <input onblur="if (this.value == '') this.value = '.....';" onclick="if (this.value == '.....') this.value = '';" value="....." class="post" type="password" size="10" name="password" style="height: 19px;width: auto;" /><input class="mainoption" type="submit" style="height: 19px; float:right;" name="login" value="Log in" />
<br /><a style="font-size: 9px;font-family: Verdana,Arial,Helvetica,sans-serif;"> Login automatically?<input style="float: left;margin: 1px 3px 0 0;
" title="Login automatically" class="radio" type="checkbox" name="autologin" checked="checked" /></a><a href="/profile?mode=sendpassword" style="font-size: 9px;float: right;"> Forget password?</a> </form>
</div>
<script type="text/javascript">
$(document).ready(function(){
        $("#aLoginText").click(function(){
                $("#loginra").fadeToggle('fast');
        });
});
</script>

CSS (1):

Code:

.pun .post {
   border: 1px solid rgba(52, 73, 82, 0.31);
}
.mainoption {
   cursor: pointer;
   background: none repeat scroll 0% 0% #92D1EC;
   border: 2px solid #96D0EA;
   color: #F5F5F5;
}

CSS (2):

Code:

.vote-plus {
background: url(http://i57.servimg.com/u/f57/17/05/17/70/like10.png) no-repeat 5px 2px #deeaf7;
height: 24px;
border: 1px solid #C8D7EC;
color: #5089BE!important;
font-family: sans-serif;
border-radius: 2px;
display: inline-block;
padding: 0 5px 0 25px;
}
.vote-plus-post {
z-index: 10;
position: absolute;
top: 32px;
left: 0;
display: none;
width: 250px;
background: #FFF;
border: 1px solid #F2F2F2;
box-shadow: 4px 4px 7px 0 #999;
padding: 5px;
}
.vote-plus-post::before {
content: '';
display: inline-block;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-bottom: 9px solid #fff;
position: absolute;
left: 11px;
right: -9px;
width: 9px;
top: -9px;
}
.vote-note {
height: 20px;
line-height: 20px;
font-size: 11px;
background: #ffffd3;
border: 1px solid #F7EB93;
margin-bottom: 2px;
padding: 0 5px;
}
.pun .post {
border: 1px solid rgba(52, 73, 82, 0.31);
}
.add {
padding: 20px 0 5px 0;
font-size: 11px;
}
.mainoption {
   cursor: pointer;
   background: none repeat scroll 0% 0% #92D1EC;
   border: 2px solid #96D0EA;
   color: #F5F5F5;
}

Còn cái này là link hiện khung đăng nhập đó:

Code:

<a id="aLoginText">Login</a>

Chỉnh margin: 0 0 0 0; để chỉnh vị trí nơi nó hiện.

Xong.