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 :)

12 opinaron:

Adrián Aratan

Me gustó mucho; vaya, no se me hibiera ocurrido hacer esto, pero es muy útil :)

Responder
G

Jessi, el truco es muy bueno; se ve muy bien el formulario en mi sidebar

Besos

Responder
squirrel

Vaya pero qué útil!
Cuando tenga algo de tiempito lo voy a usar

Un besote :)

Responder
Jéssica YK

» Adrián Aratan: sí, es útil y sencillo de aplicar :)

» G: luego le doy una miradita para ver cómo quedó en tu blog; pero seguro se debe de ver muy bien.

» squirrel: es muy útil.

S@lu2

Responder
Deybi

Mira que sencillito, Jessica. Funciona de maravilla. Lo he personalizado y puesto al estilo de mi blog y queda heavy. ¡Me gusta mucho! :D.

Responder
Jéssica YK

Deybi: me alegra que te haya sido útil y quedó genial en tu blog :)

S@lu2

Responder
WOLFTATU

Wow que blog tan bonito, como l haces para poner ese titulo de "tus duas o comentarios..."?

Responder
Jéssica YK

WOLFTATU: para poner el formulario de comentarios te puede ser este post.

S@lu2

Responder
Antonio

Hola no entiendo una cosa como se puede registrar
Lo que digo como me puedo registrar para tener mi cuenta

Responder
Jéssica YK

» Antonio:
Este es un formulario de Login, es decir, que ya debes tener previamente tu cuenta y contraseña.

En este caso si ingresas tus datos vas a ingresar a tu cuenta de blogger.
No es un formulario de registro.

S@lu2

Responder
paola andrea jimenez garcia

me gusta es un buen programa.

Jéssica YK

» paola andrea jimenez garcia:
Qué bueno que te gustó el tutorial.

S@lu2

Responder

Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"

Gracias por participar en el blog.

inicio