Por defecto, el Header de Blogger no admite demasiadas posibilidades, podemos definir una imagen de fondo, un banner, un texto, no mucho más. En cuanto queremos intentar algo diferente, nos vemos en dificultades así que, para evitar lidiar con los códigos, lo mejor es elimiinar ese widget y empezar desde cero.
Normalmente, sin expandir la plantilla, veremos esto:
Normalmente, sin expandir la plantilla, veremos esto:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='nombre sitio (cabecera)' type='Header'/>
</b:section>
</div>Vamos a cambiarlo así:
<div id='header-wrapper'> <b:section class='header' id='header' /> </div>
De esta forma, eliminamos el gadget que, llegado el caso, podemos agregar en cualquier otro momento, y tenemos la misma sección que teníamos antes, el mismo rectángulo en la parte superior del blog. Ahora, bastaría ir agregando elementos HTML o cualquier otro, tal mo hacemos en la sidebar.
Por ejemplo, vamos a colocar allí un banner de Flash; en este caso, usando las facilidades de una herramienta online como FlashVortex.
Los archivos de Flash son archivos de extensión SWF y como no es posible alojarlos en Blogger mismo, deberemos subirlos a otro servidor, por ejemplo, a Google Sites. Tendremos entonces una URL como esta:
Por ejemplo, vamos a colocar allí un banner de Flash; en este caso, usando las facilidades de una herramienta online como FlashVortex.
Los archivos de Flash son archivos de extensión SWF y como no es posible alojarlos en Blogger mismo, deberemos subirlos a otro servidor, por ejemplo, a Google Sites. Tendremos entonces una URL como esta:
http://sites.google.com/site/misitio/mibanner.swf
Ahora, en Diseño, agregamos un elemento HTML y allí pondremos el código:
<object id="bannerSWF" data="http://sites.google.com/site/misitio/mibanner.swf" width="valor" height="valor" type="application/x-shockwave-flash"> <param value="http://sites.google.com/site/misitio/mibanner.swf" name="movie"/> <param value="transparent" name="wmode"/> <param value="always" name="allowScriptAccess"/> </object>
donde la URL la colocamos dos veces, en el atributo data y en el atributo movie para que se vea en cualquier navegador y reemplazamos los atributos width y height por los valores del ancho y alto de la animación.
Eso es todo.
Si hablamos de una plantilla mínima, no hace falta modificar el CSS. En todo caso, las definiciones elementales son las siguientes:
Eso es todo.
Si hablamos de una plantilla mínima, no hace falta modificar el CSS. En todo caso, las definiciones elementales son las siguientes:
#header-wrapper {
margin: 0 auto;
width: valorpx; /* el valor del ancho de nuestro sitio */
}
#header {
text-align: center;
}
7 comentarios:
Genial maestro :) y buen dato esa página de FlashVortex :P
Excelente Muchísimas gracias por la explicas ion
Buen sitio, FlashVortex, fácil de usar, habría que mirarlo con más detalle.
Vale capi, esta vez me estas viniendo al pelo. Digamos que me he decidido a crear otro blog, el de chusmerio variado, digamos que he mezclado tus explicaciones añadido la imagen del titulo que he creado a la antigua usanza y un widget, donde no quiero que se repita la imagen del titulo (no se leería bien) y aquí mi pregunta se podría utilizar un banner creado para ese widget. (echa un vistazo aquí cuando tengas tiempo y me entenderás si no me he explicado bien http://lavacarebelde.blogspot.com/)
¿Quieres usar una imagen de fondo o banner para es widget debajo del header? Si es eso, la respuesta es si. Veo que usas un elemento Text; puede ser un elemento HTML da lo mismo.
La imagen de fondo la pones así:
#Text1 {background: transparent url() no-repeat left top;}
Puede requerir alguna propiedad extra, dependerá de la imagen.
Si, justo es ese. Use un elemento de texto porque lo único que queria poner era texto, el problema es que queda muy soso y en cuanto que pongo alguna imagen por pequeña que sea lo descuadra, por eso mi pregunta. Voy a intentarlo como me dices y ya te contare.
Yo siempre uso elementos HTML, son más flexibles pero, puede usarse cualqueira de ellos ya que lo que quieres hacer, se hace con CSS así que da lo mismo. Sería bueno que le dieras una altura a ese elemento #Text1.
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...