[Tự làm] Khung đăng nhập đơn giản từ Fb_vote

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.

Cho hỏi cái Vote với cái khung login nó liên quan nhau ở chỗ nào :v
Mà nhiều người dùng

Code:

<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" />

Chi cho mệt trong khi placeholder đơn giản hơn?
Và nói chung là... Cái mũi tên nó bị lỗi kìa

Bạn chỉ cần tách CSS ra là được rồi, 2 chức năng này đâu có liên quan gì nhau.

NCat wrote:Cho hỏi cái Vote với cái khung login nó liên quan nhau ở chỗ nào :v
Mà nhiều người dùng

Code:

<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" />

Chi cho mệt trong khi placeholder đơn giản hơn?
Và nói chung là... Cái mũi tên nó bị lỗi kìa

Người ta làm cho chuẩn w3c mà. Dùng placeholder bị lỗi này.
Có lẽ chủ top có ý như thế.

NCat wrote:Cho hỏi cái Vote với cái khung login nó liên quan nhau ở chỗ nào :v
Mà nhiều người dùng

Code:

<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" />

Chi cho mệt trong khi placeholder đơn giản hơn?
Và nói chung là... Cái mũi tên nó bị lỗi kìa

Có liên quan "chị" ạ, còn mũi tên bị gì thì kệ nó.

@Draudrey: Chị chị cái TRái tYM nhà chú
Cơ mà với cái này không cần bắt buộc phải có xài Fb_vote, tách hết css ra xài là ok rồi còn gì

NCat wrote:@Draudrey: Chị chị cái TRái tYM nhà chú
Cơ mà với cái này không cần bắt buộc phải có xài Fb_vote, tách hết css ra xài là ok rồi còn gì

Em tách CSS từ tối qua rồi giờ còn nói.

Ờ