Mensaje animando a suscribirse a tu blog

Un mensaje para mostrar a tus visitas animándoles a suscribirse a tu blog.
Supongo que ya habréis visto el que uso en El Escaparate y que solo es visible cuando accedemos al blog desde alguna de las páginas de archivos o etiquetas.


El mensaje puede configurarse fácilmente mediante CSS personalizando su aspecto para conseguir que se adapte a la estética de cada blog, modificando el borde, colores, imagen o no de fondo, etc.

[1] Añadimos el CSS necesario en nuestra plantilla, siempre antes de ]]></b:skin>

.subscribe_cartel {
background: #ffc url(Aquí_la_url_de_la_imagen_de_fondo);
border: 1px solid #a6c4e1;
padding: 5px;
margin: 0 2px;
font-size: 90%;
}
.subscribe_cartel a {
text-decoration: none;
}
.subscribe_cartel a:hover {
text-decoration: underline;
}

Es en este código donde haremos los cambios oportunos para modificar el aspecto del mensaje:

background: #ffc url(Aquí_la_url_de_la_imagen_de_fondo);
Añadiremos la url de la imagen que queremos mostrar en el fondo del mensaje.
Si hemos decidido no usar una imagen y solo vamos a darle un color de fondo, dejaremos así esa línea: background: #ffc; cambiando el código por el del color que vamos a usar: Tabla de colores.

border: 1px solid #a6c4e1;
Aquí controlamos el aspecto del borde de nuestro mensaje.
Si hemos decidido no añadirle ninguna clase de borde, podemos eliminar esta línea o poner el borde en cero (0px) por si más tarde decidimos añadírselo.
Si vamos a usar nuestro mensaje con borde, escogeremos el grosor de dicho borde, modificando el "1px" por el valor que necesitemos. En "solid" conseguiremos el aspecto del borde: solid, dotted, dashed, double, etc. En "#a6c4e1" cambiamos el color del borde.

padding: 5px; margin: 0 2px;
Aquí variamos la distancia de lo que coloquemos dentro de nuestro mensaje a sus bordes "padding" y la distancia de nuestro mensaje al resto de los elementos que lo rodean "margin", lo ideal es que cada uno encuentre los valores que necesite, aunque pueden dejarse como están, al menos para la primera prueba.

font-size: 90%;
El tamaño del texto. Cambiamos el valor del porcentaje por el nuestro, mayor o menor.

Tamaño del mensaje
Si dejamos el código CSS tal como está, el tamaño del mensaje se adaptará al del lugar donde lo coloquemos. Si, por ejemplo, lo situamos en un elemento sobre las entradas, el mensaje ocupará el mismo ancho que estas, si queremos controlar su anchura, añadiremos width:300px;, o el valor que queramos para el ancho, por ejemplo, justo debajo de .subscribe_cartel {.

[2] Una vez tengamos el aspecto del mensaje más o menos decidido, hemos de usar el código HTML necesario donde vamos a mostrar el mensaje (dentro de un nuevo elemento HTML que arrastraremos luego a donde nos interese, por ejemplo, sobre las entradas.)

<div class="subscribe_cartel"><img src="URL_DE_LA_IMAGEN"/> Tu primera visita al Escaparate? <div align="center">Quizás te interese <a href="URL_DE_TU_FEED">subscribirte a mi feed</a> o recibir las<a href="URL_DE_SUSCRIPCION_POR_EMAIL"> actualizaciones por email.</a></div></div>

En "URL_DE_LA_IMAGEN" colocaremos la url de nuestro icono de suscripción.
En "URL_DE_TU_FEED" la url de Feedburner o del servicio que usemos para facilitar la suscripción. Si no usamos ningún servicio externo, colocaremos aquí el de Blogger:
http://Tu_blog.blogspot.com/feeds/posts/default
En "URL_DE_SUSCRICIPCION_POR_EMAIL" la del servicio que usemos para facilitar la suscripción por correo.

[3] Guardamos los cambios en el nuevo elemento y lo arrastramos encima o debajo de nuestras entradas; también podemos dejarlo en la sidebar.
Localizaremos ahora nuestro nuevo elemento dentro del código de la plantilla y haremos los cambios necesarios para que solo sea visible en las páginas de archivos y etiquetas, para ello vamos a necesitar expandir los artilugios y seguir las instrucciones que se explican en esta entrada anterior.