Personalizar la cabecera en las Vistas Dinámicas de Blogger

Es cierto que las nuevas plantillas de Vistas Dinámicas de Blogger han gustado a la mayoría por los efectos que tienen para mostrar las entradas y la forma como se navega en ellas. Pero también es cierto que a muchos ha desilusionado el no poder personalizarlas como quisieran.

Por suerte no todo está perdido, pues aunque no podemos agregar gadgets en ella, sí podemos modificar ciertas áreas para que tu blog no sea vea igual al de todos. Así pues veremos cómo ir transformando las partes que se puedan; y empezaremos con esta entrada con la que conseguiremos personalizar la cabecera del blog en las plantillas de Vistas Dinámicas.

La cabecera es basicamente lo que define la imagen de todo blog pues ahí se encuentra nuestro logotipo, así que pasaremos de esto:

A esto: [Ver blog de pruebas]

Lo único que necesitamos es la imagen de nuestra cabecera y nada más. Si aún no tienes una aquí hay 50 cabeceras de dónde escoger.
Si usas la nueva interfaz de Blogger entra en Plantilla | Personalizar | Avanzado.
Si usas la vieja interfaz de Blogger entra en Diseño | Diseñador de plantillas | Avanzado.

Ahora ahí, donde dice Añadir CSS agrega esto:

.header-bar {
background-color:#738a94 !important; /* Color de fondo */
background-image:url(URL de la imagen) !important; /* Imagen de fondo */
background-repeat:no-repeat; /* Si quieres que la imagen se repita cámbialo por repeat */
height:149px !important; /* Altura de la cabecera */
border-bottom:25px solid #3b464b; /* Borde inferior */
}
#header .header-bar .title h1, #header .header-bar .title h3 {display:none;}
#header a:hover {text-decoration:none !important;}
#main {margin-top:115px !important;} /* Distancia entre la cabecera y el contenido */

Cambia la URL de la imagen donde se indica y personaliza lo demás que se indica en color verde.

Algunas propiedades tendrás que descubrirlas por ti mismo pues aquí no hay valores específicos ya que depende de cada caso. Por ejemplo, la altura debe ser aproximadamente 20px menos que la altura de la imagen, pero si la imagen es un pattern pequeño entonces la altura la puedes establecer a la medida que quieras.

Yo le he puesto un borde inferior, pero puedes quitarlo, hacerlo más delgado, o más grueso, eso ya es cuestión de gustos.

Como hemos establecido una altura para la cabecera y le hemos puesto (o no) un borde, entonces es muy probable que las entradas y el pequeño menú se hayan tapado, así que para que eso no suceda hemos establecido un margen en #main, ahí el valor también tendrás que irlo descubriendo, sólo es cuestión de probar varios valores hasta que quede tal como te gusta.

¿Sencillo? Sí, mucho, pero lo mejor de todo es que con este pequeño cambio el blog comenzará a verse con identidad propia. Y después... bueno, ya veremos después qué se nos ocurre para irle dando forma a nuestro blog.