Desde que modifiqué el aspecto del header del Espacio de tecnologia y educación, son muchos los que me preguntan como hacer que la cabecera del blog ocupe todo el ancho de la pantalla, tal como está en mi blog.
En realidad es un "efecto óptico" ya que el tamaño de la cabecera es de unos 800 pixeles. Lo que hace que parezca que ocupa todo el ancho de la pantalla, es una imagen aplicada en el fondo de la página.
A continuación voy a explicar paso a paso los cambios necesarios para darle este aspecto al header, con la única intención de que le sirva de orientación para sus propios "trabajos".
[1] Antes de empezar les aconsejo crear un blog de pruebas con la plantilla Mínima de Blogger, entre otras cosas porque es la que voy a usar en este ejemplo.
[2] Vamos ahora a ocultar la Navbar de Blogger.
[3] Preparamos la imagen para añadir en el fondo del blog, (EDITAN O DISEÑAN UNA EN PHOTOSHOP) lo que tampoco tiene porque ser algo complicado para los que no dominamos el diseño de imágenes pueden utilizar Paint, que como saben viene incluido en Windows.
[4] Subimos la imagen a un alojamiento apropiado (en mi caso yo tranjo con http://imageshack.us/ para obtener su url.
[5] Vamos en nuestro panel a la parte de Edición HTML y localizamos esta sección del código de la plantilla:
body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
Incluimos la url de la imagen en la línea del background de esta manera:
body {
background:$bgcolor url(http://img27.imageshack.us/img27/5118/dibujocewuio.jpg) repeat-x ;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
[6] Algo más abajo de esa parte de la plantilla, localizamos el #header-wrapper { y el #header {, en ambas partes de código veremos una línea como esta:
border: 1px solid $bordercolor;
tendremos que cambiar el valor 1px por 0px para anular el borde del header.
Guardamos cambios y tendremos entonces algo como esto:
[3] Preparamos la imagen para añadir en el fondo del blog, (EDITAN O DISEÑAN UNA EN PHOTOSHOP) lo que tampoco tiene porque ser algo complicado para los que no dominamos el diseño de imágenes pueden utilizar Paint, que como saben viene incluido en Windows.
[4] Subimos la imagen a un alojamiento apropiado (en mi caso yo tranjo con http://imageshack.us/ para obtener su url.
[5] Vamos en nuestro panel a la parte de Edición HTML y localizamos esta sección del código de la plantilla:
body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
Incluimos la url de la imagen en la línea del background de esta manera:
body {
background:$bgcolor url(http://img27.imageshack.us/img27/5118/dibujocewuio.jpg) repeat-x ;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
[6] Algo más abajo de esa parte de la plantilla, localizamos el #header-wrapper { y el #header {, en ambas partes de código veremos una línea como esta:
border: 1px solid $bordercolor;
tendremos que cambiar el valor 1px por 0px para anular el borde del header.
Guardamos cambios y tendremos entonces algo como esto:
[7] Vamos a colocar ahora la imagen en la cabecera desde la parte de Diseño de nuestro panel.
En mi caso he hecho una (ADOBE PHOTOSHOP CS5) con el mismo color de fondo que la imagen que colocamos antes en el body (aunque no es imprescindible ya que esto dependerá del diseño de cada uno) para obtener así la apariencia de header con "ancho total". Está en formato JPEG y tiene unas dimensiones de 660 x 145 pixeles.
[8] Si en este punto miramos como está quedando nuestro diseño, comprobaremos que la nueva imagen de cabecera, no se ajusta del todo a la imagen de fondo:
[9] Volvemos a Edición HTML y localizamos de nuevo la sección del CSS que corresponde al header:
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:0px solid $bordercolor;
}
Y le hacemos algunos cambios para ajustar la cabecera:
#header-wrapper {
width:660px;
margin: 30px auto 0px;
padding-bottom: 25px;
border:0px solid $bordercolor;
}
Resultado:
[10] Por último vamos a incluir el código CSS necesario para el menú que irá sobre la cabecera y el buscador que estará incluido en él.
1-Copiamos y pegamos antes del ]]></b:skin> del código de la plantilla:
/* Menu Navbar---------------------*/
.pro15 {padding:0 0 0 10px; margin:0; list-style:none; height:30px; }
.pro15 li {float:left;}
.pro15 li a {display:block; float:left; height:30px; line-height:30px; color:#fff; text-decoration:none;font-family:arial, verdana, sans-serif; text-align:center; padding:0 0 0 10px; cursor:pointer; font-size:12px;font-weight: bold;}
.pro15 li a b {float:left; display:block; padding:0 15px 0 8px; color:#fff;}
.pro15 li a:hover {color: #fff; text-decoration: underline;}
.pro15 li a:hover b { color:#fff;text-decoration: underline;}
.pro15 li a em {display:block;float:left;width:15px; height:30px;}
/* Buscador ---------------- */
#search-btn {background: #008083;color: #ffffff;padding: 1px;margin: 0px 0px 0px 3px;
border: 2px solid #000;}
#search-box { width: 160px; border: 2px solid #196D81;padding: 1px;}
2- Localizamos ahora más abajo esta línea en el código de la plantilla:<div id='header-wrapper'>
Justo sobre esa línea, pegamos el código para mostrar el menú (es en este código donde tendremos que incluir los enlaces):
<ul class='pro15'>
<li><a href='#'><b>Inicio</b></a></li>
<li><a href='#'><b>Suscribe</b></a></li>
<li><a href='mailto:tucorreo@hotmail.es'><b>Contacto</b></a></li>
<li><a href='#'><b>Sobre mi</b></a></li>
<li><a href='#'><b>Archivos</b></a></li>
<li><form action='/search' id='searchthis' method='get' style='display: inline;'><input id='search-box' name='q' type='text'/><input id='search-btn' type='submit' value='Buscar'/></form></li>
</ul>
<li><a href='#'><b>Inicio</b></a></li>
<li><a href='#'><b>Suscribe</b></a></li>
<li><a href='mailto:tucorreo@hotmail.es'><b>Contacto</b></a></li>
<li><a href='#'><b>Sobre mi</b></a></li>
<li><a href='#'><b>Archivos</b></a></li>
<li><form action='/search' id='searchthis' method='get' style='display: inline;'><input id='search-box' name='q' type='text'/><input id='search-btn' type='submit' value='Buscar'/></form></li>
</ul>
Resultado final:
Notas
"Como le dije al principio de la entrada, esto pretende ser solo una orientación para nuestros propios diseños. He puesto las medidas de las imágenes que he usado porque en función de esas medidas es como he añadido los valores necesarios para "encajar" el header, si usas otras medidas para las imágenes ten en cuenta que los valores de padding y margin en el header-wrapper también serán distintos"
Gracias...espero ver los logros....cuiden su NOTA comentando...!
