Ofrecer suscripción por correo electrónico desde las entradas del blog

Una forma de poder capturar a una mayor audiencia, es ofrecer de la forma más accesible posible la suscripción al blog, Blogger lo tiene claro, y no hace mucho tiempo que habilitó un gadget para ofrecer suscripciones por correo electrónico.
Al empezar a hacer uso del elemento "seguir por correo electrónico", se abre automáticamente una cuenta en feedburner.com, así que que puedes obtener todos los beneficios del servicio, y ofrecer suscripciones de distintas vías para que sigan tu contenido, como suscripción  por correo electrónico, y a través de distintos agregadores web como Mi Yahoo, Google Reader, etc.

Hoy te diré cómo agregar el elemento seguir por correo electrónico, tal y como lo uso en mi blog, para que tus usuarios se puedan suscribir a tu blog fácilmente. El estilo que use, aparenta ser una hoja doblada de la esquina, no usa ninguna imagen, y es un estilo que originalmente vi en GemaBlog. La esquina doblada sólo se verá en +IE8 (IE8 y versiones más nuevas)  y el resto de navegadores modernos.
¿Te gusta la idea?, entonces veamos cómo hacerlo...

Cómo agregar la cajita para ofrecer suscripción paso a paso

Paso 1: Agregar el CSS.

Usando la nueva interfaz, ve a Plantilla > Personalizar > Avanzado > Añadir CSS, y en el campo agrega el siguiente código CSS, y guardas los cambios en Aplicar al Blog:

.seguir-pfooter{display:block; width:560px; padding:12px 9px 7px; margin:18px auto 8px; overflow:hidden; background-color:#e0eff3; color:#142138; position:relative; top:0; left:0}
.seguir-pfooter:before{
content:""; position:absolute;right:0;top:0; border-width:0 16px 16px 0;border-style:solid;border-color:#FFF #FFF #aad4e0#aad4e0;width:0;display:block;}
.seguir-pfooter h5{margin:0; padding:5px 0 0 6px; font-size:15px; font-weight:bold}
.seguir-pfooter p{line-height:120%; margin:7px 5px; padding:0; font-size:13px}
input.campo{width:200px; height:24px; float:left; border-style:solid; border-width:1px; border-color:#777 #ccc #ccc #777; font-size:12px; padding:0 4px 0; margin:0 5px 0 0; line-height:200%}
input.enviar{background-color:#fdca2f; border-style:solid; border-width:1px; border-color:#feffff#ccc #ccc #feffff; float:left; width:74px; height:26px; margin:0; padding:0 4px 1px 4px; font-size:12px; text-align:center; color:#161102; cursor:pointer}
input.enviar:hover{border-style:solid; border-width:1px; border-color:#ccc #feffff #feffff #ccc}

Notas o explicación del CSS:

Resalté de rojo los valores que considero que vas a querer cambiar, y que puedes observar abajo en el gráfico. En:

.seguir-pfooter, creamos nuestra cajita contenedora, y que en este caso es "azul". Puedes cambiar:

• El ancho en: widht:560px; 
• El margen o separación en: margin:18px auto 8px;. Se lee18px arriba, auto derecha e izquierda, 8px abajo.
• El color de fondo en: background-color:#e0eff3; 

En:
.seguir-pfooter:before, se forma el triangulito usando bordes, que se superponen a la cajita contenedora, y crea la apariencia de esquina doblada, ahí puedes cambiar:

• El color del fondo del borde, que crea la esquinita en:  border-color:#FFF #FFF #aad4e0 #aad4e0; los dos primeros valores (#FFF, #FFF) deben ser iguales entre sí, y el mismo color del fondo de tus posts. El tercer y cuarto valor (#aad4e0, #aad4e0) deben ser iguales entre sí, y el color más obscuro que el de la caja contenedora, aquí se simulará la esquina doblada.

En:
input.campo, que es el código para el campo del texto (donde escriben el email), puedes cambiar:

• El color del borde en: border-color:#777 #ccc #ccc #777; (los valores se leen: arriba, derecha, abajo, izquierda).

En:
input.enviar, que es el código para el botón, puedes cambiar:

• El color de fondo del botón en:  background-color:#fdca2f;
• El color del borde en:  El color del borde en:  border-color:#feffff #ccc #ccc #feffff; (los valores se leen: arriba, derecha, abajo, izquierda).

En:

input.enviar:hover, puedes cambiar:

• El color del borde al poner el puntero del ratón sobre el botón en: border-color:#ccc #feffff #feffff #ccc  (los valores se leen: arriba, derecha, abajo, izquierda).

Paso 2. Editar el código de la cajita.

Necesitarás editar algunas partes del siguiente código para que funcione en tu blog. Para ello, lo copias, y pones en una nota de tu computadora (Notepad). Lo que vas a editar, es lo que he resaltado de rojo, para que puedas identificarlo fácilmente:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <div class='seguir-pfooter'><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=compartidisimo&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><h5>No olvides suscribirte, para recibir todas mis actualizaciones, directamente a tu email.</h5><p>Ingresa tu correo electrónico:</p><p><input class='campo' name='email' type='text'/></p><input name='uri' type='hidden' value='compartidisimo'/><input name='loc' type='hidden' value='es_ES'/><input class='enviar' type='submit' value='Subscribe'/></form>
<div style='clear:both;'/>
<p>Recuerda confirmar tu suscripción, haciendo click en el enlace que recibirás por email.</p></div>
</b:if>

En donde dice:
compartidisimo, pones en nombre de tu URI de Feedburner. Puedes conseguirla de varias formas, una es ir a la página de Feedburner, y luego haces click en el icono de RSS que está a un lado del nombre de tu blog, luego se abrirá una ventana con tus feeds. El nombre de la URI es el texto que aparece después de la barrita diagonal "/", en la barra de direcciones de tu navegador.

Así aparece el mío:

http://feeds.feedburner.com/compartidisimo

Por eso es "compartidisimo". Todo lo demás y que también está resaltado derojo, son los textos y puedes editarlos si deseas.

Paso 3. Añadir el código a la edición de HTML de la plantilla, para que aparezca el elemento.
Ya que editaste el código, ve a la edición de HTML de la plantilla, y con la ayuda de   ctrl   +   F , buscas la primera linea que resalté de rojo en el siguiente código, al expandir plantillas de artilugios:

<div class='post-footer-line post-footer-line-3'><span class='post-location'>
        <b:if cond='data:top.showLocation'>
          <b:if cond='data:post.location'>
            <data:postLocationLabel/>
            <a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
          </b:if>
        </b:if>
      </span> 
</div>


E inmediatamente después del div de cierre "</div>" pegas el código del paso 2, que ya editaste.


Paso 4: Guardar los cambios.
Verifica en vista previa y si todo luce bien, guarda los cambios. Aunque no verás la cajita, te asegurarás de que todo luzca bien en tu plantilla.

Últimas notas:
Hack: Si deseas evitar que se vea el borde negro alrededor del botón en IE7 (Internet Explorer 7), usa esta linea de código:

input[type="button"],input[type="submit"],input[type="reset"]{filter:chroma(color=#000000); color#090000}

...y lo agregas después de las regla de estilo de input.enviar.

Lecturas recomendadas
Cómo cambiar la configuración del feed del sitio

Imprimir artículo