Cara Membuat Sliding Login/Register Form Panel di Blog

Cara Membuat/Memasang Sliding Login/Register Form Panel di Blog, Bagi sobat yang ingin memasang form Login/Register agar mempercantik tampilan blog, atau mungkin sobat mempunyai forum sendiri tidak ada salahnya mencoba Cara Membuat/memasang Sliding Login/Register Form Panel di Blog, penasaran ingin melihat form Login/Register? tunggu apa lagi ayo kita buat form loggin

Langkah langkahnya pun tidak terlalu rumit dan mudah

-. login blog
-. buka menu Template >> edit HTML (centang "Expand Template Widget")
-.cari Tag ]]></b:skin>
-. letakkan kode dibawah ini tepat diatas kode ]]></b:skin>

/***** 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: 42px;

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;

top: 0;

width: 100%;

z-index: 999;

text-align: center;

margin-left: auto;

margin-right: auto;

}




#panel {

width: 100%;

height: 270px;

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: 960px;

margin: 0 auto;

padding-top: 15px;

text-align: left;

font-size: 0.85em;

}




#panel .content .left {

width: 280px;

float: left;

padding: 0 15px;

border-left: 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;

}




/* 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;

}

-.Langkah selanjutnya Copy paste kode dibawah ini dal letakan dibawah kode ]]></b:skin> 

<script src='http://web-kreation.com/demos/Sliding_login_panel_jquery/js/jquery-1.3.2.min.js' type='text/javascript'/><script style='display:none' type='text/javascript'>$(document).ready(function() {


// Expand Panel
$(&quot;#open&quot;).click(function(){
$(&quot;div#panel&quot;).slideDown(&quot;slow&quot;);
});


// Collapse Panel
$(&quot;#close&quot;).click(function(){
$(&quot;div#panel&quot;).slideUp(&quot;slow&quot;);
});


// Switch buttons from &quot;Log In | Register&quot; to &quot;Close Panel&quot; on click
$(&quot;#toggle a&quot;).click(function () {
$(&quot;#toggle a&quot;).toggle();
});


});
</script>

-stelah itu Copy paste kode dibawah ini diatas </body> 

<!-- Login -->
<div id='toppanel'>
<div id='panel'>
<div class='content
clearfix'>
<div class='left'>
<h1>Free Share Tips and Trick</h1>
<h2>Frorum Comunity</h2>
<p class='grey'>Selamat Bergabung</p>
<h2>Tutorial Blog</h2>

<p class='grey'>Untuk
membuatnya Silahkan : <a href='http://seputar-trick.blogspot.com/2012/06/cara-membuat-sliding-loginregister-form.html'
title='Download'>Klik Disini</a></p>
</div>
<div class='left'> 
<form action='#'
class='clearfix' method='post'> 
<h1
class='padlock'>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='left right'>

<form action='#'
method='post'>

<h1>Not a member yet?
Sign Up!</h1>

<label class='grey'
for='signup'>Username:</label>

<input class='field'
id='signup' name='signup' size='23' type='text' value=''/>

<label class='grey'
for='email'>Email:</label>

<input class='field'
id='email' name='email' size='23' type='text'/>

<label>A password will
be e-mailed to you.</label>

<input class='bt_register'
name='submit' type='submit' value='Register'/>

</form>

</div>





</div>

</div>

<!-- /login -->

<!-- The tab on top -->

<div class='tab'>

<ul class='login'>

<li class='left'/>

<li>Welcome</li>

<li class='sep'>|</li>

<li id='toggle'>

<a class='open' href='#'
id='open'>Masuk | Daftar</a>

<a class='close' href='#'
id='close' style='display: none;'>Tutup Panel</a>

</li>

<li class='right'/>

</ul>

</div>

<!-- / top -->

</div>

<!-- panel -->

Simpan Dan lihat hasil kerja anda

Smoga Sukses

NB: Ganti Bila perlu tulisan merah dan biru diatas

Demikian tutorial blog Cara Membuat/Memasang Sliding Login/Register Form Panel di Blog

Cara Membuat Sliding Login/Register Form Panel di Blog 9out of 10 based on 10 ratings. 9 user reviews.