Primero, el HTML básico que muestra el título. Debe presentarse con la etiqueta <h1>
<h1>Título del blog</h1>
Pero también queremos que el título sea un enlace a la página inicial de nuestro blog:
<h1><a href="http://url_inicio" title="Título del blog">Título del blog</a></h1>
Que suele escribirse con las etiquetas propias de cada CMS (ejemplo Blogsome):
<h1><a href="{$siteurl}" title="{bloginfo show='name'}">{bloginfo show='name'}</a></h1>
Y por último (cómo mínimo) lo englobamos en un bloque que consideramos la cabecera (Como bien indica Marcoss, no es necesario este div si solo va a contener el h1. Su utilidad se ve mejor plasmada si va a englobar más elementos - una descripción, por ejemplo - , o si se requiere para obtener más posibilidades de diseño):
<div id="cabecera">
<h1><a href="{$siteurl}" title="{bloginfo show='name'}">{bloginfo show='name'}</a></h1>
</div>
A partir de este HTML, podemos personalizar título y cabecera a nuestro antojo con CSS con colores, bordes, etc. Por ejemplo:
#cabecera {
padding: 0 0 10px;
border: 1px solid #666;
}
h1 {
margin: 0;
padding: 0px 10px;
font-size: 2.5em;
font-weight: normal;
}
h1 a {
color: #666;
}
Si quisieramos poner una imagen como fondo de la cabecera (teniendo en cuenta los atributos de background):
#cabecera {
background:url("http://url_imagen.png")bottom repeat-x;
}
En Free Web Page Headers podemos encontrar muchas imágenes para cabeceras.
Subiendo un nivel de dificultad, pasaríamos a sustituir el título por una imagen que muestra el título (lo cual ofrece infinitas posibilidades estéticas con un programa de edición de imágenes tipo Photoshop o Gimp, y una escogida colección de fuentes). Es la llamada técnica de reemplazo de textos, por ejemplo:
h1 {
background: url("http://url_imagen.png") no-repeat;
height: ?px; /* altura de la imagen */
text-indent: -9999px;
}
h1 a {
display: block;
}
Aunque también existe opción con javascript: Personaliza el titulo de tu sitio con javascript.
<div id="cabecera" onclick="window.location='http://www.stanmx.com/';" title="Título del blog">
<h1><span>Titulo del blog</span></h1>
</div>
h1{
background: transparent url("http://url_imagen.png") no-repeat top;
width: ?px;
height: ?px;
}
h1 span {
display:none;
}
Aunque hay que advertir que estas dos opciones presentan problemas de accesibilidad cuando no es muestran las imágenes o no funciona javascript, respectivamente.
Sindica el feed