lunes, 10 de junio de 2013

Mostrar Las Paginas Estaticas De Forma Diferente

Revisando el código de las páginas estáticas de Blogger vi que éstas usan una nueva condicional:

    <b:if cond='data:blog.pageType == "static_page"'>


Esto es que, permite condicionar acciones determinadas cuando se trata de páginas estáticas (ya debería empezarle a llamar sólo Páginas y no "páginas estáticas") que apliquen sólo a ellas y no al resto de las entradas.

Si bien hemos visto como mostrar el primer post de forma distinta, también podemos hacer algo similar para las páginas estáticas (¿lo ven? no puedo). Es decir, que todas las entradas se vean como normalmente se ven, pero cuando se trate de una Página (¡ahora sí pude!) se muestre de forma diferente, puede ser un color de fondo diferente, otro tipo de letra, bordes, etc.

Puedes ver un ejemplo en este blog de pruebas, verás que la entrada se muestra "normal", haz click sobre el enlace hacia una Página y verás que se muestra diferente.

Implementarlo es muy simple, sólo es cuestión de usar la condicional de las Páginas y agregar los estilos que se aplicarán sólo a ellas.


Para hacerlo entra en Diseño > Edición de HTML y antes de </head> pega lo siguiente:

    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <style type='text/css'>
    .post {
    color: #8A4B08; /* Color del texto */
    border: 1px solid #FF8000; /* Color del borde */
    margin:.5em 0 1.5em;
    padding: 5px;
    background: #F2F5A9; /* Color de fondo o imagen de fondo */
    }
    .post h3 a {
    color: #cc6600; /* Color del titulo */
    font-family: Impact; /* Tipo de letra del titulo */
    font-size: 20px; /* Tamaño de letra del titulo */
    text-transform: uppercase;
    text-align: center; /* Alineación del título */
    letter-spacing: 5px;
    }
    .post h3 a:hover {
    color: #FF8000; /* Color del título al pasar el cursor */
    }
    .post img {
    padding:4px;
    border:2px solid #FF8000; /* Color del borde las imágenes */
    }
    </style>
    </b:if>


Para personalizarlo sólo cambia los estilos donde se indica, puedes agregar o quitar los estilos que quieras.
De esta forma tus Páginas tendrán un aspecto diferente que harán que resalten y se diferencien de las entradas comunes.

1 comentario: