Membuat Panel Login Efek Slide

Memasang panel login pada sebuah website yang mempunyai member, memang sangat efektif. Bagai mana jika panel login di pasang di sebuah blog dengan tampilan gak kalah jauh dengan yang lain. Seperti pada gambar diatas, nampak cantik login panel dengan JQuery.

Disini ane cuma mempostingin cara membuat tampilan panel login, jadi sobat hanya menyesuaikan target loginnya. Untuk memasang panel tersebut, ikuti step by stepnya.....

1. Masuk ke akun blog sobat
2. Pilih Rancangan, Edit Html.
3. Cari kode </head>.
4. Letakan script berikut, diatas kode no.3
   

   
   
   
   <!-- PNG FIX for IE6 -->
   
   <!-- http://24ways.org/2007/supersleight-transparent-png-in-ie6 -->
   
   <!--[if lte IE 6]>
   
   <script type='text/javascript' src='http://syamsjs.googlecode.com/files/supersleight-min.js'></script>
   
   <![endif]-->
   
   <!-- jQuery - the core -->
   
   <script src='http://syamsjs.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'/>
   
   <!-- Sliding effect -->
   
   <script src='http://syamsjs.googlecode.com/files/slide.js' type='text/javascript'/>
   
   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
   
   
   
   

   
   
5. Cari kode ]]></b:skin>.
6. Letakan Script dibawah ini, di atas kode no.6
   

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

   
   
7. Cari kode </body>.
8. Letakan kode berikut, diatas kode no.7
   

   
   
   
   <div style='height:auto; width:100%; position:fixed; top:11px;'>
   
   <!-- Panel -->
   
   <div id='toppanel'>
   
   	<div id='panel'>
   
   	<div align='center' class='content clearfix'>
   
   	<div class='left'>
   
   	<form action='' method='post'>
   
   	<table cellpadding='0px' cellspacing='0px'>
   
   	<tr>
   
   	<td align='center' colspan='3' style='background:#999999; color:#FFFFFF; font-size:20px; padding:5px;'><b>Hubungi Kami</b></td>
   
   	</tr>
   
   	<tr>
   
   	<td style='padding-left:3px; width:125px;'>Nama Anda</td>
   
   	<td style='width:15px;'>:</td>
   
   	<td style='width:139px;'>
   
   <input class='field' name='nama' type='text'/></td>
   
   	</tr>
   
   	<tr>
   
   	<td style='padding-left:3px; width:125px;'>Email Anda</td>
   
   	<td style='width:15px;'>:</td>
   
   	<td style='width:139px;'>
   
   <input class='field' name='email' type='text'/></td>
   
   	</tr>
   
   	<tr>
   
   	<td style='padding-left:3px; width:125px;'>Perihal</td>
   
   	<td style='width:15px;'>:</td>
   
   	<td style='width:139px;'>
   
   <input class='field' name='perihal' type='text'/></td>
   
   	</tr>
   
   	<tr>
   
   	<td style='padding-left:3px; width:125px;'>Pesan Anda</td>
   
   	<td style='width:15px;'>:</td>
   
   	<td style='width:139px;'><textarea cols='30' id='text' name='pesan' rows='5' style='opacity:0.4;filter:alpha(opacity=40); background:url(http://a2cto.org/clipart/Animated/Computers_and_Technology/Email/envelope_1.gif) no-repeat bottom right ;'/></td>
   
   	</tr>
   
   	<tr>
   
   	<td style='padding-left:3px; width:125px;'/>
   
   	<td style='width:15px;'/>
   
   	<td style='width:139px;'>
   
   <input name='submit' type='submit' value=' Kirim '/>
   
   <input type='RESET'/></td>
   
   	</tr>
   
   	</table>
   
   	</form>
   
   	</div>
   
   	<div class='tengah'>
   
   	<!-- Login Form -->
   
   	<form action='#' class='clearfix' method='post'>
   
   	<h1>Member Login</h1>
   
   	<label class='grey' for='log'>Username:</label>
   
   	<input class='field' id='log' name='log' size='23' type='text' value=''/>
   
   	<label class='grey' for='pwd'>Password:</label>
   
   	<input class='field' id='pwd' name='pwd' size='23' type='password'/>
   
   	<label><input checked='checked' id='rememberme' name='rememberme' type='checkbox' value='forever'/> Remember me</label>
   
       <div class='clear'/>
   
   	<input class='bt_login' name='submit' type='submit' value='Login'/>
   
   	<a class='lost-pwd' href='#'>Lost your password?</a>
   
   	</form>
   
   	</div>
   
   	<div class='kanan'>
   
   	<!-- Login Form -->
   
   	<form action='#' class='clearfix' method='post'>
   
   	<h1>Member Login</h1>
   
   	<label class='gre' for='log'>Username:</label>
   
   	<input class='field' id='log' name='log' size='23' type='text' value=''/>
   
   	<label class='grey' for='pwd'>Password:</label>
   
   	<input class='field' id='pwd' name='pwd' size='23' type='password'/>
   
   	<label><input checked='checked' id='rememberme' name='rememberme' type='checkbox' value='forever'/> Remember me</label>
   
       <div class='clear'/>
   
   	<input class='bt_login' name='submit' type='submit' value='Login'/>
   
   	<a class='lost-pwd' href='#'>Lost your password?</a>
   
   	</form>
   
   	</div>
   
   	</div>
   
   	<div align='center' style='background:none; height:100px; width:100%; float:left; clear:both; padding:5px;'>
   
   	</div>
   
   </div> <!-- /login -->	
   
   	<!-- The tab on top -->	
   
   	<div class='tab'>
   
   	<ul class='login'>
   
   	<li style='background:none; color:aqua;'>
   
   	<div align='right' class='container'>
   
   	<div class='tab-nav' id='tab-nav-3'>
   
   	<ul style='background:none'>
   
   	<li style='background:none'>
   
   	</li>
   
    </ul>
   
   	</div>
   
   	</div>
   
   	</li>
   
   	<li class='left'> </li>
   
   	<li>Hello Guest!</li>
   
   	<li class='sep'>|</li>
   
   	<li id='toggle'>
   
   	<a class='open' href='#' id='open' style='text-decoration:none;'> ] Contac [</a>
   
   	<a class='close' href='#' id='close' style='display: none;'>Close Panel</a>			
   
   	</li>
   
   	<li class='right'> </li>
   
   	</ul> 
   
   	</div> <!-- / top -->
   
   </div> <!--panel -->
   
   </div>
   
   
   
   

   
   
9. Klik save, untuk menyimpan dan.......

Gimana kerenkan, silahkan sobat edit sesui dengan keinginan sobat. Begitu pula dengan tujuan login-nya.
Ok, segini dulu ya.....
Tetaplah bersemangat sob.....

---

Sumber : http://www.maskolis.co.cc/2011/02/membuat-sliding-loginregister-form.html

Salam senyum dariku untuk semuanya, tetaplah untuk bersemangat. Jangan lupa Comment atau isi buku tamu ya sob. Sedikit pemberitahuan untuk sobat yang ingin mengambil [Copy-Paste], Owner tidak melarang sobat untuk memperbanyak artikel namun Owner berharap sobat berlaku dengan bijak agar mencantumkan link active maupun yang tidak. Owner berharap partisipasinya ya sob.

---

---