Añadir al blog la suscripción por correo

Algunas de las preguntas pendientes de respuesta tratan sobre la forma de añadir el formulario de suscripción por E-mail, el que puedo proporcionar es el que tengo añadido a la sidebar y lo podéis usar cambiando donde dice Gemablog (dos veces) por vuestro nombre de usuario en FeedBurner. En un gadget de HTML añadimos lo siguiente:

<style>#fbForm {background: url() no-repeat scroll 10px 10px; margin:-10px auto; padding:10px; width:210px;}#fbForm a.fbSuscribe {margin: 0; padding: 1px 0 0 37px; display: block; color: #111111; font-weight: bold; font-family: verdana; font-size: 12px;}#fbForm a.fbSuscribe:hover {color: #111111;}#fbForm input.fbTexto {background-color: #ffffff; border: 1px dotted #111111; color: #111111; padding: 2px; height: 16px; margin-right: 5px; width: 140px;}#fbForm input.fbBoton { background-color:#C0C0C0; border:1px dotted #990000; color:#333333; cursor:pointer; font-size:10px; height:21px; padding:1px 0 3px;}</style><!--[if IE]><style>#fbForm input.fbTexto {border: 1px solid #CCCCCC; width: 130px;}#fbForm input.fbBoton {border:1px solid #CCCCCC; width: 50px;}#fbForm a.fbContador {display: block; float: none; text-align: right;}</style><![endif]--><form id="fbForm" action="http://feedburner.google.com/fb/a/mailverify" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Gemablog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post"><p style="margin-top: 0px; margin-bottom: 0px;color:#333333;font-family:Arial;text-align: center;font-size:80%;">Suscribirse vía mail</p><p style="margin-bottom: 10px;"><input class="fbTexto" name="email" type="text" /><input value="es_ES" name="loc" type="hidden" /><input value="Gemablog" name="uri" type="hidden" /><input class="fbBoton" value="Subscribir" type="submit" /></p>

Hay algunos cambios que se pueden hacer como por ejemplo el texto de Suscribirse Vía mail

<p style="margin-top: 0px; margin-bottom: 0px;color:#333333;font-family:Arial;text-align: center;font-size:80%;">Suscribirse vía mail</p>

En color:#333333 - font-family:Arial;text-align: center y font-size:80% podemos cambiar el color de texto, tipo de fuente, justificar el texto, y tamaño de fuente.

El texto de suscribir lo cambiamos en:

<p style="margin-bottom: 10px;">

<input class="fbTexto" name="email" type="text" />

<input value="es_ES" name="loc" type="hidden" /><input value="Gemablog" name="uri" type="hidden" />

<input class="fbBoton" value="Subscribir" type="submit" />

</p>

Y nos queda el espacio para añadir la cuenta de correo si nos vamos a suscribir.

#fbForm {background: url() no-repeat scroll 10px 10px; margin:-10px auto; padding:10px; width:210px;}

#fbForm a.fbSuscribe {margin: 0; padding: 1px 0 0 37px; display: block; color: #111111; font-weight: bold; font-family: verdana; font-size: 12px;}

#fbForm a.fbSuscribe:hover {color: #111111;}

#fbForm input.fbTexto {background-color: #ffffff; border: 1px dotted #111111; color: #111111; padding: 2px; height: 16px; margin-right: 5px; width: 140px;}

#fbForm input.fbBoton { background-color:#C0C0C0; border:1px dotted #990000; color:#333333; cursor:pointer; font-size:10px; height:21px; padding:1px 0 3px;}

❀ #fbForm podemos hacer que sea más o menos ancho con width
❀ #fbForm input.fbTexto cambiamos los estilos del texto "Buscar"
❀ #fbForm input.fbBoton es el espacio dónde escribimos la direción de correo para suscribirnos.

Se sabrá que todo ha ido bien cuando alguien ingrese su mail y muestre algo así: