CODE tạo Form Đăng Nhập Đẹp cho Blogger Blogspot

Lưu ý là các bạn có thể yên tâm vì cái CODE tạo Form Đăng Nhập Blogger này đăng nhập trực tiếp vào blogger chứ không thông qua bất kì một sever nào khác nên có thể yên tâm tài khoản của bạn cũng như khách sẽ an toàn.. Và đây là code demo nên các bạn nên có chút kiến thức css cơ bản để điều chỉnh lại cho phù hợp với web mình (CODE ĐẸP)

Bài viết này sẽ hướng dẫn bạn làm một form đăng nhập (Login Form) trên blog với phong cách của Wordpress. Như vậy sẽ tiết kiệm thời gian cho độc giả khi họ muốn để lại nhận xét kèm avatar trên blog của bạn mà quên chưa đăng nhập, thay vì phải gõ địa chỉ trang chủ của Blogger.

Chèn đoạn CSS sau phía trên thẻ </b:skin> trong template:

#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;text-transform:uppercase;font-weight:bold;height:28px;padding:3px 0 3px 0;line-height:28px;text-align:center;text-decoration:none;width:80px;font-family:Arial;background:#000;margin-top:-2px}
.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/AVvXsEh_0OYhq6OiKXu01TagsrwamwGpwmbDO93XHL7-iuKHzeixW1tLQ4PShdS9yo2X6wW2tJbZi1mW0rcQPWP5QWC2QC0BKsLFamRysUV__3nZiS-PLMmh7q81_cHszePf1xO7SmY8KGQ7rRg/) 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}
Tiếp theo, chèn đoạn code sau ngay bên dưới </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='Đăng nhập'/>

<label for='rememberme'><input checked='checked' id='rememberme' name='rememberme' type='checkbox' value='forever'/> Ghi nhớ</label>
</form></div>

<div class='loginregister'>
<a href='https://www.blogger.com/signup.g' target='_blank'>Đăng kí­</a> | <a href='http://www.blogger.com/forgot.g' target='_blank'>Quên mật khẩu ?</a>
</div></div></div>

<div class='slide'><a class='btn-slide' href='#'>Login </a></div>
Save template và xem thành quả.