Instala un widget de iniciar sesión en blogger

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Widget de login (iniciar sesión) en blogger

Desde hace tiempo buscaba la manera de crear un sistema de login (inicio de sesión) en blogger para poder instalarlo en un gadget.

Pensando y pensando di con la solución y el resultado te lo muestro en esta imagen:




Esto dará la oportunidad a tus visitantes de poder iniciar sesión en blogger y acceder a su Escritorio desde tu blog.

Para implementarlo sigue los siguientes pasos:

Diseño>añadir gadget (elemento de página)>html-javascript

Pega este código:

<div id="iniciosesion" style="padding-left: 3em; padding-top: 6px; border: 3px solid #E1D4C0;"><form action="https://www.google.com/accounts/ServiceLoginBoxAuth" onsubmit="onlogin()" method="post">

<input value="http://blogger.com/loginz?d=%2Fhome&amp;p=http%3A%2F%2Fblogger.com%2F" name="continue" type="hidden"/>

<div>

<label for="Email"> Nombre de usuario:
<p>

<input id="Email" tabindex="1" name="Email" size="20" type="text"/>
</p></label>
</div>

<div>
<label for="Passwd"> Contraseña: (<a target="_top" href="https://www.blogger.com/forgot.g" title="¿Ha olvidado su contraseña?">?</a>)
</label><p>
<input id="Passwd" tabindex="2" autocomplete="off" name="Passwd" size="20" type="password"/>
</p></div>

<input id="signin-btn-ns" tabindex="0" class="ubtn ubtn-block" value="Acceder" name="submit" type="submit"/>
<p>
<input id="PersistentCookie" tabindex="3" value="yes" name="PersistentCookie" type="checkbox"/>
<label for="PersistentCookie">Recordarme</label>
(<a ?="" recordarme="" target="_top" href="http://elbalcondejaime.blogspot.com/2009/04/para-que-sirve-la-casilla-recordarme.html" title="¿Qué es?">?</a>)</p></form></div>

Y guarda el gadget...



Puedes cambiar el botón de Acceder por uno estilo blogger, como este:




Para ello, debes cambiar esta parte del código:

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

Por esta otra:

<input id="b" src="http://i695.photobucket.com/albums/vv317/elbalcondejaime/4columnas-10.png?t=1249251313" class="ubtn ubtn-block" value="" type="image"/>

La dirección del botón está señalada en verde. Si lo prefieres, puedes cambiarlo por una imagen personal.

Nota:

Siempre puedes personalizarlo un poco. Si lo deseas, puedes añadirle un fondo al gadget, por ejemplo.