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://lh4.googleusercontent.com/_U0QaeycS3vw/TZHtnbhNayI/AAAAAAAAAcY/o9eDhACl16M/btn_login.png) 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.
Jquery Sliding Login Panel di atas header blog

ini yang dicari2. tenkiu cikgu <3

n utk apew????login blogger kew??

camner ek nak wat owner masuk blog sendiri tapi tak dikesan di freedjit?

bila test nak log in error je bro.. mcmana ek?

Apsal error ea bro?
Sy letak kod pas ]]> & head, coding dy merata lak kat header.
Sy letak sebelum ]]> & head, error pulak.
Amacam mahu buat? Tunjuk ajar plz

share'a bagus2 ya...makasih lo master
salam dari saya yang masih newbie