Agregar Campo para Suscripción por Correo y RSS al Blog

Esta opción, nos permitirá tener dos enlaces de suscripción para nuestros lectores, uno por correo y otro por RSS, ambos estarán en el mismo campo, lo que nos ahorrara valioso espacio ^^

Además, tendremos un icono que nos llevara a una explicación de lo que es RSS (el vínculo puede estar en tu blog o donde quieras).

Espero que les sea muy útil.

Consideraciones

Si aún no sabes que es RSS entra aqui

Para este truco necesitamos de feedburner, esto nos permitirá crear los enlaces a RSS y correo.

Guarda una copia de tu plantilla por si las moscas ¬¬ (o sea, por si la embarramos :P).

Este truco lo haremos en 3 partes:

1. Maquillaje (CSS)
2. Instalación
3. Configuración

Paso 1 Maquillaje (CSS).

Entramos a Diseño>>Edición HTML y en la plantilla buscamos (CTRL + F) ]]></b:skin> y justo antes pegamos el siguiente código:

Ver/ocultar código

/* Subscription style */
#feedlink {
font-weight: bold;
padding-left: 22px;
background: url(http://i296.photobucket.com/albums/mm171/kalsi72/ico_feed.png) no-repeat;
background-position: left center;
}

#feedform {
display: block;
margin: 7px 0 0 0;
background: url(http://i296.photobucket.com/albums/mm171/kalsi72/ico_email.png) no-repeat;
background-position: left center;
}


#feedform fieldset {
border: none;
display: inline;
overflow: hidden;
}

#feedform input {
vertical-align: middle;
display: inline;
border: none;
}

#feedemail {
background: url(http://i36.tinypic.com/68bg9j.png) no-repeat;
width: 100px;
height: 14px;
padding: 3px;
color: #666;
margin-left: 12px;
}

#feedbutton {
background: url(http://i296.photobucket.com/albums/mm171/kalsi72/signup.png) no-repeat top;
width: 68px;
height: 20px;
cursor: pointer;
margin: 0 0 0 3px;

}
#feedbutton:hover {background: url(http://i296.photobucket.com/albums/mm171/kalsi72/signup.png) no-repeat bottom}

Damos clic en vista previa y confirmamos que todo marcha bien, si no nos deja guardar, borramos cambios y comenzamos de nuevo. Si todo va bien, entonces guardamos plantilla.

Paso 2 Instalación.

Ahora vamos a Diseño>>Elementos de la página, agregamos un gadget del tipo HTML y le pegamos el siguiente código:

Ver/Ocultar Código

<a href="http://bit.ly/PvHja"><img border="0" alt="¿Qué es RSS?" style="position:absolute;top:175px; right:-15px;" src="http://i36.tinypic.com/vsjbj7.png"/></a>

<div class="widget-content">
<div id="widget_S" class="box_a">
<div>

Recibe actualizaciones por medio de <strong>RSS feed</strong> o si lo prefieres puedes recibirlas en tu  <strong>e-mail.</strong>
<br/>
<a id="feedlink" href="http://adiccionblogger.blogspot.com/feeds/posts/default">Recibir vía RSS</a>

<form id="feedform" action="http://feedburner.google.com/fb/a/mailverify" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=AdiccinBlogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<fieldset>
<input id="feedemail" value="tucorreo@mail.com" name="email" type="text"/>
<input value="AdiccinBlogger" name="uri" type="hidden"/>
<input value="en_ES" name="loc" type="hidden"/>
<input id="feedbutton" value="" type="submit"/>
</fieldset></form>
</div></div></div>

Ahora Guardamos y vemos como quedo nuestra obra de arte ^^

Ojo, puede que el icono "¿Que es RSS?" no este ubicado en donde queremos, pero no preocupeis, esto lo pueden cambiar en:

<a href="http://bit.ly/PvHja"><img border="0" alt="¿Qué es RSS?" style="position:absolute;top:175px; right:-15px;" src="http://i36.tinypic.com/vsjbj7.png"/></a>

Donde top es la distancia de arriba hacía abajo y right la distancia de derecha a izquierda.

Paso 3 Configuración

Para los enlaces tenemos que entrar a nuestra cuenta en feedburner y ahi nos vamos a Publicize>>Suscripciones por email.

Y en la parte que dice Código del formulario de suscripción ubicaremos el código que nos proporciona, este nos servirá para sustituir algunos datos en el gadget que colocamos en la instalación, así que mucha atención.

Vamos al artilugio agregado en la instalación y substituiremos lo que esta marcado en negrita.

Ver/Ocultar Código

<a href="http://bit.ly/PvHja"><img border="0" alt="¿Qué es RSS?" style="position:absolute;top:175px; right:-15px;" src="http://i36.tinypic.com/vsjbj7.png"/></a>

<div class="widget-content">
<div id="widget_S" class="box_a">
<div>

Recibe actualizaciones por medio de <strong>RSS feed</strong> o si lo prefieres puedes recibirlas en tu  <strong>e-mail.</strong>
<br/>
<a id="feedlink" href="http://adiccionblogger.blogspot.com/feeds/posts/default">Recibir vía RSS</a>

<form id="feedform" action="http://feedburner.google.com/fb/a/mailverify" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=AdiccinBlogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<fieldset>
<input id="feedemail" value="tucorreo@mail.com" name="email" type="text"/>
<input value="AdiccinBlogger" name="uri" type="hidden"/>
<input value="en_ES" name="loc" type="hidden"/>
<input id="feedbutton" value="" type="submit"/>
</fieldset></form>
</div></div></div>

El primer dato a cambiar es:

http://bit.ly/PvHja

Aquí ponemos la dirección a donde queremos que los enlace con la explicación del RSS.


Ahora vamos con el enlace a suscripción vía RSS:

http://adiccionblogger.blogspot.com/feeds/posts/default

Aquí solo tenemos que cambiar "adiccionblogger" por el nombre de tu blog.


El siguiente dato a cambiar es para la suscripción vía correo:

http://feedburner.google.com/fb/a/mailverify?uri=AdiccinBlogger

buscaremos el que corresponda dentro del código que nos da feedburner.

Ahora pasamos al siguiente dato:

tucorreo@mail.com

Este es el texto que aparecerá en la caja de suscripción, podemos escribir lo que deseemos (sólo tomen en cuenta el espacio).


Por último:

AdiccinBlogger

También lo buscaremos en el código del feedburner.

Y Listo! podemos hacer una prueba y suscribir nuestro correo para constatar que funciona perfectamente.

Pueden ver el resultado final en este mismo blog.