Sliding Login Panel With Jquery

1. Login Ke blogger
2. Pilih Rancangan
3. EDIT HTML -> centang expand template widget
4. simpan kode berikut diatas kode ]]></b:skin>

/***** clearfix *****/<br /> .clear {clear: both;height: 0;line-height: 0;}<br /> .clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}<br /> .clearfix {display: inline-block;}<br /> /* Hides from IE-mac \*/<br /> * html .clearfix {height: 1%;}<br /> .clearfix {display: block;}<br /> /* End hide from IE-mac */<br /> .clearfix {height: 1%;}<br /> .clearfix {display: block;}<br /> <br /> /* Panel Tab/button */<br /> .tab {<br /> background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_b.png) repeat-x 0 0;<br /> height: 42px;<br /> position: relative;<br /> top: 0;<br /> z-index: 999;<br /> }<br /> <br /> .tab ul.login {<br /> display: block;<br /> position: relative;<br /> float: right;<br /> clear: right;<br /> height: 42px;<br /> width: auto;<br /> font-weight: bold;<br /> line-height: 42px;<br /> margin: 0;<br /> right: 150px;<br /> color: white;<br /> font-size: 80%;<br /> text-align: center;<br /> }<br /> <br /> .tab ul.login li.left {<br /> background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_l.png) no-repeat left 0;<br /> height: 42px;<br /> width: 30px;<br /> padding: 0;<br /> margin: 0;<br /> display: block;<br /> float: left;<br /> }<br /> <br /> .tab ul.login li.right {<br /> background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_r.png) no-repeat left 0;<br /> height: 42px;<br /> width: 30px;<br /> padding: 0;<br /> margin: 0;<br /> display: block;<br /> float: left;<br /> }<br /> <br /> .tab ul.login li {<br /> text-align: left;<br /> padding: 0 6px;<br /> display: block;<br /> float: left;<br /> height: 42px;<br /> background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_m.png) repeat-x 0 0;<br /> }<br /> <br /> .tab ul.login li a {<br /> color: #15ADFF;<br /> }<br /> <br /> .tab ul.login li a:hover {<br /> color: white;<br /> }<br /> <br /> .tab .sep {color:#414141}<br /> <br /> .tab a.open, .tab a.close {<br /> height: 20px;<br /> line-height: 20px !important;<br /> padding-left: 30px !important;<br /> cursor: pointer;<br /> display: block;<br /> width: 100px;<br /> position: relative;<br /> top: 11px;<br /> }<br /> <br /> .tab a.open {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_open.png) no-repeat left 0;}<br /> .tab a.close {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_close.png) no-repeat left 0;}<br /> .tab a:hover.open {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_open.png) no-repeat left -19px;}<br /> .tab a:hover.close {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/css/../images/bt_close.png) no-repeat left -19px;}<br /> <br /> /* sliding panel */<br /> #toppanel {<br /> position: absolute;<br /> top: 0;<br /> width: 100%;<br /> z-index: 999;<br /> text-align: center;<br /> margin-left: auto;<br /> margin-right: auto;<br /> }<br /> <br /> #panel {<br /> width: 100%;<br /> height: 270px;<br /> color: #999999;<br /> background: #272727;<br /> overflow: hidden;<br /> position: relative;<br /> z-index: 3;<br /> display: none;<br /> }<br /> <br /> #panel h1 {<br /> font-size: 1.6em;<br /> padding: 5px 0 10px;<br /> margin: 0;<br /> color: white;<br /> }<br /> <br /> #panel h2{<br /> font-size: 1.2em;<br /> padding: 10px 0 5px;<br /> margin: 0;<br /> color: white;<br /> }<br /> <br /> #panel p {<br /> margin: 5px 0;<br /> padding: 0;<br /> }<br /> <br /> #panel a {<br /> text-decoration: none;<br /> color: #15ADFF;<br /> }<br /> <br /> #panel a:hover {<br /> color: white;<br /> }<br /> <br /> #panel a-lost-pwd {<br /> display: block;<br /> float: left;<br /> }<br /> <br /> #panel .content {<br /> width: 960px;<br /> margin: 0 auto;<br /> padding-top: 15px;<br /> text-align: left;<br /> font-size: 0.85em;<br /> }<br /> <br /> #panel .content .left {<br /> width: 280px;<br /> float: left;<br /> padding: 0 15px;<br /> border-left: 1px solid #333;<br /> }<br /> <br /> #panel .content .right {<br /> border-right: 1px solid #333;<br /> }<br /> <br /> #panel .content form {<br /> margin: 0 0 10px 0;<br /> }<br /> <br /> #panel .content label {<br /> float: left;<br /> padding-top: 8px;<br /> clear: both;<br /> width: 280px;<br /> display: block;<br /> }<br /> <br /> #panel .content input.field {<br /> border: 1px #1A1A1A solid;<br /> background: #414141;<br /> margin-right: 5px;<br /> margin-top: 4px;<br /> width: 200px;<br /> color: white;<br /> height: 16px;<br /> }<br /> <br /> #panel .content input:focus.field {<br /> background: #545454;<br /> }<br /> <br /> /* BUTTONS */<br /> /* Login and Register buttons */<br /> #panel .content input.bt_login,<br /> #panel .content input.bt_register {<br /> display: block;<br /> float: left;<br /> clear: left;<br /> height: 24px;<br /> text-align: center;<br /> cursor: pointer;<br /> border: none;<br /> font-weight: bold;<br /> margin: 10px 0;<br /> }<br /> <br /> #panel .content input.bt_login {<br /> width: 74px;<br /> background: transparent url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_login.png) no-repeat 0 0;<br /> }<br /> <br /> #panel .content input.bt_register {<br /> width: 94px;<br /> color: white;<br /> background: transparent url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_register.png) no-repeat 0 0;<br /> }<br /> <br /> #panel .lost-pwd {<br /> display: block;<br /> float:left;<br /> clear: right;<br /> padding: 15px 5px 0;<br /> font-size: 0.95em;<br /> text-decoration: underline;<br /> }

5. simpan javascript berikut diatas kode </head>

<script src="http://web-kreation.com/demos/Sliding_login_panel_jquery/js/jquery-1.3.2.min.js" type="text/javascript">

jika script di atas sudah ada dalam templet anda,abaikan saja tahap ini.

6. simpan script berikut dibawah file Js tadi

<script style='display:none' type='text/javascript'>$(document).ready(function() { // Expand Panel $("#open").click(function(){ $("div#panel").slideDown("slow"); }); // Collapse Panel $("#close").click(function(){ $("div#panel").slideUp("slow"); }); // Switch buttons from "Log In | Register" to "Close Panel" on click $("#toggle a").click(function () { $("#toggle a").toggle(); }); }); </script>

7. cari kode <body> dan simpan kode berikut dibawahnya

<!-- Login --><br /> <div id='toppanel'><div id='panel'><div class='content clearfix'><div class='left'><h1>Selamat Datang !!</h1><h2>Contoh Sliding Login</h2><p class='grey'>BlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBla</p><h2>Tutorial</h2><p class='grey'>Untuk membuat sliding login panel silahkan baca : <a href='http://www.z33s.co.cc/2010/08/sliding-login-panel-with-jquery.html' title='Download'>Cara membuat Sliding Login Panel di Blogger</a></p></div><br /> <div class='left'><form action='#' class='clearfix' method='post'><h1 class='padlock'>Member Login</h1><label class='grey' for='log'>Username:</label><br /> <input class='field' id='log' name='log' size='23' type='text' value=''/><br /> <label class='grey' for='pwd'>Password:</label><br /> <input class='field' id='pwd' name='pwd' size='23' type='password'/><br /> <label><input checked='checked' id='rememberme' name='rememberme' type='checkbox' value='forever'/> Remember me</label><br /> <div class='clear'></div><input class='bt_login' name='submit' type='submit' value='Login'/><br /> <a class='lost-pwd' href='#'>Lost your password?</a><br /> <br /> </form></div><div class='left right'><form action='#' method='post'><h1>Not a member yet? Sign Up!</h1><label class='grey' for='signup'>Username:</label><br /> <input class='field' id='signup' name='signup' size='23' type='text' value=''/><br /> <label class='grey' for='email'>Email:</label><br /> <input class='field' id='email' name='email' size='23' type='text'/><br /> <label>A password will be e-mailed to you.</label><br /> <input class='bt_register' name='submit' type='submit' value='Register'/><br /> </form></div><br /> </div></div><!-- /login --><br /> <!-- The tab on top --><br /> <div class='tab'><ul class='login'><li class='left'></li> <li>Hello Guest!</li> <li class='sep'>|</li> <li id='toggle'><br /> <a class='open' href='#' id='open'>Log In | Register</a><br /> <a class='close' href='#' id='close' style='display: none;'>Close Panel</a><br /> </li> <li class='right'></li> </ul></div><!-- / top --><br /> </div><!-- panel -->

8. simpan templet.

sumber : http://web-kreation.com/all/nice-clean-sliding-login-panel-built-with-jquery/