Tạo form đăng nhập cho Blogspot

Trên thực tế thì Blogspot không có cơ sở dữ liệu người dùng, do vậy sẽ không có một form đăng nhậpthực sự cho Blogspot. Tuy nhiên hôm nay mình cũng xin giới thiệu một dạng form đăng nhập cho Blogspot, thực ra là hàng fake thôi. Nhưng nó sẽ giúp cho trang Blogspot của bạn nhìn chuyên nghiệp hơn rất nhiều.

Trước tiên là chèn đoạn code bên dưới vào trước thẻ </b:skin> ở trong template của bạn

#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/AVvXsEganOGNxL2Vij_egfd9ZOvSh2IiHl2yvzKXRBwBPYBdF0tmWFm9lzphtDVRLU9ZBc1zlUJz7LSTUfxlK9IE4n97ChB6mgnSiT8iGT5_Ra3VW-M5engfsJnEI0CBXWE7pdKZSZ1VnvK8LZw/) 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 thẻ </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(){$(".btn-slide").click(function(){$("#slide-panel").slideToggle("slow");});}); </script>
<div id='slide-panel'><div class='loginform'><div class='formdetails'>
<form action='https://www.google.com/accounts/ServiceLogin?service=blogger&continue=https%3A%2F%2Fwww.blogger.com%2Floginz%3Fd%3Dhttp%253A%252F%252Fwww.blogger.com%252Fhome%26a%3DADD_SERVICE_FLAG&passive=true&alinsu=0&aplinsu=0&alwf=true&ltmpl=start&skipvpage=true&rm=false&showra=1&fpui=2&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>

Như vậy là hoàn thành, bạn có thể ấn lưu mẫu và thử xem nó hoạt động như thế nào.

Tạo form đăng nhập cho Blogspot

Bài đăng liên quan