Estilos para las páginas estáticas

En Blogger las páginas estáticas son post, entradas como las que utilizamos cada día cuando actualizamos con la única diferencia que no se muestran en la página principal ni en los archivos.

En algunas plataformas es posible aplicar estilos distintos para cada página pero en Blogger no es posible, lo que si podemos es aplicar a todas las páginas unos estilos que las diferencien de los post o incluso hacer que en las páginas estáticas no se carguen ciertas partes del blog.

En este ejemplo hemos ocultado la sidebar, los enlaces de navegación, el enlace a entradas ATOM, el título y la fecha que se muestra sobre los post si la tuviéramos. El post-footer (fecha, autor, comentarios, valoración, etiquetas) no es necesario ocultarlo porque no se muestra en las páginas.

Para hacer todo eso vamos a utilizar la condicional de las páginas estáticas:

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

Es necesario situarse en plantilla edición de HTML y marcar para expandir la plantilla no sin antes asegurarnos que tenemos descargado el archivo de la plantilla o copia.

Condicionamos la sidebar

Añadimos la condicional y su cierre marcado en color rojo:

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

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='xxxxxx' locked='false' title='xxxxxx' type='xxxxxx'>

Aquí tenemos lo añadido a la sidebar

.............

.............

.............

</b:widget>

</b:section>

</div>

</b:if>

Condicionamos los enlaces de navegación y entradas ATOM

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

<b:include name='nextprev'/>

<!-- feed links -->

<b:include name='feedLinks'/>

</b:if>

Condicionamos los títulos:

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

<h3 class='post-title entry-title'>

<b:if cond='data:post.link'>

<a expr:href='data:post.link'><data:post.title/></a>

<b:else/>

<b:if cond='data:post.url'>

<a expr:href='data:post.url'><data:post.title/></a>

<b:else/>

<data:post.title/>

</b:if>

</b:if>

</h3>

</b:if>

Condicionamos la fecha superior si la tuviéramos:

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

<h2 class='date-header'><span><data:post.dateHeader/></span></h2>

</b:if>

</b:if>

Al finalizar comprobamos que en vista previa no da ningún error y guardamos los cambios.

Antes de continuar nos fijamos en la anchura tiene nuestro blog, esa anchura está establecida en outer-wrapper. Copiamos width: 660px o la medida que tenga cada uno en su blog porque será la que añadiremos a las páginas.

#outer-wrapper {

width: 660px;

margin:0 auto;

padding:10px;

text-align:$startSide;

font: $bodyfont;

}

Nos situamos justo antes de </head> y añadimos los nuevos estilos para las páginas estáticas.

main-wrapper es el bloque que acoge en su interior los post, lo que haremos será añadirle la misma anchura que tenemos en outer-wrapper de esa forma las páginas ocuparán todo el ancho del blog.

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

<style type='text/css'>

#main-wrapper {

width: 660px;

}

</style>

</b:if>

Al código anterior le añadimos también estilos para el contenido de las páginas que en realidad son los post, de esa formar tendrá una imagen de fondo y color y dejaremos espacio (padding) alrededor de el contendido. También le añadimos color, tamaño y tipo  de fuente:

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

<style type='text/css'>

#main-wrapper {

width: 660px;

}

.post {

background:#B6A78A url(url-imagen) no-repeat scroll center top;

color: #000000;

font-family: Georgia Serif;

font-size: 15px;

margin: 0.5em 0 1.5em;

padding: 40px 40px 0;

}

</style>

</b:if>

Y eso es todo, tenemos para jugar un rato y pasarlo entretenido.