Cambiar imágen de fondo y agregar un encabezado

A pesar de las innumerables plantillas que nos ofrece Blogger, siempre es conveniente personalizarlas de acuerdo a las necesidades de cada blog. La imágen del fondo y el encabezado son vitales para dar a entender un concepto o una idea del blog. En el ejercicio de hoy aprenderán a a cambiar la imágen de fondo y a agregar el encabezado que quieran. En el caso de este blog, la imágen que he utilizado para el fondo se encuentra en la dirección http://photos1.blogger.com/blogger/6612/3401/1600/fondoblog.jpg La imágen que he utilizado para el encabezado se encuentra en la dirección http://photos1.blogger.com/blogger/6612/3401/1600/encabezado.jpg Deben buscar la parte de la plantilla en la que aparece el siguiente código: body { background: #fff; margin:0; padding:40px 20px; font:x-small Georgia,Serif; text-align:center; color:#333; font-size/* */:/**/small; font-size: /**/small; } Y modificarla por el siguiente(cambien la dirección en la que tienen su imagen) : body { background-image: url(http://photos1.blogger.com/blogger/6612/3401/1600/fondoblog.jpg); margin:0; padding:40px 20px; font:x-small Georgia,Serif; text-align:center; color:#333; font-size/* */:/**/small; font-size: /**/small; } Hasta este momento sólo han agregado la imágen de fondo. Para lograr que en el encabezado se pueda sobreescribir es decir, que salga el título y la descripción del blog, se necesita dejar la imagen del encabezado fija en su posición. Para generar imágenes fijas deben buscar el siguiente código: body { background-image: url(http://photos1.blogger.com/blogger/6612/3401/1600/fondoblog.jpg); margin:0; padding:40px 20px; font:x-small Georgia,Serif; text-align:center; color:#333; font-size/* */:/**/small; font-size: /**/small; } a:link { color:#58a; text-decoration:none; } a:visited { color:#969; text-decoration:none; } a:hover { color:#c60; text-decoration:underline; } a img { border-width:0; } /* Header ----------------------------------------------- */ Y cambiarlo por este, que agrega la clase Fija: body { background-image: url(http://photos1.blogger.com/blogger/6612/3401/1600/fondoblog.jpg); margin:0; padding:40px 20px; font:x-small Georgia,Serif; text-align:center; color:#333; font-size/* */:/**/small; font-size: /**/small; } a:link { color:#58a; text-decoration:none; } a:visited { color:#969; text-decoration:none; } a:hover { color:#c60; text-decoration:underline; } a img { border-width:0; } #Fija { position:absolute; top:0; left:0; } /* Header ----------------------------------------------- */ Ahora, para colocar la imagen en el encabezado, busquen este código: <div id="header"> <h1 id="blog-title"> <ItemPage><a href="<$BlogURL$>"></ItemPage> <$BlogTitle$> <ItemPage></a></ItemPage> </h1> <p id="description"><$BlogDescription$></p> </div> Y cambiénlo de forma que el texto de la descripción se lea encima de la imagen del encabezado (Header). Esto se logra colocando este código en lugar del anterior: <img style="float:left; "src="http://photos1.blogger.com/blogger/6612/3401/1600/encabezado.jpg" border="0" alt="" /> <div id="Fija"> <div id="header"> <h1 id="blog-title"> <ItemPage><a href="<$BlogURL$>"></ItemPage> <$BlogTitle$> <ItemPage></a></ItemPage> </h1> <p id="description"><$BlogDescription$></p> </div> </div>