Jquery Sliding Login Panel di atas header blog

Untuk membina Jquery Sliding login panel di atas header blog,  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/AVvXsEj0JdJekUSmIhOOXUYVn1XSye4_UcfpU2Qe7eLFYff7sTH5t94yQc19MBIioRsJvHlDdlt6sw5g5cH-APabHi1c7NzBL-KIgXbNinrZOjHwdvy2sGGcAGkSw7RugmhrlnMZcM_pxGPKwZw/) 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.
Sumber.....http://maribinablog.blogspot.com

Posted in: Tips dan Trick Blogspot