Tạo Forum Đăng Nhập Cho Blog

    Chắc hẳn các bạn đã từng nhìn thấy mỗi một trang web, hay diễn đàn chia sẻ thông tin thì thường hay có môt tab để các mọi người đăng ký làm thành viên và đăng nhập phải không nào.

Hôm nay mình sẽ hướng dẫn cho các bạn cách để tạo ra một tab forum để đăng ký và đăng nhập làm thành viên như trên.

Mục đích của việc đăng nhập là sẽ giúp cho việc tiết kiệm thời gian của độc giả khi họ muốn để lại nhận xét kèm avatar trên blog, của bạn mà chưa đăng nhập, thay vì phải gõ địa chi trang chủ của, blog.

 Chèn đoạn CSS sau phía trên thẻ </b:skin> tron 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/AVvXsEgPCNjHUTObGTFx1-F9vWagjQUBnG9rmumHD3NBryEz331xQxTGekYwSFEP-rm26KYaycAigak6ckQ7vusE6CVJctWQBdCSw1nty9z4IPytItfGmCxCq34at3rlcPZKaQrZqCSqGYZ2IyE/) 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 kết quả.

Chúc các bạn thành công.

Bài viết nếu hay thì các bạn hãy like và share cho bạn bè để ủng hộ website nha.

Share: