Cara Buat Jquery Sliding Panel

Jquery Sliding Panel Log In Ini Lebih Kemas Kerana Ianya Hanya Berfungsi Jika Anda Mengklik Pada Bahagian Login,Dimana Ianya Tersorok Kedalam Dibahagian Header.



1.Login Ke Blogger
2.Template’ > ‘Edit HTML > PROCEED > Expand Widget Templates
3.Tekan Fungsi  Ctrl+F 
4.Cari Kod ]]></b:skin>
5.Copy Kod Dibawah Dan Pastekan Diatas Kod ]]></b:skin>

#slide-panel{
background-color:#000;
border-bottom:2px solid #838383;
display:none;height:80px;
margin:auto;padding-top:20px;
}
.slide{width:950px;
margin:auto;
}
.btn-slide:link,.btn-slide:visited{
color:#fff;
float:right;
display:block;
font-size:14px;
font-weight:bold;
height:28px;
padding:3px 0 3px 0;
line-height:28px;
text-align:center;
text-decoration:none;
width:70px;
font-family:Arial;
background:#000;
margin-top:-2px;
-moz-border-radius:0px 5px 0px 5px;
-webkit-border-bottom-left-radius:8px;
-webkit-border-bottom-right-radius:8px;
}
.loginform{
width:950px;
margin:0 auto;
color:#999;
font-family:Arial,Helvetica,sans-serif;
}
.formdetails{
color:#FFF;
font-size:12px;
padding:5px;
}
.formdetails input{
border:none;
padding:2px 5px;
background-color:#EFEFEF;
}
.loginregister{
color:#999;padding:5px;
}
.loginregister a:link,.loginregister a:visited{
color:#90fff6;
font-size:12px;
}
.loginregister a:hover{
color:#fff';
}
.loginform h2{
padding:10px 10px 10px 0;
font-size:18px;
font-weight:normal;
text-transform:uppercase;
}
.loginform ul li{
display:inline;
}
.loginform ul li a:link,.loginform ul li a:visited{
color:#FFF;
font-size:12px;
text-decoration:underline;
}
input#signIn{
color:#fff;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO2I0nJgt-B20uWoI5IANiaITba8M5PesCEY5ZwxLOckR5-XCioAEUnz-oO0k5p8efCxctB6OqwoifUZMQ955xKkwLjP2rBrNgdNEY72pdf0oRgWPxEZEAe0_TS-rpi9TnHv-1-jLnI-Y/) no-repeat;
width:94px;
height:25px;
cursor:pointer;
padding-bottom:5px;
}
input#Email,input#Passwd{
background:#414141;color:#fff;
}
input:focus#Email,input:focus#Passwd{
background:#545454;
}

6.Cari Kod </head>
7.Copy Kode Dibawah Dan Pastekan Selepas Kode </head>

                                                                                                                                                       <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){$(&quot;.btn-slide&quot;).click(function(){$(&quot;#slide-panel&quot;).slideToggle(&quot;slow&quot;);});});
</script>

<div id='slide-panel'><div class='loginform'><div class='formdetails'>
<form action='https://www.google.com/accounts/ServiceLogin?service=blogger&amp;continue=https%3A%2F%2Fwww.blogger.com%2Floginz%3Fd%3Dhttp%253A%252F%252Fwww.blogger.com%252Fhome%26a%3DADD_SERVICE_FLAG&amp;passive=true&amp;alinsu=0&amp;aplinsu=0&amp;alwf=true&amp;ltmpl=start&amp;skipvpage=true&amp;rm=false&amp;showra=1&amp;fpui=2&amp;naui=8#s01' method='post'>

<label for='log'>Username : </label><input id='Email' name='Email' size='20' type='text'/>

<label for='pwd'>Password : </label><input id='Passwd' name='Passwd' size='20' type='password'/>

<input id='signIn' name='signIn' type='submit' value='Masuk'/>

<label for='rememberme'><input checked='checked' id='rememberme' name='rememberme' type='checkbox' value='forever'/>Ingatkan saya</label>
</form></div>

<div class='loginregister'>
<a href='https://www.blogger.com/signup.g' target='_blank'>Daftar&#173;</a> | <a href='http://www.blogger.com/forgot.g' target='_blank'>Lupa kata laluan anda?</a>
</div></div></div>

<div class='slide'><a class='btn-slide' href='#'>Sign in </a></div>

Sila Kongsi Artikel Ini Dengan Kawan2 Anda,Berkongsi Itu Indah!!! Klik Butang Dibawah.