Instala una caja de suscripción personalizada

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.

Hace unas semanas vimos cómo personalizar la caja de suscripción por mail de Feedburner, ahí lo que hicimos fue alterar la apariencia con colores de fondo. Pero se me ocurrió que podría verse mejor con la forma de una caja de búsqueda, de modo que ocupe poco espacio y llame la atención, así que hice una plantilla para que quede así:

Primero debes activar este servicio en Feedburner, sino sabes cómo lee este post.

Luego en Diseño > Edición de HTML y antes de ]]></b:skin> pega lo siguiente:

/*----------------RSS BOX----------------*/
#rssbox {
margin: 10px 0 10px 0;
height:28px;
padding:10px;
width:200px;
float:center;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBzvNkXK89d4HQ_TeycaYW07N-Zua5RbVQng5hcK1YxwBZ_6FsD3L2XUsQIbdfo5z7IKUF8gra93WBok4w87dUDMpD4uAl0SisXd7w1QVQT2SHsPTYQ2iFIRDHcOVYozRa4MWVpkZ50rU/) no-repeat;
border:0px solid #e4b5c5;
}

#rssbox p {
margin: 0;
font-size: 85%;
}

#rssboxsubmit {
margin: 14px 20px 10px 55px;
float: center;
background:#fff;
border: 1px eroded #da4b02;
font: bold 100% ;
color: #000;
height:20px;
}

.rssbox {
color: #ccc;
font-size: 100%;
}

Ahora en un elemento HTML/Javascript pega esto:

<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">
<span style=" white-space: pre-wrap;"></span></div>
<div id="rssbox">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=CiudadBlogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="rssbox" name="email" onfocus="if(this.value=='Ingresa tu correo...')this.value=''" style="height: 14px; margin-left: 34px; margin-top: 0px; width: 135px;" type="text/" value="Ingresa tu correo..." />
<input name="uri" type="hidden" value="CiudadBlogger" /><input name="loc" type="hidden" value="es_ES" /><input id="rssboxsubmit" type="submit" value="Suscribir" /></form>
</div>

Ya sólo cambia lo que está en rojo por el nombre de tu feed, en mi caso es CiudadBlogger. Sino sabes cuál es, haz click en Editar detalles del feed y copia la última palabra de Feed Adress.

Si ves que el botón que dice Suscribir no está centrado entonces cambia donde dice 55px por otro valor (está abajo de #rssboxsubmit) si lo quieres más a la derecha pon un valor más alto, y si lo quieres más a la izquierda entonces pon un valor más bajo.

Como sé que quizá no a todos les guste el color naranja de la caja hice otras de distintos colores para que escojas el que más les guste. Sólo haz click derecho sobre la imagen para copiar la dirección de la imagen y cambia la URL que está en color verde dentro del primer código.