Membuat Panel Login Efek Slide -::- x[dot]com

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.....

Masuk ke akun blog sobat
Pilih Rancangan, Edit Html.
Cari kode </head>.

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'/>

Cari kode ]]></b:skin>.

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;

}

Cari kode </body>.

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>

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

Judul : Membuat Panel Login Efek Slide
Rating : 4.5
Ditulis Oleh : sy@ms

Jika mengutip harap berikan link yang menuju ke artikel Membuat Panel Login Efek Slide ini. Sesama blogger mari saling menghargai. Terima kasih atas perhatiannya

8 komentar:

aciid !!!!!!16 April 2011 pukul 06.24
aloo..
info bgus
cocok buat prkembangan blogq :)

mhon dkunganna :)
dtunggu kemampiranna :)
n mhon untuk klik recomend facebook pada blogq :)
BalasHapus
Balasan
sy@ms16 April 2011 pukul 08.56
Salam kenal sobbb.....
trims partisipasinya ya sob...
BalasHapus
Balasan
YULYANTI_TK_PCR26 Juli 2011 pukul 05.27
gag ada fasilitas buat download source code nya yach? jadinya bisa langsung di coba di browser..TT
BalasHapus
Balasan
sy@ms9 Agustus 2011 pukul 01.29
Salam kenal sob......
Untuk fasilitas download source code belum ane pasang.
Tapi bisa gunakan fasilitas view plain.
Untuk menggunakanya klik view plain diatas source code.

Trimsya dah mampir ke blog ane....
BalasHapus
Balasan
DarMax TeamElite SnuterStar12 Agustus 2011 pukul 23.07
kok udh ngga bisa omm
BalasHapus
Balasan
sy@ms13 Agustus 2011 pukul 02.04
Salam kenal sob....
Trims dah konfirmasi source code, sekarang dah ane update.
Silahkan di coba kembali.
BalasHapus
Balasan
DarMax TeamElite SnuterStar13 Agustus 2011 pukul 18.29
udh ane pasang di blog tp stlah ane simpan jadigini...

Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar. Pesan error XML: The element type must be terminated by the matching end-tag .
Error 500

Tolong benerin lagi yya sobb
BalasHapus
Balasan
sy@ms13 Agustus 2011 pukul 21.24
Ma'af ni sob, ternyata bloger tidak wellformed ama tanda petik dua (").
Sekarang dah ane ganti.

Monggo dicoba sekali lagi......
BalasHapus
Balasan

Tambahkan komentar

x[dot]com

Label

Membuat Panel Login Efek Slide

Written By sy@ms on Sabtu, 09 April 2011 | 09.41

Ini juga menarik

8 komentar:

Sekarang Anda Membaca

Mention At sya[MS]udin

Guide

Find Us

Disclaimer