Lo primero que intentaran hacer es editar la cabecera de su blogger, queriéndole colocar una imagen o logo de su empresa, con este tutorial podrán colocar una imagen o flash, de acuerdo a sus gustos.
Para empezar tenemos que alojar la imagen que queremos en algún alojamiento de archivos yo uso siempre tinypic, Imageshack o el picasa y nunca me ha dado problemas.
Cuando tengas tu imagen alojada copias su ruta o la llamada URL.
Si vas a empezar en el mundo de la edicion de blogger o webmaster, recomiendo que uses el Navegador Chrome - Google. Tiene muchas utilidades que te sorprendera.
Vas al panel de control de blogger pinchas en: Plantilla >> Edición de HTML >> Continuar >> Expandir plantillas de artilugios
Pero como la mayoria edita su blogger desde la misma pagina entonces la manera mas rapido es agregar el display:none; en los css de esta manera desaparecera aparentemente todo el header y agregaremos otra cabecera mejorada.
Puedes desaparecer la linea numero 2 que es texto adicional si deseas.
Para empezar tenemos que alojar la imagen que queremos en algún alojamiento de archivos yo uso siempre tinypic, Imageshack o el picasa y nunca me ha dado problemas.
Cuando tengas tu imagen alojada copias su ruta o la llamada URL.
Si vas a empezar en el mundo de la edicion de blogger o webmaster, recomiendo que uses el Navegador Chrome - Google. Tiene muchas utilidades que te sorprendera.
Buscamos el siguiente código:
En el mismo navegador que estas presionas con el teclado control F, te saldra una pequeña ventanita de buscador en donde escribiras esto: #header-wrapper esta es la palabra clave que buscaras. Y encontraras algo parecido al codigo de abajo:#header-wrapper {
width:880px;
margin:0 auto;
border:1px solid #fff;
puede haber:mas estilos;
}
Reemplazamos ese codigo por este
- Lo que hice fue agregar la linea numero 2 con display:none;.
- En la linea numero 10 reenplazan http://URL DE TU IMAGEN por la URL de su imagen.
Pero como la mayoria edita su blogger desde la misma pagina entonces la manera mas rapido es agregar el display:none; en los css de esta manera desaparecera aparentemente todo el header y agregaremos otra cabecera mejorada.
#header-wrapper {
display:none;
width:880px;
margin:0 auto;
puede haber:mas estilos;
}
.cabecera {
margin: 0px auto;
width: 888px; /*Ancho de su cabecera*/
background: url(http://URL-DE-TU-IMAGEN) no-repeat; /*URL de tu imagen*/
height: 200px; /*Altura de su cabecera*/
overflow: hidden;
}
.cabecerat {
margin-left: 30px; /*posicion lateral del texto*/
margin-top: 80px; /*posicion superior del texto*/
position: absolute;
font-weight: bold;
color: #f5ff00;
font-size: 40px; /*tamaño de fuente del texto*/
font-family: 'Droid Serif', Verdana, Arial, Helvetica, sans-serif; /*Tipo de fuente del texto*/
text-shadow: 4px 5px 5px #CCC;
}
Insertando ultimo codigo
Ahora en el mismo navegador presionas con el teclado control F, te saldra una pequeña ventanita de buscador en donde escribiras esto:<div id='header-wrapper'>Luego que encontrastes header-wrapper lo reemplazas con lo siguiente:
Puedes desaparecer la linea numero 2 que es texto adicional si deseas.
<div class="cabecera"> <div class="cabecerat">Titulo Adicional</div> </div> <div id='header-wrapper'>
Colocando un archivo Flash
Solo deveras agregar el siguiente codigo, como te daras cuenta reemplace el texto por el archivo flash, en la linea numero 2. En esta linea 2 buscas la url del archivo flash en mi caso es http://www.flashvortex.com/examples/289.swf y lo reemplazar por la url de tu flash, deacuerdo a eso varian la altura y el ancho (height='110' width='880')<div class="cabecera"> <EMBED align='top' height='110' width='880' pluginspage='http://www.macromedia.com/go/getflashplayer type=application/x-shockwave-flash' quality='high' src='http://www.flashvortex.com/examples/289.swf' wmode='transparent'/> </div> <div id='header-wrapper'>
