Mensaje de bienvenida sobre las entradas

He recibido varias consultas últimamente en las que me solicitaban la forma de mostrar un mensaje de bienvenida en la página principal.

Vamos a crear sobre las entradas una nueva sección en la que colocaremos un gadget HTML donde incluiremos nuestro mensaje de bienvenida, que solo será visible en la página principal del blog y al que daremos un aspecto diferente al resto del blog.

[1] En nuestro panel vamos a "Edición HTML" y localizamos este código sin expandir las plantillas de artilugios":

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>

[2] Justo antes de ese código, colocamos el código para la nueva sección:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section class='main' id='main-dos' showaddelement='yes'>
<b:widget id='HTML50' locked='false' title='' type='HTML'/>
</b:section>
</b:if>

[3] Guardamos los cambios.
Si ahora vamos a la parte de "Diseño" de nuestro panel, veremos la nueva sección sobre las entradas con el gadget HTML que hemos añadido:

[4] Pinchamos entonces en "editar" del nuevo gadget y colocamos algo como esto en su interior:

<div class="mensaje">

<h2>¡Bienvenido!</h2>

<img src="http://img155.imageshack.us/img155/3627/34283694.jpg"/>
<p>Bienvenido a mi blog.</p>
<p>Espero que lo que veas aquí sea de tu agrado y pases un rato agradable.</p>

<p>¡Estás en tu casa!</p>

<p>Si quieres puedes suscribirte a mi <a href="http://feeds2.feedburner.com/blogspot/hnBy">feed</a> </p>

<p>Y si necesitas contactar conmigo, puedes enviarme un <a href="mailto:lejaniaimposible@hotmail.com">email</a></p>

</div>

[5] Guardamos cambios y vamos a comprobar como se ve nuestro mensaje de bienvenida:

[6] Vamos a usar algo de CSS para personalizar el diseño del mensaje.
Como podéis ver, el contenido del mensaje de bienvenida está incluido dentro de un <div> al que hemos añadido una clase (<div class="mensaje">), usando esa clase colocaremos en el CSS de nuestra plantilla (siempre antes de ]]></b:skin>) algo como esto:

.mensaje{background:#B7D3D9;padding: 10px;font-size: 14px;}
.mensaje h2{font-size: 22px; margin: 0 auto; color: #fff; font-weight: bold;text-align: center; }
.mensaje a{font-weight: bold; color:#fff;text-decoration:underline;}

Con esto le estamos diciendo al contenido de nuestro "mensaje" que muestre un fondo de color, una separación del contenido a los bordes y que el tamaño del texto sea de 14px:

.mensaje{background:#B7D3D9;padding: 10px;font-size: 14px;}

En el div hemos incluido el título del mensaje entre <h2> y </h2> para poder controlar su aspecto.
Le damos un tamaño de texto de 22px, establecemos un margen, un color para el texto y le indicamos que se vea centrado y en negrita:

.mensaje h2{font-size: 22px; margin: 0 auto; color: #fff; font-weight: bold;text-align: center; }

Añadimos también una línea de código que controle el aspecto de los enlaces a la vista.
Serán de color blanco y estarán en negrita, mostrándose además subrayados:

.mensaje a{font-weight: bold; color:#fff;text-decoration:underline;}

[7] Guardamos los cambios en la plantilla y comprobamos el aspecto que va cobrando nuestro mensaje.

[8] Podríamos añadir una imagen dentro del div para que su diseño quedase aún mas llamativo, incluso podríamos usar esa imagen como enlace.

Editamos de nuevo el gadget y colocamos la url de la imagen después de su título:

<div class="mensaje">

<h2>¡Bienvenido!</h2>
<img src="http://img155.imageshack.us/img155/3627/34283694.jpg"/>
<p>Bienvenido a mi blog.</p>
<p>Espero que lo que veas aquí sea de tu agrado y pases un rato agradable.</p>

<p>¡Estás en tu casa!</p>

<p>Si quieres puedes suscribirte a mi <a href="http://feeds2.feedburner.com/blogspot/hnBy">feed</a> </p>

<p>Y si necesitas contactar conmigo, puedes enviarme un <a href="mailto:lejaniaimposible@hotmail.com">email</a></p>

</div>

[9] Ya solo nos quedaría añadir, justo a continuación del código CSS que antes colocamos en la plantilla, una línea más de código para controlar la posición de la imagen y añadirle un borde con una ligera separación de este a la imagen:

.mensaje img{float: right;border: 1px solid #fff;padding: 2px;}