Form đăng nhập cho Blogspot

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/AVvXsEgUrXC3z0lNgUhH6gxGJ2pkvTMAwspPo5UjfEyrVZcs2zL8orHBlnd8zeRj8f2AP3K06ayCiDX520pF_YpCHSx9Dny9THa_uFPpkjmtwJTfcnlW4f-nHneeAndn7_ayH6l_fTA8bzyC-Jg/) 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ả.

Nguồn : chúng tôi sưu tầm từ nhiều nguồn

Thiết kế web chuyên nghiệp giá rẻ

Chúng tôi tuyên thiết kế web chuyên nghiệp đẳng cấp giá rẻ với 5 năm kinh nghiệm trong lĩnh vực thiết kế website nếu các bạn có nhu cầu có thể liên hệ Hotline: 0962 66 57 57 || Email: cmay.tt@gmail.com || website: cmay.vn