Añadir al blog la suscripción por correo

 

Para agregar la suscripción por correo en un gadget de HTML añadimos lo siguiente:


#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í:

Espero que hallan entendido y si no es asi pueden dejar sus comentarios y le respondere lo mas rapido posible para ayudarle en lo que sea necesario.