Painel de login

• Descrição:

Gostaria de colocar esse painel de login no meu fórum. Como fazer isso? Ao clicar em login aparece uma caixa na parte inferior da página.

http://visualart.ativoforum.com/

• Informações:

Código:

<div id="user_nav_login" style="bottom: 0px; display: block;">
    <a id="login_close" onclick="jQuery('#user_nav_login').slideUp(); return false;" href="#"></a>
   <div>
      
      <div class="captions">
         
         <form id="login" name="form_login" method="post" action="/login">
             Usuário: <input id="username" type="text" class="input_text" name="username" size="30"><br><br>Senha: <input id="password" type="password" class="input_text" name="password" size="30" style="margin-left: 8px"><br>
            <p style="margin-left: 0; padding-left: 0">
                <input type="checkbox" id="remember" checked="checked" name="autologin" value="1" class="input_check"> Lembrar dados?<input type="submit" name="login" class="input_submit" value="Enviar">
            </p>
            
         </form>
         
      </div>
      
   </div>
</div>
<script>
jQuery(function() {
  jQuery('a[href*="/login"]').click(function() {
    jQuery('#user_nav_login').css({"bottom": "0px"}).slideDown();return false;
  });
});
</script>
<style>
#user_nav_login {
height: 160px;
left: 0px;
bottom: -160px;
background: url(http://i.imgur.com/ylwhiOI.png) repeat-x;
position: fixed;
width: 100%;
z-index: 10003;
display: block;
}
#user_nav_login div {
width: 400px;
margin: 0px auto;
}
#user_nav_login div.captions {
color: #FFF;
padding: 30px 0 0 30px;
}
#user_nav_login .input_text {
background: #fff url(http://i.imgur.com/Bea3qZJ.png) repeat-x;
font-size: 1em;
font-family: arial,verdana,tahoma,sans-serif;
border: 1px solid #b5b5b5;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
padding: 3px;
}
#user_nav_login p {
padding: 8px 0 0 20px;
}
#user_nav_login .input_submit {
background: url(http://forum.muaway.net/public/style_images/MuAwaY/input_button.png);
background-color: #f2f2f2;
border: 0px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.5);
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.5);
text-shadow: 0px 1px 0px rgba(255,255,255,0.4);
color: #262626;
margin-top: 1px;
margin-bottom: -15px;
margin-left: 77px;
font-weight: normal;
font-size: 10px;
padding: 2px 7px;
cursor: pointer;
}
#login_close {
float: right;
width: 50px;
height: 10px;
background: url(http://i.imgur.com/989DVCx.png);
margin: 10px;
opacity: 0.5;
}
#login_close:hover {
opacity: 1;
}
</style>

Código:

<div id="user_nav_login" style="bottom: 0px; display: none;">
    <a id="login_close" onclick="jQuery('#user_nav_login').slideUp(); return false;" href="#"></a>
  <div>
     
      <div class="captions">
         
        <form id="login" name="form_login" method="post" action="/login">
            Usuário: <input id="username" type="text" class="input_text" name="username" size="30"><br><br>Senha: <input id="password" type="password" class="input_text" name="password" size="30" style="margin-left: 8px"><br>
            <p style="margin-left: 0; padding-left: 0">
                <input type="checkbox" id="remember" checked="checked" name="autologin" value="1" class="input_check"> Lembrar dados?<input type="submit" name="login" class="input_submit" value="Enviar">
            </p>
           
        </form>
         
      </div>
     
  </div>
</div>
<script>
jQuery(function() {
  jQuery('a[href*="/login"]').click(function() {
    jQuery('#user_nav_login').css({"bottom": "0px"}).slideDown();return false;
  });
});
</script>
<style>
#user_nav_login {
height: 160px;
left: 0px;
bottom: -160px;
background: url(http://i.imgur.com/ylwhiOI.png) repeat-x;
position: fixed;
width: 100%;
z-index: 10003;
display: block;
}
#user_nav_login div {
width: 400px;
margin: 0px auto;
}
#user_nav_login div.captions {
color: #FFF;
padding: 30px 0 0 30px;
}
#user_nav_login .input_text {
background: #fff url(http://i.imgur.com/Bea3qZJ.png) repeat-x;
font-size: 1em;
font-family: arial,verdana,tahoma,sans-serif;
border: 1px solid #b5b5b5;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
padding: 3px;
}
#user_nav_login p {
padding: 8px 0 0 20px;
}
#user_nav_login .input_submit {
background: url(http://forum.muaway.net/public/style_images/MuAwaY/input_button.png);
background-color: #f2f2f2;
border: 0px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.5);
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.5);
text-shadow: 0px 1px 0px rgba(255,255,255,0.4);
color: #262626;
margin-top: 1px;
margin-bottom: -15px;
margin-left: 77px;
font-weight: normal;
font-size: 10px;
padding: 2px 7px;
cursor: pointer;
}
#login_close {
float: right;
width: 50px;
height: 10px;
background: url(http://i.imgur.com/989DVCx.png);
margin: 10px;
opacity: 0.5;
}
#login_close:hover {
opacity: 1;
}
</style>