普通登录效果的代码，参见 http://www.incollege.cn/node/10
下面将详细讲解如何将drupal的登录表单变成浮动登录的方式，效果就如本博客的登录。
1.在page模板里直接加入以下代码，用以激活登陆框，效果见本博客。请注意将代码放到 #wrapper 之类的最外围容器并列的位置。
<div id="login">
<?php if ($user->uid) : ?>
Hello, <?php print ($user->name); ?> <?php print l("edit",'user/'.$user->uid); ?> | <?php print l("logout","logout"); ?>
<?php else: ?>
<a href="#" onclick="login()">log in</a> | <a href="/user/register">register</a>
<?php endif; ?>
</div>
<a class="preload_img">preload_img</a>
2.在theme的info里加个区域，例如 loginform2。将登录区块拖到该区域中，别忘了在page模块里显示该区域。
3.css代码：
/* login form */
#login { width: 305px; float: right; text-align: left; padding-top:25px;}
.close_login {
width:40px; text-align:center; text-decoration:none; height:20px; position:absolute; right:0; top:10px;
line-height:20px; color:#000; font-weight:bold; background:url(images/close.png) center center no-repeat;
}
.hr {
height:1px; overflow:hidden; background-color:#ccc; width:330px; margin:0; margin-left:20px;position:absolute;
right:20px;
top:38px;
}
.preload_img {
background:url(images/close.png) center center no-repeat;
display:none;
}
#block-user-0 {
width:370px;
background-color:#749900;
display:none;
position:absolute;
left:40%;
top:100px;
height:150px;
padding-top:10px;
position:absolute;
-moz-border-radius: 6px;
-webkit-border-radius:6px;
-webkit-box-shadow:1px 1px 3px 1px #fff;
-moz-box-shadow:1px 1px 3px 1px #fff;
}
#block-user-0 label {
text-align:left; color:#CBD890; width:75px; float:left; margin-right:5px; font-size:12px; font-weight:normal;
}
#block-user-0 .item-list li a { color:#eee;}
#block-user-0 .item-list li a:hover { color:#fff;}
#block-user-0 h2 {
float:left;
width:110px;
text-align:center;
text-decoration:none;
height:25px;
line-height:25px;
color:#fff;
font-weight:bold;
font-size:16px;
margin:0;
}
.alpha {
opacity:0.5;
filter:Alpha(opacity=40); height:100%;
}
#user-login-form div#edit-name-wrapper, #user-login-form div#edit-name-1-wrapper {
position: absolute;
top: 45px;
left: 20px;
}
#user-login-form .form-text {
width:115px;
}
#user-login-form div#edit-pass-wrapper {
position: absolute;
top: 80px;
left: 20px;
}
#block-user-0 div.item-list {
position:absolute;
left:240px;
/*if english language -> left:215px;*/
top:50px;
}
#block-user-0 ul{
list-style:none;
margin:0;
padding:0;
}
#block-user-0 li {
padding:10px;
line-height:1.3em;
background:none;
text-align:left;
}
#block-user-0 li a {
text-decoration:none;
}
#block-user-0 li a:hover {
text-decoration:underline;
}
#block-user-0 input#edit-submit, #block-user-0 input#edit-submit-1 {
width: 60px;
height:22px;
position:absolute;
top:125px;
left:99px;
_left:102px;
}
4.js代码：（别忘了有个小图标，可以直接从本博客的登录框上下载之）
$("#block-user-0").append("<a class='close_login' onclick='guanbi()' href='#'></a><div class='hr'></div>");
});
$(document).ready(function(){
function login(){
$("#wrapper").addClass("alpha");
$("#block-user-0").css("display","block");
}
function guanbi() {
$("#block-user-0").css("display","none");
$("#wrapper").removeClass("alpha");
}
