001-234-567-8910

IntelHouse México

Tecnología, electrónica, negocios y más...

jueves, 6 de junio de 2013

Mostrar cabecera diferente en paginas de blogger - Tutorial

Posted by   on Pinterest

Escribo esto, porque como parte del rediseño del blog y su integración con la página principal de GTech Mx, me veía en la necesidad de que el diseño de la cabecera cambiara en las demás páginas a excepción de la del blog. Tras mucho buscar no encontré nada preciso al 100, pero en base a algunos puntos que tomé de diversos sitios me fue posible conseguirlo.

Así pues, lo primero que hay que hacer una vez dentro del código HTML de la plantilla es buscar la siguiente línea de código:
<b:widget id='Header1' locked='false' title='GTech Mx nombre de tu blog (cabecera)' type='Header'>
Ahora, que ya tenemos ubicado eso, hay que escribir una línea igual justo debajo cambiando el nombre de "Header1" a "Header2" la cual quedará así:
<b:widget id='Header2' locked='true' title='GTech Mx nombre de tu blog(cabecera)' type='Header'>
Ahora, esto significa que cada "Header" tendrá una cabecera diferente, "Header1" tendrá la cabecera original y "Header2" tendrá la cabecera que deseas para otras páginas.

Ve a la edición del diseño del blog y verás que ahora hay dos cabeceras, entonces edita la segunda para configurar la imagen de fondo y la descripción.
Una vez que tenemos listo eso buscamos en la plantilla donde dice "/head" y escribimos el siguiente código:
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;archive&quot;'>
<style type='text/css'>
#Header1 {
display: none;
}
</style>
</b:if>
</b:if>
</b:if>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
#Header2 {
display: none;
}
</style>
</b:if>
Ahora, con esto queda listo tu blog, cada vez que estés en una página estática  se te mostrará la cabecera que hayas configurado para ello. Y no, no me he olvidado de explicar para que sirve cada cosa, así que esta es la explicación:

La primera parte del código largo que insertaste quiere decir que si la página NO es (!=) la página principal (blog.homepageURL), una entrada del blog ("item") o la página del historial ("archive") entonces se ocultará la "Header1" (display:none) que es la cabecera original.

La segunda parte del código marca que si la página NO es (!=) una página estática ("static_page") entonces el "Header2" se ocultará (display:none). Teóricamente mientras escribo esto me he dado cuenta de que se puede ahorrar la segunda parte metiendo un "else" en el código, pero bueno, ese ya es otro tema. 

Espero que les haya servido tanto como a mí. Comentar es agradecer!
Gracias a Ciudad Blogger por el post sobre poner código HTML en las entradas.

4 comentarios:
Write comentarios
  1. Hola,

    Gracias lo primero por tu post. He seguido los pasos pero al final cuando doy a la página estática la cabecera principal no sale pero tampoco la asignada para esa página. No sé que he hecho mal.

    Un saludo

    ResponderEliminar
    Respuestas
    1. Hola Gracia, para poderte ayudar te pido que me dejes el link de tu blog, ese error que me comentas me pasó a mi también pero necesito checar tu código para encontrar el error, creo que está en la sintaxis del código. Espero la información, Saludos!

      Eliminar
  2. Hola Diego. Gracias por tu post, de entrada es el único que he encontrado con información para este asunto pero no consigo hacerlo. De entrada, la primera línea que en principio tenía que salirme con "false" en mi código aparece "true": A partir de aquí he probado con diferentes combinaciones, pero no consigo que suceda nada. No se nada de HTML y eso no ayuda claro. Además, tampoco se si el 2 bloque de código hay que situarlo delante de la etiqueta /head o detrás... Espero que puedas ayudarme y no me des por perdida :) Muchas gracias

    ResponderEliminar
    Respuestas
    1. Hola, una disculpa por la demora, gracias por visitar GTech, para ayudarte mejor por favor pásame el link de tu sitio donde está implementado el código que no funciona, o envíamelo por mensaje vía Facebook o Twitter. Saludos!!

      Eliminar

Si deseas pedir ayuda sobre algún tema POR FAVOR deja tu email para darte seguimiento!

Visita el sitio web de mi startup! intelhouse.mx