Formulário de login para Blogspot

Form đăng nhập cho Blogspot

30.3.11 / Được đăng bởi Noct

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiajSfkS5waJSHTeXqwP8KFK90bLALtUFgE_-AUTmsC7OYGWe-NlNjRclg0hEIUipk_9HJrR5oavzOgQHzQh3jm90-PAvjA5tuZrRi2jfVFse98dBnk5HcVFLvCj1CLkdHLbizaRfzY5g4/) 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ả.

fonte:

noct-land




traduzido:                                                          

Formulário de login para Blogspot            

Este artigo irá orientá-lo para um formulário de login ( Entrar Form ) no blog com o estilo do Wordpress . Isto vai poupar tempo para os leitores quando eles querem deixar um comentário com o seu avatar no blog, mas esqueci de log in, em vez de digitar o endereço da home page do Blogger .

Veja a demonstração

Inserir o CSS após o card do topo </ b: skin> no modelo :

# Deslize painel {background-color: # 000; border-bottom: 2px solid 0 3px{border: none; padding: 5px 2px; background-color: # efefef} inputloginregister {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














em, insira o seguinte código abaixo do </ head> :<script src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js "type =" text / javascript '/><scriptid = 'slide no painel'> <div class='loginform'> <div class='formdetails'>forma <method = 'post'><Label for='log'> Nome de usuário: </ label> <input size='20' name='Email' id='Email' type='text'/><rótulo para = 'pwd "> Senha: </ label> <input size='20' name='Passwd' id='Passwd' type='password'/><input id = 'signIn' name = 'signIn' type = 'valor submit' 'Entrar' = /><input checked='checked' for='rememberme'> <Label type='checkbox' name='rememberme' id='rememberme' value='forever'/> Lembre-se </ label></ form> </ div><div class='loginregister'><a href='https://www.blogger.com/signup.g' target='_blank'> Register </ a> | <a href = "http://www.blogger.com/forgot.g" target = "_blank"> Esqueceu sua senha? </ a></ div> </ div> </ div><div class = 'slide' <a> class='btn-slide' href='#'> Login </ a> </ div>Salve o template e ver os resultados.