Cambiar el diseño de las Páginas Estáticas

Desde que Blogger implementó el nuevo recurso para mostrar Páginas Estáticas, han sido bastantes personas las que se han interesado por la forma de hacer que esas páginas no se muestren con el mismo diseño que tiene el resto de páginas del blog.

Vamos a ver como modificar su diseño de forma que en las Páginas Estáticas las entradas se muestren con distinto aspecto a las del resto del blog y que en esas páginas además la sidebar se oculte y las entradas ocupen el espacio que esta deja.

Antes de empezar, aclararé que para este ejemplo voy a usar como referencia una plantilla Mínima de Blogger sin cambios en su diseño original, así que los códigos y medidas se corresponderán con esta plantilla.

Para lograr estos cambios de diseño, usaremos la condicional que Blogger dispone para las Páginas Estáticas:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

Ocultar la sidebar y ampliar las entradas al espacio disponible (ancho del blog)

[1] Antes de nada necesitaremos saber que medida tiene el outer-wrapper de nuestra plantilla.
Vamos a Diseño - Edición de HTML y comprobamos que (en este caso la plantilla Mínima original) tiene un ancho de 660 pixeles en su outer-wrapper, que vemos en la parte correspondiente en su código CSS:

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

[2] Después de tomar nota de la medida anterior, localizamos la etiqueta </head> de nuestra plantilla y justo antes de esa etiqueta colocamos el código necesario haciendo uso de la condicional que antes os mencionaba:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
#sidebar-wrapper {
width: 0px;
visibility:hidden;
display:none;
}
#main-wrapper {
width: 660px;
}
</style>
</b:if>

Con esto habremos conseguido que en las Páginas Estáticas la sidebar no se muestre y las entradas ocupen todo el espacio disponible.
Podéis ver un ejemplo del resultado en este blog de pruebas.


Ocultar la sidebar y ensanchar entradas en plantillas de tres columnas.

Si el blog tuviese dos sidebars los pasos a seguir serían los mismos, aunque la medida del outer-wrapper cambiaría en cada caso (y en muchos casos el nombre de los códigos) y en el código tendríamos que incluir otra instrucción para la segunda sidebar:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
#sidebar-wrapper {
width: 0px;
visibility:hidden;
display:none;
}
#main-wrapper {
width: 850px;
}
#newsidebar-wrapper {
width: 0px;
visibility:hidden;
display:none;
}
</style>
</b:if>

Cambiar el diseño a las entradas de Páginas Estáticas

Como habréis visto en el blog de pruebas, también podemos lograr que las entradas en las Páginas Estáticas tengan un diseño diferente al resto del blog, para lograr esto usamos el mismo sistema y la misma condicional de Blogger.

Colocamos de nuevo antes de </head> la condicional envolviendo al CSS que necesitamos:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
.post {
color: #000000; /* Color del texto de las entradas */
background: #ffffff; /* Color de fondo de las entradas */
border: 2px solid #FF9900; /* Borde que bordea las entradas */
font-size: 15px; /* Tamaño de la fuente (texto) de las entradas */
margin:.5em 0 1.5em;
padding: 10px; /* Distancia del texto al borde de la entrada */
}
.post h3 a, .post h3 a:visited {
display:block;
color: #FF9900; /* Color del título de las entradas */
font-size: 25px; /* Tamaño de la fuente (texto) de las entradas */
border-bottom: 1px solid #FF9900; /* Línea debajo del título de las entradas */
}
.post h3 a:hover {
color:#0000CC ; /* Color del título de entradas al paso del cursor */
}
</style>
</b:if>

En el código he puesto los cambios que he aplicado en el blog de pruebas, en cada caso habrá que modificar el código al diseño que necesitemos.


Usar las dos opciones anteriores al mismo tiempo

Si queremos usar las dos modificaciones que explico en la entrada al mismo tiempo (tal como se muestra en mi blog de pruebas), no tendremos más que incluir dentro de la misma condicional ambos códigos CSS:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
#sidebar-wrapper {
width: 0px;
visibility:hidden;
display:none;
}
#main-wrapper {
width: 660px;
}
.post {
color: #000000; /* Color del texto de las entradas */
background: #ffffff; /* Color de fondo de las entradas */
border: 2px solid #FF9900; /* Borde que bordea las entradas */
font-size: 15px; /* Tamaño de la fuente (texto) de las entradas */
margin:.5em 0 1.5em;
padding: 10px; /* Distancia del texto al borde de la entrada */
}
.post h3 a, .post h3 a:visited {
display:block;
color: #FF9900; /* Color del título de las entradas */
font-size: 25px; /* Tamaño de la fuente (texto) de las entradas */
border-bottom: 1px solid #FF9900; /* Línea debajo del título de las entradas */
}
.post h3 a:hover {
color:#0000CC ; /* Color del título de entradas al paso del cursor */
}
</style>
</b:if>