El problema básico del header por defecto de Blogger es que el código es automático y por lo tanto, poco flexible. Por ejemplo, cuando usamos una imagen de fondo, se coloca dentro de una etiqueta IMG y por lo tanto, se hace muy complicado modificarla para que varie. Las primeras plantillas de Blogger no tenían esta dificultad ya que no tenían previsto el uso de imágenes y eso, en definitiva, hacía que fuera más sencillo modificarlas.
Así que, para resolver este problema y todos los asociados con el manejo de imágenes dentro del header, lo mejor es eliminar su contenido y colocar un código elemental que nos permitirá personalizarlo como se nos de la gana.
Expandiendo los artilugios, buscamos esto:
Así que, para resolver este problema y todos los asociados con el manejo de imágenes dentro del header, lo mejor es eliminar su contenido y colocar un código elemental que nos permitirá personalizarlo como se nos de la gana.
Expandiendo los artilugios, buscamos esto:
<b:section class='header' id='header'> <b:widget id='Header1' locked='true' title='elTitulo' type='Header'> ... y vamos a eliminar todo lo que esté acá adentro ... </b:widget> </b:section>
Luego reemplazaremos eso que eliminamos por el código simplificado y quedaría esto:
<div id='header-wrapper'> <b:section class='header' id='header'> <b:widget id='Header1' locked='true' title='elTitulo' type='Header'> <b:includable id='title'/> <b:includable id='description'/> <b:includable id='main'> <div id='header-inner'> <b:if cond='data:blog.url != data:blog.homepageUrl'> <a expr:href='data:blog.homepageUrl'> </a> </b:if> </div> </b:includable> </b:widget> </b:section> </div>
Como no vamos a usar el título ni la descripción del blog y los dos includable que los manejan no pueden eliminarse (porque vuelven a aparecer), los dejamos vacios, sin contenido y el único que usamos es el main que es todo lo que necesita un header ¿Qué hace ese código? Transforma la imagen que usamos en un enlace a la pagina de inicio de nuestro sitio que es accesible sólo cuando no estamos en el home.
Lo que sigue, es cambiar el CSS así que vamos a buscar las definiciones. Sólo necesitamos tres:
Lo que sigue, es cambiar el CSS así que vamos a buscar las definiciones. Sólo necesitamos tres:
#header-wrapper {
margin: 0 auto 10px; /* está centrado y tiene un pequeño margen que lo separa de los posts */
width: 860px; /* es el ancho del blog y el ancho de la imagen de fondo */
}
#header-inner {
background: transparent url(URL_imagenBlog) no-repeat 50% 50%; /* es la imagen a usar */
height: 100px; /* debemos indicar la altura de esa imagen de fondo */
width: 100%; /* que ocupará tptp el ancho del blog */
}
#header a { /* esa imagen es un enlace así que le damos los mismo valores */
display: block; /* transformamos el enlace en un rectángulo de cierto tamaño */
height: 100px; /* indicar la altura de la imagen de fondo */
width: 100%; /* indicamos que ocupa todo el ancho */
}A partir de acá, como ya controlamos la imagen de fondo, podemos intentar, por ejemplo, mostrar headers aleatorios:
<script type="text/javascript">
// lista de imágenes a utilizar
misFondos=new Array('URL_imagen1','URL_imagen2','URL_imagen3');
// elegimos una al azar
var alea=Math.round(Math.random()* misFondos.length + 1);
// creamos la etiqueta style y la escribimos
var salida = '<style>#header-inner {background-image:url(' + misFondos[alea] + ');}</style></style>';
document.write(salida)
</script">De forma similar, podríamos tener imágenes que roten de forma sucesiva o cualquier otra locura que se nos ocurra; por ejemplo mostrar una imagen diferente según sea la etiqueta.
Aquí, las cosas se nos complican un poco porque Blogger no nos dice la etiqueta de un post hasta que este es mostrado, lo hace dentro del LOOP así que no disponemos de ese dato en el <head> </head> de nuestra plantilla que es donde lo necesitamos, para decidir qué imagen vamos a usar ANTES que se cargue la página. Intentaremos entonces ser modestos y tener encabezados diferenciados para las páginas de listas; es decir, aquellas que, por defecto, muestran un recuadro generado por este código:
Aquí, las cosas se nos complican un poco porque Blogger no nos dice la etiqueta de un post hasta que este es mostrado, lo hace dentro del LOOP así que no disponemos de ese dato en el <head> </head> de nuestra plantilla que es donde lo necesitamos, para decidir qué imagen vamos a usar ANTES que se cargue la página. Intentaremos entonces ser modestos y tener encabezados diferenciados para las páginas de listas; es decir, aquellas que, por defecto, muestran un recuadro generado por este código:
<b:includable id='status-message'> ....... </b:includable>
El único dato que identifica si estamos en una página de ese tipo es la URL de la misma:
http://nombreBlog.blogspot.com/search/label/nombreEtiqueta
o bien:
http://nombreBlog.blogspot.com/search/label/nombreEtiqueta?max-results=20
Y como Blogger no tiene códigos condicionales para indicarnos esto, debemos recurrir a la única alternativa que nos queda, usar JavaScript.
La idea es esta, vamos a leer la URL de la página, verificar si estamos en una de las páginas de etiquetas, leer esa etiqueta y luego, hacer que el script agregue el código de style correspondiente, exactamente como en el caso anterior.
Supongamos que tenemos tres etiquetas llamadas etiqueta1, etiqueta2 y etiqueta3 y tres imágenes distintas, una para cada una de ellas. Entonces, vamos a poner lo siguiente, justo antes de </head>:
http://nombreBlog.blogspot.com/search/label/nombreEtiqueta
o bien:
http://nombreBlog.blogspot.com/search/label/nombreEtiqueta?max-results=20
Y como Blogger no tiene códigos condicionales para indicarnos esto, debemos recurrir a la única alternativa que nos queda, usar JavaScript.
La idea es esta, vamos a leer la URL de la página, verificar si estamos en una de las páginas de etiquetas, leer esa etiqueta y luego, hacer que el script agregue el código de style correspondiente, exactamente como en el caso anterior.
Supongamos que tenemos tres etiquetas llamadas etiqueta1, etiqueta2 y etiqueta3 y tres imágenes distintas, una para cada una de ellas. Entonces, vamos a poner lo siguiente, justo antes de </head>:
<script type='text/javascript'>
// <![CDATA[
// esta es una función interna necesaria para IE
Array.prototype.indexOf = function(s) {
for (var x=0;x<this.length;x++) if(this[x] == s) return x;
return false;
}
// leemos la URL de la página
var dondeEstamos = window.location.href.replace(/&/g, '&');
// si no es una etiqueta, seguimos de largo
if(dondeEstamos.indexOf('label') > -1) {
// creamos dos arrays con la lista de etiquetas y las imágenes que queremos usar
// en la primera, colocamos los nombres de las etiquetas tal como se ven en la barra de direcciones del navegador
lasCategorias=new Array("etiqueta1","etiqueta2","etiqueta3");
// en la segunda, colocamos las direcciones de las imágenes, en el mismo orden
losHeaders=new Array("URL_imagen1","URL_imagen2","URL_imagen3");
// vamos a filtrar la URL
var buscarX=dondeEstamos.lastIndexOf('?');
if(buscarX > -1) { dondeEstamos = dondeEstamos.substring(0,buscarX); }
// averiguamos cual es la etiqueta
var headerEtiqueta = dondeEstamos.substr(dondeEstamos.lastIndexOf('/')+1);
// y cuál es la imagen
var indice=lasCategorias.indexOf(headerEtiqueta);
// si no la tenemos definida, seguimos de largo y no pasa nada
if (indice != false) {
// aquí vamos a crear el código CSS
var salida = '<style>#header-inner {background-image:url(' + losHeaders[indice] + ');}</style>';
// y lo escribimos
document.write(salida)
}
}
// ]]>
</script>
42 comentarios:
Interesante. Y aunque no es sobre el tema alguna sugerencia para esto:
Es un código que aparece cuando uno ingresa por primera vez a una page. Dice algo como: "Si esta es su primera vez tal vez le gustaría suscribirse al feed"
Es sólo un texto o un enlace de bienvenida, no significa que sepa si es la primera vez que visitas ese sitio o no. Podría hacerse agregando una cookie pero no funcionaría siempre.
hola JM!!! eso de mostrar la imágen según la etiqueta está buenísimo, he visto como queda. Por ahora para mi será un proyecto muy elevado para los conocimientos adquiridos :)...besitos!!!
No sé si es el sitio indicado para hacerte una pregunta...
Quiero que mi blo tenga una sola entrada siempre y me explicaron que salia añadiendo a data:label.url esto +"?max-results=1"
Lo hice y todo OK.
El problema es que todo esto salía bien si tengo hecha la pestaña etiquetas...pero si la quito (que es lo que quiero) y meto las etiquetas dentro de un gadget HTML/Javascript, (porque así puedo ordenarlas como quiera, darles forma) donde pongo lo del results=1?? En la plantilla desaparece lo del data:label.url y estoy más perdida...
Si entras en el blog www.susanagrafica.blogspot.com y pinchas en identidad verás como salen 2 entradas...
Jo! Gracias!!
Muy bueno!
Mi consulta es la siguiente...
¿Se puede agregar esas imágenes (las que se muestran por categorías) pero fuera del header y como un elemento aparte?
No se si me explico... Seria como una imagen que diga el nombre de la categoría, pero fuera del header..
Marcos:
Sí, puede hacerse variando ese script. También hay una entrada que habla específicamente de poner una imagen asociada a las etiquetas en la sidebar.
Graciela:
No es tan complicado como parece. HAce falta paciencia, nada más :D
Susana:
Si, es posible hacerlo, en este blog lo tengo limitado a 5 pero puede ponerse cualquier valor. Debes expandir los artlugios y buscar esto:
expr:href='data:label.url'
y poner esto:
expr:href='data:label.url + "?max-results=1"'
Suele estar en los elementos Etiquetas y también debajo de los posts.
Me encanta el resultado, voy a terminar unas cosillas y leo más tranquila porque es una de esas cosas que hay que probar ;)
Disculpa si ya te he puesto este comentario, pero por si acaso me gustaría invitarte a formar parte de La Faviconera, un directorio de 16x16 que he creado para la promoción de los blogs, te dejo la url para que, si te apetece, unirte.
lafaviconera.blogspot.com
Un saludo y gracias.
Ando con un problema que posiblemente ya te lo han preguntado.
Yo se que cuando uno agranda el sector de la plantilla donde se encuentra colocado el post, la imagen no se agranda, por defecto de blogger uno vera las imagenes de los posts con el mismo tamaño de antes. Ya que se comprime, por decirlo de alguna manera, hasta los 400 px mas o menos. Y bueno mi problema es que hago una entrada y al colocar una imagen me queda un lugar en blanco, ya que el post tiene de ancho unos 484 y la foto si bien es mas grande, blogger me la comprime. Como puedo hacver para que la imagen del post se comprima hasta donde yo quiera. Y no hasta donde dice blogger.
hola!
el problema es que quite las etiquetas y las metí en un gadget html/javascript.
Entonces me desaparece lo del label!
Sabes como podría hacerlo así.
Lo he hecho así para poder ponerlas en el orden que quiera y con la linea de puntos y todo eso.
www.susanaaguilera.com
gracias!!!
Bocha:
Puedes colocar la imagen del tamaño que quieras, para eso, debes editar el código HTM que coloca Blogger por defecto. Una aprte de eso la peudes ver en este post. No solo hay que cambiar la URL como dice ese post sino que el código de la imagen, la etiqueta IMG también tiene dos datos width y height que deben eliminarse. Empieza por ahí y luego vemos porque no sé que quieres hacer exactamente.
Susana:
Si has colocado todo en un elemento HTML y allí hay códigos como data:label.url etc, no funcionará porque esos datos sólo pueden ser usados directamente en la plantilla o dentro de un elemento Label.
Hola JMiur!
Si, he colocado todo en un elemento html pero no he puesto ningun código label ni nada...
Al quitar el elemento etiquetas se borra lo del label de la plantilla.
Ya no sé como hacerlo, he probado varias opciones y nada...
Lo de ponerlo en un elemento html era para poder poner las etiquetas en el orden que quisiera, colocar las lineas de puntos que tengo arriba y abajo (www.susanaaguilera.com) y todo eso...si tu sabes una manera de poder hacerlo en un elemento etiquetas...
gracias por todo.
Susana:
¿Estás colocando las etiquetas como enlaces individuales? Veo el código fuente pero no sé qué dice la plantilla.
Por ejemplo, leo esto:
<li class="page_item page-item-5">
<a title="identidad" href="http://susanaaguilera.blogspot.com/search/label/identidad">» identidad</a>
</li>
Si ese es el código colocado en el elemento HTML, limitarlo para que sólo muestre una página sería así;
href="http://susanaaguilera.blogspot.com/search/label/identidad?max-results=1"
Sólo debes agregar ?max-results=1 al final de la URL
Genial, esperaba esta entrada y la veía venir. :D
Una pregunta, ¿se puede sacar o cambiar el coso ese de "Mostrando entradas..."?
Saludos.
Lo mejor, más que sacarlo, es ocultarlo colocando esto antes de </b:skin>
.status-msg-wrap {display:none;}
Ah, gracias JMIur, tengo uno de esos en la css, y me preguntaba qué sería. Le agrego eso?
Como verá, estoy tratando de "limpiar" la plantilla :P
Si, con eso debería ocultarse. Si no es así me avisas y me fijo.
GRACIAS, GRACIAS, GRACIAS!!
Susana: Parece que resultó :D
Una pregunta y como logras cambiar la posicion del titulo a la derecho tal como lo tienes en tu blog? Pero como logras ese efecto en BLOGGER CLASSIC TEMPLATE O HTML? Gracias de antemano!
Lo consigues usando CSS. No sé cuál es tu blog así que no puedo darte muchos más detalles.
Buena info pero me senti algo complicado practicando este truco.jeje:) Yo en mi blog directamente en los css del header le puse para que se vuelva transparente todos los textos que alli aprecieran. creo que es una solucion no?...:D
suerte!!!
¿Una solución para qué?
He hecho todo lo que me dijiste pero no me funciona el código, no se porque. Si ves este comentario me gustaría pudieses revisar el código de mi blog para ver que hice mal, mi blog es http://parabolaconstante.blogspot.com.
Saludos y gracias, muy buen blog.
No sé exactamente a qué te refieres epro en tu blog hay un código que tiene un error en el Menú.
En uno dice:
onmouseover="this.src='URL'
Y en los demás. la URL extá bien pero falta la comilla de cierre del onmouseover:
onmouseover="this.src='xxxxxxx';"
Si, mi duda iba por el tema de los cambios de imagen en el header dependiendo de la etiqueta, puse todo igual que explicas en este tutorial pero algo hace que no funcione y la verdad no se bien que...
Gracias por tu tiempo :)
Era referido a este tutorial, quiero cambiar las imágenes del header dependiendo de la etiqueta. En este caso son Política, sociedad, educación, etc. Adapte la plantilla para que calzara con tus indicaciones pero por alguna razón no pasa nada cuando cambio de sección.
Disculpa si se posteó dos veces pero creo que la primera vez no quedó.
Gracias por tu tiempo :) Saludos
Dos alternativas posible.
La primera, cambia las URLs del menú, eliminado la barra final de cada una de ellas. Por ejemplo, si dice:
http://parabolaconstante.blogspot.com/search/label/sociedad/
coloca:
http://parabolaconstante.blogspot.com/search/label/sociedad
La segunda alternativa es cambair el script para que ignore esa barra extra.
Busca esta parte:
var headerEtiqueta = dondeEstamos.substr(dondeEstamos.lastIndexOf('/')+1);
Y arriba de ella, colocas estas tres líneas:
var barra = dondeEstamos.lastIndexOf('/')+1;
var longitud = dondeEstamos.length;
if(barra==longitud) { dondeEstamos = dondeEstamos.slice (0, longitud-1); }
http://parabolaconstante.blogspot.com/search/label/politica/
Muchísimas gracias!! funcionó perfecto con la segunda opción.
Saludos.
Perfecto. Esa no podía probarla así que me alegra que el instinto funcionara :D
JMur, primero felicitarte por tus post!!!! Me han ayudado mucho con mis blogs!!!!
Me había propuesto hacer un header que cambie según la página del blog en la que te encuentres (aunque también me sirve utilizar etiquetas). El problema es que el código del post no coincide con el de mi versión del blogger (incluye header-outer, en lugar de wrapper, divide el inner, en text y description, etc) y aunque he intentado adaptarlo algo falla. Es posible hacerlo con la versión actual? Podrías darnos alguna pista de como tendrían que quedar los códigos?
Muchas gracias. :)
Si vas a personalizar una plantilla, no conviene que utilices una de las nuevas ya que el código que tienen es rebuscado y está pensado para cambiarlo desde el editor y nada más. Esto no significa que no pueda hacerse pero, es más engorroso y como no me gustan, me he rehusado a analizarlas :D
De todos modos, #header-wrapper equivale a #header-outer; #header es el mismo y el código del widget pede ser "borrado" por completo sin importar lo que tenga en su interior y el código peude ser reemplazado por cualquier otra cosa.
Finalmente me he pasado a la "Mínima", y misión cumplida!!!!
Gracias por tus recomendaciones!!! :D
Me queda la duda... sería posible conseguir el mismo efecto, pero en lugar de por etiquetas, por páginas independientes? He hecho algún intento pero aún soy demasiado novatilla.
Si te refieres a las páginas es más fácil ya que puedes usar un condicional:
<b:if cond='data:blog.pageType == "static_page"'>
... y aquí colocas el estilo especial para esas páginas
</b:if>
Si se trata de posts individuales,se hace engorroso pero también se pueden usar condicionales como muestra esta entrada
hola amigo saludos desde venezuela bueno tengo un problema y es que hice el primer paso que era sustituir lo primero y me a quedado de esta forma
pero luego intento darle los estilos y no me da el resulatado, y ahora el header no me aparece agradezco mucho si me ayudas gracias de ante mano,,,,, :/
Anyelo González
He respondido tu mail.
Estos códigos solo sirven para que cambien las imágenes al pinchar sobre etiquetas? Es decir si quiero q cambien esas imágenes al pinchar sobre cada una de las entradas que hay en el menú, no puedo usar esos códigos... cual serían éstos?
http://mispadressonprimerizos.blogspot.com.es/
En ese caso, tendrías que tener una lista de cada una de esas entradas y sería bastante más complejo de armar.
Deberías usar otro tipo de sistema.
No conozco otro sistema... y tu?
Por cierto, como se trata de una lista muy larga de enlaces pero todos están dentro del menú, no se podría hacer que en el código tuviera la condición del div class="jqueryslidemenu" o del id="myslidemenu"?
No entiedo a que te refieres; puedes usar cualquier nombre para los IDs o usar bvarias clases juntas siempre que verifiques las reglas de estilo.
Hola JMiur,
Me ha desaparecido el título y descripción del blog de la cabecera en la versión de pc pero si me sale bien en la versión móvil.
Si me puedes ayudar te lo agradecería.
http://dondecomesanti.blogspot.com.es/
http://vagabundia.blogspot.com/2009/05/tratando-de-entender-el-header-1.html?showComment=1378840257496#comment-1022569327255657510
¿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 ...