Poner caja de suscripción con imagen en el blog.

Me preguntaban el otro día cómo podían poner una caja de suscripción en la que podamos ponerle la imagen que queramos. Los gadgets que nos ofrece Blogger son bastantes sencillos pero fácilmente lo podemos modificar para que dentro de ese gadget, o el mismo gadget, se adapte a nuestros gustos, sin perder su utilidad práctica.

Personalizarlo no nos tomará mucho tiempo, y el resultado es bastante bueno.

Para ello, necesitamos tener ya elegida la url de la imagen que vamos a poner con anterioridad, que será la que pongamos como fondo del gadget. Quienes preguntaban querían poner de fondo la imagen de su perfil. Se puede poner cualquier imagen. Hecho esto, entramos en Diseño, Añadir Gadget, Html, y allí pegamos el siguiente código:

<center><form style="border:1px solid #fff;padding:3px;text-align:center; width:auto; height:auto; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY4GOUA7g31jtfy4HngnW1uAI2tsZBmgGsPjPddHnVGcWD9Ys7H08K99cPYEi4JPHqP3_xEFuyQ8q2CovWEmMWVOJsh4FfDChrrQi-CkIqsMBOXe7mikisMi3N_8daKCBlWGAJ6fPBTaw/s675-Ic42/bloger%252526bloger.jpg) no-repeat 0 10px" action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=BlogerBloger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Recibe las últimas actualizaciones<br />Directamente en tu blog</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="BlogerBloger" name="uri"/><input type="hidden" name="loc" value="es_ES"/><input type="submit" value="¡Hecho!" /></form></center>

Cambien lo que está en rojo por la dirección del feed de su blog, Puedes consultar el feed de tu blog entrando en FeedBurner con tu misma cuenta de Google. Cambia lo que esta resaltado en verde por la url de tu imagen. Si no sabes cómo obtener la url de una imagen, aquí te digo cómo. Donde pone  width:auto;  height:auto; es el alto y ancho de la imagen que pondrás como fondo, y que, por defecto, se ajustará al gadget donde lo pongas. Si quieres personalizarlo a tu gusto o de acuerdo a la medida que quieras, solo debe reemplazar auto por los valores que tenga la imagen. De modo que quede así:  width:750px; height:200px; Si quieres que las letras queden un poco más a tu derecha, cambia center por right o left para ponerlo a la izquierda. Cambia donde pone Recibe las últimas actualizaciones  <br /> Directamente en tu blog por la leyenda que quieras, teniendo en cuenta de no eliminar <br /> que es lo que le da un salto de línea a la frase. Si la eliminas las palabras no entrarán en la imagen. Recuerda que debes la dirección de tu blog, y listo.

Puedes ver el gadget al final del blog, y si, de paso, quieres probarlo, suscríbete.

Luego me cuentas.