Agar tampilan login terlihat lebih menarik, kita bisa menggunakan jQuery. nah... login panel itu bisa ditampilkan atau disembunyikan dengan animasi sliding.
<!--
Copyright 2009 Jeremie Tisseau
"Sliding Login Panel with jQuery 1.3.2" is distributed under the GNU General Public License version 3:
http://www.gnu.org/licenses/gpl-3.0.html
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Sliding Login Panel with jQuery 1.3.2</title>
<meta name="description" content="Demo of a Sliding Login Panel using jQuery 1.3.2" />
<meta name="keywords" content="jquery, sliding, toggle, slideUp, slideDown, login, login form, register" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- stylesheets -->
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/slide.css" type="text/css" media="screen" />
<!-- PNG FIX for IE6 -->
<!-- http://24ways.org/2007/supersleight-transparent-png-in-ie6 -->
<!--[if lte IE 6]>
<script type="text/javascript" src="js/pngfix/supersleight-min.js"></script>
<![endif]-->
<!-- jQuery - the core -->
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<!-- Sliding effect -->
<script src="js/slide.js" type="text/javascript"></script>
</head>
<body>
<!-- Panel -->
<div id="toppanel">
<div id="panel">
<div class="content clearfix">
<div class="left">
<h1>Selamat Datang </h1>
<h2>Sliding login panel Demo with jQuery</h2>
<p class="grey">
<a href="http://komputerbelajar.blogspot.com/2010/11/jquery-accordion-style.html"> Accordion Style</a>,
<a href="http://komputerbelajar.blogspot.com/2010/11/aplikasi-download-english-learning.html">Aplikasi: Download English Learning untuk Sony Ericsson K770</a>,
<a href="http://komputerbelajar.blogspot.com/2010/09/javascript-download-jquery-plugin.html"> Javascript: Download JQuery Plugin </a> </p>
<h2>Download</h2>
<p class="grey">untuk Register ziddu
<a href="http://www.ziddu.com/register.php?referralid=%28y]%28vzj9pyy" > di sini</a>
</p>
</div>
<div class="left">
<!-- Login Form -->
<form class="clearfix" action="#" method="post">
<h1>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>
<div class="left right">
<!-- Register Form -->
<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>
</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 -->
<div id="container">
</div><!-- / content -->
</div><!-- / container -->
</body>
</html>
Download Source Code Sliding Login Panel with jQuery di sini
I've learn several excellent stuff here. Certainly value bookmarking for revisiting. I surprise how much effort you set to make this sort of excellent informative web site.
ReplyDeleteCheck out my homepage: Margherita Una
I know this if off topic but I'm looking into starting my own weblog and was curious what all is needed to get set up? I'm assuming
ReplyDeletehaving a blog like yours would cost a pretty penny?
I'm not very web smart so I'm not 100% sure. Any suggestions or advice would be greatly appreciated. Thanks
My web blog ... reliable mbt shoes
my site - Jordan Shoes
Good day! Do you use Twitter? I'd like to follow you if that would be ok. I'm absolutely enjoying your blog and look forward to new updates.
ReplyDeleteFeel free to surf to my weblog: unique bridal
Also see my page - Return Wedding traditionally
I've been surfing on-line more than three hours lately, yet I by no means discovered any fascinating article like yours. It's pretty price sufficient for me.
ReplyDeleteIn my view, if all web owners and bloggers made just right content
material as you did, the net might be a lot more useful than
ever before.
Also visit my web site :: casual shoes
all the time i used to read smaller posts which also clear their motive, and that
ReplyDeleteis also happening with this article which I am reading at this place.
Feel free to visit my page; vitamin nutrition supplement
I comment whenever I appreciate a article on a website or I have something to valuable to contribute to the conversation.
ReplyDeleteIt's a result of the passion displayed in the article I looked at. And on this post "Jquery: Sliding Login Panel with jQuery". I was moved enough to post a leave a responsea response :-) I actually do have a few questions for you if you tend not to mind. Is it just me or do a few of these responses look like they are left by brain dead folks? :-P And, if you are posting on additional online social sites, I'd like to follow you.
Would you make a list all of your community pages
like your twitter feed, Facebook page or linkedin profile?
Take a look at my web page ... diet for weight loss
Howdy are using Wordpress for your blog platform?
ReplyDeleteI'm new to the blog world but I'm trying to get started and create my own.
Do you need any html coding knowledge to make your own blog?
Any help would be greatly appreciated!
Here is my blog post - mini food processor