Viajar por Europa

abril 02, 2011

Diseñar las páginas estáticas en blogger

El objetivo es diseñar las paginas estáticas para que sean distintas a los spots del blog. Diseñar estas páginas fijas para que muestren todo lo que en ellas escribimos pero sin tener lo que normalmente tiene un post en el blog, eliminar las sidebar, o con mayor propiedad ocultar ambas sidebar.
En resumen voy a trasladaros:


Diseñar las paginas estáticas sin las sidebar del blog en las plantillas nuevas de blogger.

Este cambio que voy a explicar ahora lo llevaba buscando, para las nuevas plantillas meses, he hecho pruebas, he preguntado, sin encontrar la respuesta. Lo encontré en ciudadblogger, y a este blog he de darle las gracias. El post se titula exactamente: ocultar sidebar en las plantillas nuevas de blogger.

El punto 1º lo puedes obviar, porque para saber el ancho de la plantilla del blog puedes ir direntamente a modificar plantillas y desde aqui veras el ancho que tiene, sin tener que ir al código HTML.
diseñar las páginas estáticas en blogger
Entrando en el diseñador de plantillas de blogger
podemos conocer el ancho en px que buscamos


1º Buscar el ancho total del blog, lo que viene en la linea siguiente:

<b:variable default='930px' name='content.width' type='length' value='960px'/>


El ancho total es 960px. Puede ocurrir como me ha pasado que solo aparezca la primera cifra es decir 930 px. Es con esta cifra con la que he trabajado. 930px.

2.- A continuación buscamos las columnas izquierda y derecha del blog y las sustituimos por las lineas que indico (rojo).

Buscar  (ya sabes Ctrl+F con artiulugios expandidos)

<div class='column-left-outer'>
<div class='column-right-outer'>

cambiar en el mismo orden por:

<div class='column-left-outer' id='sidebar-left'>
<div class='column-right-outer' id='sidebar-right'>

Con ello lo que hacemos es una correspondencia de cada linea con un identificador unico que viene definido en la id. La etiqueta <div class sirve para agrupar elementos, todos los elementos tienen la misma características y el añadirle id se le atribuye un nombre "sidebar-left".

Buscamos en la plantilla (Ctrl+F) </head> y por encima de esta etiqueta insertamos las siguientes lineas:


<b:if cond='data:blog.pageType == "static_page"'>
<style type='text/css'>
#sidebar-left {
display: none;
visibility: hidden;
}
#sidebar-right {
display: none;
visibility: hidden;
}
#main {
width: 960px; /* Aquí se pone el ancho 930px o 960px puedes jugar */
}
</style>
</b:if>


Con estas lineas lo que estamos es dando una serie de órdenes: primero que si se trata de una página estática, el sidebar derecho, que no se vea (none) y que todo lo que contenga sea invisible (hidden), lo mismo para el izquierdo. En cuanto a las lineas de style podeis prescindir de ellas.Aunque tenerlas no está de más, es más no la quitaria, pues por otro lado es conveniente mantenerla.

Aquí podemos cerrar plantilla. Pero si tienes un sidebar en el lado izquierdo, entonces sigue los siguientes pasos

Ahora supongamos que el blog tiene tambien un sidebar izquierdo.

<b:variable default='0' name='main.column.left.width' type='length' value='180px'/>


¿Para que buscamos la linea para ver esos 180px (ancho de la columna). Por lo visto se le resta 25px y los 155px lo ponemos en las lineas que añadimos, segun el recuadro siguiente. De todas formas podremos ir jugando con este numero, si no va bien -155px,, pues ponemos -150px o -160px.
Buscamos #main y añadimos a continuación:

{
width: 960px; /* Aquí ancho total del blog que pusimos antes */
margin-left: -155px;
}

Cerramos plantillas guardamos cambios y probamos, para ver como ha quedado.

Para quitar los sidebar de la pagina estática si la plantilla es antigua:

ocultar sidebar en pagina estática  en la plantilla minima.

2 comentarios:

  1. Hola. Gracias por este post, muy interesante y me ha servido para ocultar la barra lateral. Ahora me surge otra duda: ¿Cómo oculto la caja de los comentarios? Te agradecería enormemente la respuesta. Saludos.
    DIEGO

    ResponderEliminar
  2. Anónimo (Diego) Ocultar la caja de comentarios es muy fácil. Solo tienes que entrar en Diseño, configuración y clic en la pestaña "comentarios" hay verás una seria de opciones. Señalas ocultar comentarios y despues abajo de todo "actualizar" y listo.
    Si tienes algún problema me preguntas.

    ResponderEliminar

Si haces un comentario procura que no sea anónimo y si estás solicitando algo al menos espero que votes en Google Plus. Saludos.