Imagen en la cabecera con enlace a otra página

Crea un blog solo para pruebas.
Tu plantilla original estará a salvo
y una vez comprobado el resultado
podrás hacer los cambios con seguridad...

Me han preguntado varias veces como añadir una imagen en la cabecera del blog cuyo enlace lleve a otra página.

Esto que puede parecer raro, tiene una explicación muy sencilla, pues hay algunas personas que tienen un blog o más dependientes de otro principal y lo que quieren es usar el header de los secundarios como enlace al principal.




[1] En nuestro panel de Blogger vamos a "Edición HTML" y localizamos el código que corresponde a la cabecera de la plantilla:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Mi blog (cabecera)' type='Header'/>
</b:section>
</div>

[2] Vamos a eliminar ahora el gadget "Header" que vemos desde diseño desde donde subimos la imagen de cabecera al blog y lo sustituiremos por un gadget HTMLJavascrip.
El código anterior debe de quedarnos así:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='HTML90' locked='false' title='' type='HTML'/>
</b:section>
</div>

[3] Si la cabecera tiene bordes añadidos (como es el caso de la Mínima) y queremos anularlos, localizamos este código más arriba, en la parte del CSS:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

En las dos líneas que están resaltadas en negrita, dejamos el valor del borde en 0px o directamente borramos las dos líneas por completo.

[4] Guardamos los cambios y Blogger nos mostrará este mensaje de advertencia:

Pinchamos en "confirmar y guardar" y nos dirigimos a la parte de "Edición" de nuestro panel, donde tendremos que ver ahora el gadget HTML en el lugar que antes ocupaba el elemento de la cabecera:

 

[5] Por último pinchamos en ese gadget en "Editar" y pegamos este código dentro:

<a href='aquí-la-url-de-la-página-a-enlazar'>
<img border="0" height="196" src="aquí-la-url-de-la-imagen-de-cabecera" width="760"/></a>

En width colocamos el ancho de la imagen en pixeles y en height el alto.