Form đăng nhập cho Blogspot

/
blogger login form
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.

Xem demo



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://lh4.googleusercontent.com/_U0QaeycS3vw/TZHtnbhNayI/AAAAAAAAAcY/o9eDhACl16M/btn_login.png) 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ả.
Add a Comment

50 comments

Cái này mà blogger cũng có nữa hả Noct. Quá độc, các nền tảng khác đang ngó Blogspot và bắt đầu nhỏ dãi đấy hô hô

3/30/2011 comment-delete

Độc như chưa từng được độc

Thái :">
3/30/2011 comment-delete

Form đẹp!
Nhưng vẫn nên vào Blogger.com thì hơn... vì phần lớn chúng ta thao tác ở đó. Trước mình cũng thử tạo 1 Form để login trên blogspot nhưng cuối cùng vẫn phải vào Blogger.com

Thì form này là đăng nhập vào Blogger.com chứ còn gì nữa :D

3/30/2011 comment-delete

Biết thế, nhưng khi test thử nó tự động redirect về blogger.com chứ ko login ngay trên Blogspot. Vẫn phải thêm 1 thao tác Type password. (hay là mình test bị lỗi). Copy về blog mình nhé :)

+ Bạn tạo title cho bài post bằng tiếng việt có dấu nên khi Create post sẽ tạo lỗi trong tên đường dẫn:
http://noct-land.blogspot.com/2011/03/form-ang-nhap-cho-blogspot.htmt
Có lẽ, tên đúng mà bạn tạo là /form-đăng-nhập-cho-blogspot. Do đó, bạn nên type tiếng việt không dấu sau đó edit lại

các trang nhiều thành viên thì nên có khung này, nhưng kiểu gì nó cũng redirect về trang /home

3/30/2011 comment-delete

Híc, em toàn đăng nhập check mail trước, rồi vào Blogger, sau đó đi lượn lờ. Ủa, đăng nhập xong nó k quay trở lại trang đó nữa à bác :-o. Test trên IE vì ngại out trên FF.

3/30/2011 comment-delete

Thực ra cái này đã có ngươì giới thiệu rồi, Fand Dung Blog Mothuthuat.com, đều áp dụng script của nước ngoài mà.

@Huỳnh Nhật Hà: em khẳng định với anh là em không copy ở chỗ nào cả, cho nên anh đừng bao giờ nói vậy nữa :-?

3/30/2011 comment-delete

@Duy Pham : Vẫn chưa tìm ra phương pháp để quay lại trang cũ bác à :(( , và cái khung password vẫn chưa tự động nhập, hôm qua mò ra rồi mà loay hoay thế nào nó hư mất tiêu b-( , bác nào giúp hoàn thiện là ngon :-ss

3/30/2011 comment-delete

chú lại nóng rồi, anh em cũng chẳng qua "chém gió chém mưa đủ các kiểu" thôi =))
url tiếng việt bị các lỗi ở chữ đ, á... có thể khắc phục bằng cái viết title không dấu trước, public sau đó edit lại là được mà :)

3/30/2011 comment-delete

@Noct : Noct lại nóng rồi, a có nói Noct cop đâu hè, chỉ nói là kiểu script tương tự đã được giới thiệu mà, xem lại đi chú

Hiệu ứng rất bắt mắt,đc tùy chỉnh dẫn đến bất cứ trang nào có khung đăng nhập (email,..)Các Blog động đậy như wp,bo-blog thì quá dễ roài,blogspot ko kết nối data e rằng rất khó login thẳng vào khu vực admin

3/30/2011 comment-delete

@Thủ lĩnh IB : Thực ra lúc đầu đã log được vào admin panel nhưng lúc đó thấy code dài quá nên ngồi thu gọn lại, sau đó test lại thì không được nữa b-(

3/30/2011 comment-delete

Cái này áp dụng bên VN mình chắc được chứ nước ngoài họ sợ giả danh cướp mật khẩu lắm.

3/31/2011 comment-delete

Chào bạn... bạn có thể hướng dẫn mình cách sử dụng appspot.com để tải dữ liệu lên đó không...
ví dụ: bạn tải files css lên nó như thế này nà http://noctland.appspot.com/files/mimosa.css
thanks bạn
có gì pm mình qua nick: mrjack_vip_it

3/31/2011 comment-delete

Nhớ lần trước có đề cập chuyện này 1 lần rồi, tôi không liên lạc qua yh, có chuyện gì riêng tư thì vào phần liên hệ , nhập chính xác địa chỉ mail để nhận phản hồi.

3/31/2011 comment-delete

Đăng kí nhân bài viết qua mail làm thế nào vậy bác Noct

3/31/2011 comment-delete

@Hải Yến: bạn đăng nhập Blogger vào phần Thiết Kế -> Phần tử trang -> Thêm tiện ích -> Theo dõi qua Email

Hồi nào giờ mới thấy một bạn nữ ghé blog mình nhỉ :)

