Crea la cabecera principal de tu blog

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

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.

Lo ideal es desaparecer todo el bloque header-wrapper por completo, pero para hacer eso se requiere copiar todo el codigo al programa Dreamweaver una vez dentro hay una herramienta que me seleccion todo el div completo y asi puedo desaparecer manualmente todo el header-wrapper.
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'>

Aqui el ejemplo del FLASH

una vez colocado el codigo les quedara de la siguiente manera.

Entradas Relacionadas

..

..

Compatir esta publicacion:

Publicado por: Unknown | Categoria: Blogger | El: 12 agosto 2012 , A las: 7:06 p. m.