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;}
Blogger ha añadido una nueva función a nuestro panel. 
En algunas páginas como 
Vitua Radio
Foro SpamLoco
Seguir el Escaparate
