sábado, 25 de julio de 2009

Formulario de Login a tu cuenta de blogger

Una de las utilidades que nos ofece la navbar es el enlace que tiene para acceder a nuestra cuenta; sin embargo, por estética y otras razones muchos la quitan.
Lo que nos queda es poner algún enlace a blogger para acceder a nuestra cuenta, etc.
Pero encontré una forma sencilla de acceder a nuestra cuenta de blogger, poniendo un formulario de acceso o login en la sidebar de nuestro blog.

Los pasos para agregarlo son los siguientes:

♠ Vamos a Diseño/ Elementos de página/ Nuevo gadget y selessionamos la opción HTML/CSS.
♠ Pegamos el siguiente código y damos click a guardar:
<div id="loginform"><form action="https://www.google.com/accounts/ServiceLoginBoxAuth" method="post" onsubmit="onlogin()">
<input value="http://blogger.com/loginz?d=%2Fhome&p=http%3A%2F%2Fblogger.com%2F" name="continue" type="hidden"/>

<br/>
<div>
<label for="Email"> Nombre de usuario (e-mail):
<br/><input id="Email" tabindex="1" name="Email" size="20" type="text"/>

</label>
</div>
<br/>
<div>
<label for="Passwd"> Contraseña: (<a href="https://www.blogger.com/forgot.g" target="_top" title="¿Ha olvidado su contraseña?">?</a>)

<br/>
</label>
<input id="Passwd" tabindex="2" autocomplete="off" name="Passwd" size="20" type="password"/>

</div>
<br/><br/>
<input id="signin-btn-ns" tabindex="0" value="Enviar" class="ubtn ubtn-block" name="submit" type="submit"/>

</form></div>

♠ Ahora, para darle alguna propiedad CSS a nuestro formulario como color de borde, color del botón, etc, vamos a Diseño/ Edición de HTML, con ayuda de Ctrl+F buscamos ]]></b:skin> y antes de éste, pegamos el siguiente código:

#Email, #Passwd{
background: #F6F4DA;
border: 1px solid #B07C3F;
}

#signin-btn-ns {
color: #fff;
background: #B07C3F;
border: 1px solid #B07C3F;
}

Si deseamos podemos cambiar los colores del código por otros y también el tipo de borde.
♠ Damos click en guardar y listo.

Y si hemos seguido todos los pasos el formulario se verá así en nuestra sidebar:







Si tienen alguna duda, será bienvenida :)

No hay comentarios:

Publicar un comentario