Algo fundamental en un blog es el uso de una atractiva cabecera, un logotipo curioso o simplemente un título especial. En muchas ocasiones nos preguntamos si añadir una imagen gif (ya sea con o sin movimiento) o con cualquier otro formato en la cabecera o header del blog es posible.
Y, aunque previamente aprendimos a mostrar en la cabecera, un fondo de imagen en movimiento, no hemos visto aún la forma de hacerlo con una imagen en particular.
Busca este bloque y añade las líneas que ves en color verde:
#header-wrapper {
visibility: hidden; display: none; height: 0px;
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
Ahora busca esta línea:
<div id='header-wrapper'>
Y añade este código justo encima:
<center><a href='URL DE LA PAGINA'><img title="Inicio" src='URL DE LA IMAGEN'/></a></center>
Sustituye URL DE LA PAGINA con la dirección de tu blog, de manera que al hacer clic sobre la imagen, ésta nos lleve al inicio de la bitácora.
Reemplaza URL DE LA IMAGEN por la dirección de tu imagen o logotipo [+].
Las etiquetas <center> y </center> al principio y al final del código, centrarán la imagen. Para alinearla a la izquierda simplemente debes borrarlas. Si por el contrario, prefieres alinearla a la derecha, cámbialas por <right> y </right>.
Haz vista previa para ver el resultado y guarda la plantilla para terminar...
Graciasssss!!! Andaba buscando esto y en el unico sitio que lo encuentro es acá.
Lo dicho, eres el mejor.
Arián, entonces me alegro de haberte podido ayudar. El diseño del blog es algo muy importante, y la cabecera forma un gran papel ;).
Preferiría explicarlo en una entrada, 馬丁 ya que conozco un procedimiento muy sencillo y que no da problemas al usar navegadores distintos. Esto era una de las cosas que antes tenía en El Balcón, en su diseño anterior por lo que entiendo perfectamente tu comentario.
馬丁, ¿Tu nueva plantilla está diseñada por tí / descargada o es una de las nuevas que ofrece blogger? Necesito saberlo para editar el tutorial.
Buenas noticias 馬丁!
No hace falta que esperes a que publique la entrada. En cuanto lo desees, envíame un enlace a tu nueva plantilla y directamente veo los parámetros utilizados para poderte mandar los pasos a seguir en un comentario.
Gracias a la imagen que me enviaste, se me ocurrió una manera muy sencilla de hacer que la cabecera tenga un ancho total y que el blog cargue de una manera rapidísima.
Abrazos!
馬丁, acabo de terminar tu consulta. Puedes descargar la plantilla aquí. Edité varios parámetros (márgenes, fondos y anchos) para que se visualice correctamente en todos los navegadores.
Pruébala haber si te gusta :D. Recuerda que debes introducirla en tu blog con la plantilla de artilugios expandida.
Es cierto, 馬丁. Prueba con este otro enlace: [Descargar]
馬丁, encuentra esta línea:
background:url("http://img189.imageshack.us/img189/1493/78735936.png") no-repeat scroll 0 0 #102334;
#102334 es el color de fondo (azul). La imagen de la cabecera tiene una franja azul oscuro y el fondo es del mismo color, de manera que al unirse no se percibe la diferencia entre el fondo y la cabecera.
Para cambiarlo, utiliza la tabla de colores y edita dicha franja azul del header, cambiándole el color.