Login

Màu Website Thiết Kế

Hotline: 0937 594 886  (Mr.Minh) - Hỗ Trợ Kỹ Thuật
Thiết Kế Web » , » Tạo Form Đăng Nhập, Đăng Ký cho Blogspot

Tạo Form Đăng Nhập, Đăng Ký cho Blogspot

Viết bởi Hoàng Phong vào Monday, April 7, 2014 | 7:56 AM

Thật là lạ phải không nào, Thiết Kế Web sẽ hướng dẫn bạn có một blog chuyên nghiệp khi có cả phần Đăng Nhập và Đăng Ký, giúp cho người đọc dễ dàng tiếp cận hơn tới trang web của bạn.

Các bước tiến hành như sau:
Bước 1: Bạn vào chỉnh sửa HTML
Bước 2: Thêm đoạn code dưới đây trên thẻ  ]]></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;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/AVvXsEhNzqW2CAIg7zJdownys3708ZEy0zNUz_nKyiRyXh0Ri_NvE9kX4MsGmi16rDvVFORO0Xq2PG7CrInkevPySB0D1RsOg-LUHfWCPoe7Ol_CY1HhbQ8ncE48Q_mzRj7CNicoXYyLLzjFTkQ/) 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}

Bước 3: chèn tiếp đoạn Code sau đây 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(){$(&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'>Tài khoản : </label><input id='Email' name='Email' size='20' type='text'/>

<label for='pwd'>Mật khẩu : </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>

Bước 4: Bạn lưu lại và xem thành quả nhé.

Như vậy là bạn có 1 Website nhìn thật chuyên nghiệp rồi phải không nào. Thiết Kế Web Chúc bạn thành công!
Chia sẻ bài viết ngay với :

0 nhận xét:

Post a Comment

 
Dịch Vụ : Domain Hosting | Thiết Kế Web | Thiết Kế Phần Mềm | Quảng Cáo Google Adword | SEO Website
Xuất Bản © 2012. Thiet ke web - Giữ Toàn Quyền.
Thiết Kế bởi Thiết Kế Web Quản Lý Bởi Thiết Kế Web
Bản Quyền Thuốc Về Thiết Kế Web DGK