3/31/2011 comment-delete

Khi nào có template mới vậy , mình đang mong đợi một cái template của bác hơi giống mình một có 2 cột gồm phần bài đăng và phần sidebar , phần sidebar gồm 1 sidebar lớn và 2 sidebar nhỏ chia hai bên kèm theo style phân trang của mình nữa mong là bác thực hiện được :D

4/01/2011 comment-delete

với lại template ko quá nặng

4/01/2011 comment-delete

Thế Minh Quân trả bao nhiêu cho một cái template theo ý muốn như thế :D

4/02/2011 comment-delete

Em là học sinh nên tiền ko nhiều 10$ được ko nhỉ

4/02/2011 comment-delete

Cộng đồng blogger phải giúp đỡ chứ tiền bạc đâu quan trọng :d

4/02/2011 comment-delete

Thế chắc Quân phải nhờ người khác nhỉ :D
Giúp đỡ thủ thuật còn được chứ làm nguyên một cái template theo yêu cầu thì vượt quá mức độ free rồi b-)

4/03/2011 comment-delete

The6 chi to lam cai bieu tuong vui giong bac di

4/03/2011 comment-delete

@Noct :nếu thù lao gấp 100 lần như thế bác có suy nghĩ lại hok :) ?

4/03/2011 comment-delete

Ý bác là 1000$ @-)
Bên WP cũng không theme nào có cái giá đó.

4/03/2011 comment-delete

Style và hiệu ứng rất đẹp mắt, hơn hẳn cái script do boyprodx tạo lúc gần 2 năm trước trước.

4/05/2011 comment-delete

Nhận xét này đã bị quản trị viên blog xóa.

Nặc danh
4/06/2011 comment-delete

Hi...đã áp dụng Blog tớ thành công!

4/11/2011 comment-delete

Cái này bên IE chạy hơi bị điên chút xí:(

4/11/2011 comment-delete

Chưa test trên IE8 vì đăng dùng IE9 :D

4/11/2011 comment-delete

@Noct :Does it work in IE6

4/16/2011 comment-delete

awesome it's really awesome.........

4/16/2011 comment-delete

bác cho em hỏi làm sao để nó đừng ẩn mà hiện thẳng ra ngoai luôn dc ko

5/31/2011 comment-delete

Được, bạn view source để xem code nhé -> Demo

5/31/2011 comment-delete

Các bãi ơi em đăng nhạp nó bị lỗi 404 rồi

6/15/2011 comment-delete

em làm mà sao nó không đăng nhập vào trong blogger luôn vậy

6/20/2011 comment-delete

Hmm doesnt work in my blog :(

10/02/2011 comment-delete

Nhận xét này đã bị quản trị viên blog xóa.

10/23/2011 comment-delete

@A3FC: dùng template của tôi rồi tự sửa lại là của bạn, thật hoành tráng

10/23/2011 comment-delete

Nhận xét này đã bị quản trị viên blog xóa.

10/23/2011 comment-delete

em làm được rồi anh ơi ^^
nhưng làm sao để ẩn thanh điều hướng của blog được anh
Image: http://i1196.photobucket.com/albums/aa416/PuViDai/2.jpg

10/28/2011 comment-delete

Các bạn tìm dòng này: 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'>

Thay thế bằng: form action='https://www.google.com/accounts/ServiceLoginAuth?service=blogger' method='post'>

Là có thể đăng nhập vào ùi, không bị lỗi 404 nữa!

11/12/2011 comment-delete

@Chíp Đẹp Zai

bạn chèn dòng code #navbar{display:none !important}
vào trước thẻ đóng

11/12/2011 comment-delete

sao mình test thử không được nhỉ, nó không chạy thẳng vào mà hiện lại trang blogger

11/26/2011 comment-delete

xài thử xem nào.tsk bạn Noct

1/02/2012 comment-delete

Blog của mình chèn code vào thì tiêu đề lấn xuống dropdown menu, còn menu chẳng thấy đâu nữa b-( Mình dùng TechBlog của Noct.

6/21/2012 comment-delete

ko hieu qua lam :)

Đăng nhận xét

- Không chèn liên kết quảng cáo khi đăng nhận xét.
- Nội dung nên liên quan tới chủ đề của bài.
- Use English if you do not understand what we are talking about.

Chèn Emoticons
Top
Copyright © 2011 Noct Blog. Content is licensed under a Creative Commons Attribution-NonCommercial 3.0 License