Jquery Sliding Login Panel di atas header blog

Untuk membina Jquery Sliding login panel di atas header blog, seperti yang boleh anda lihat di sini (Demo), sila ikut beberapa langkah di bawah.

 1. Log in dashboard--> Template --> Edit HTML --> Proceed.

 2. Dengan menggunakan keyboard, tekan "Ctrl+F" cari kod ]]></b:skin>

 3. Copy dan paste kod css ini, di atas atau sebelum 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/AVvXsEj95sM4g7mTM-u-gwKs70NAPAVtfXbkZJJviSX9rXMlK71Ba6z-75z0pR9N6UQpYt2uwJx8VChrMRnmwqsaJ_gG5EVwJrnaAeA5cV9VUBJ7qGNL8OsCP7TgcSGLNGmXfz0Hyfr4IllcG0c/) 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;
}

 4. Seterusnya, dengan menggunakan keyboard, tekan "Ctrl+F" cari pula kod </head>

 5. Copy dan paste kod ini, di bawah atau selepas kod </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>

6. Akhir sekali, klik PREVIEW. Jika tiada sebarang mesej error terpapar, klik Save.

p/s: Untuk menukar warna background panel dan button, sila edit kod yang di highlightkan dengan warna merah.

• 
• 
• 
• 
• 
• 
•