martes, 30 de diciembre de 2008

Jugando con los posts (Sólo títulos) - Vagabundia


Jugando con los posts (Sólo títulos)


JMiur





En estos días, Carlos me preguntaba si existía una forma de mostrar la página principal del blog donde sólo se vieran los títulos y un enlace que abriera las páginas individuales pero, sin aplicar ninguno de los trucos para que se ocultara el contenido y se expandieran. La idea era tener una lista tipo índice cronológico que se actualizara automáticamente.

Lo primero que se me ocurre es el método más engorroso, debemos agregar un nuevo elemento blog a la plantilla y hacer que uno funcione en la página principal y el otro en las páginas individuales. Lo mejor para eso es crearlo manualmente desde el código HTML donde buscamos:
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>
</div>
y lo cambiamos por:
<div id='main-wrapper'>
<b:if cond='data:blog.pageType == "item"'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>
<b:else/>
<b:section class='main' id='mainHOME' showaddelement='yes'>
<b:widget id='Blog2' locked='true' title='Entradas pagina principal' type='Blog'/>
</b:section>
</b:if>

</div>
Ahora, tendríamos que modificar el elemento Blog2, quitar los includes que no sean necesarios y hacer las modificaciones que nos gusten ... muy complicado para mi gusto.

Una forma más sencilla es pensar, bueno, si lo que quiero es una lista y sólo poder ingresar a las páginas individuales, no necesito nada más, no necesito el autor ni las etiquetas ni la cantidad de comentarios ni ranking ni posts relacionados, sólo necesito el título y el enlace; nada más.

Y eso, podemos resolverlo con bastante sencillez usando los condicionales. Lo que necesitamos es ubicar esa condición en el lugar preciso que es dentro de este INCLUDABLE que vemos si expandimos los artilugios:
<b:includable id='post' var='post'>
... el código actual ...
</b:includable>
El contenido de eso es muy largo y varia mucho de una plantilla a otra así que no vale la pena mostrarlo, sólo hay que saber que no tocaremos el contenido existente sino que lo condicionaremos para que se ejecute sólo en las paginas individuales y de esta manera, toda esa parte del blog no cambiará:
<b:includable id='post' var='post'>
<b:if cond='data:blog.pageType != "item"'>
<!-- ... aquí pondremos el nuevo código ... -->
<b:else/>
... el código actual que no tocamos ...
</b:if>
</b:includable>
Si en este momento guardáramos la plantilla, la página principal de nuestro blog no mostraría ninguna entrada pero cualquier página individual seguiría funcionando como antes.

Entonces, lo que faltaría poner es alguna clase de código que nos mostrara el título y el enlace a cada entrada así que deberíamos reemplazar esto:
<!-- ... aquí pondremos el nuevo código ... -->
por un código cualquiera; por ejemplo:
<div class='postResumen'>
<div class='enlaceResumen'>
<data:post.title/> <a expr:href='data:post.url'>Lee más</a>
<div style='clear: both;'/>
</div>
</div>
¿Qué es lo hay ahí? Un bloque al que le asigno una clase llamada postResumen que contendrá cada titulo y dentro de ese bloque, otro con una clase a la que llamo enlaceResumen y a las que luego daré propiedades CSS.

data:post.title es el título de cada entrada
data:post.url es la URL de cada entrada y con ellas se crean los enlaces

¿Podrían agregarse otros datos? Sí. Hay algunos a los que se puede acceder:

data:post.author es el nombre del autor de la entrada
data:post.timestamp es la hora de publicación de la entrada
data:post.numComments es la cantidad de comentarios
data:post.dateHeader es la fecha pero tendrá las mismas restricciones de siempre, si hay varias entradas con la misma fecha, sólo se mostrará una

Las etiquetas de la entrada también pueden listarse usando el mismo código que en las entradas individuales:

<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
</div>

La cantidad de comentarios puede mostrarse usando el código normal:

<b:if cond='data:post.numComments == 0'>
Sin Comentarios
<b:else/>
<b:if cond='data:post.numComments == 1'>
1 Comentario
<b:else/>
<data:post.numComments/> Comentarios
</b:if>
</b:if>

El CSS de esa sección puede ser cualquier cosa y dependerá de la imaginación de cada uno. Para el ejemplo que he colocado en un blog de pruebas, las definiciones son las siguientes:
.postResumen {
background-color: #EEEEEE;
height: 52px;
margin: 10px 0 0;
}
.enlaceResumen {
font-weight: bold;
line-height: 32px;
padding: 0 0 0 10px;
}
.enlaceResumen a {
color: CornflowerBlue;
float: right;
font-size: 11px;
font-weight: normal;
margin: -32px 10px 0;
}
.enlaceResumen a:hover{
color:CornflowerBlue;
text-decoration:none;
}
.comentariosResumen {
float: right;
font-size: 11px;
font-weight: normal;
padding-right: 10px;
}
Y el código HTML utilizado es el siguiente:
<div class='postResumen'>
<div class='enlaceResumen'>
<data:post.title/> <a expr:href='data:post.url'>Lee el artículo y coméntalo &#187;</a>
</div>
<div class='comentariosResumen'>
<b:if cond='data:post.numComments == 0'>
Sin Comentarios
<b:else/>
<b:if cond='data:post.numComments == 1'>
1 Comentario
<b:else/>
<data:post.numComments/> Comentarios
</b:if>
</b:if>
</div>
<div style='clear: both;'/>
</div>
Ver demo online




















TABLA - FUENTES - FONTS


SOUV2BalaramScaGoudyFOLIO 4.2Biblica Font








free counters


Disculpen las Molestias




TABLA - INFORMÁTICA - UTILIDADES

lunes, 22 de diciembre de 2008

Jugando con los posts (Colores diferentes) - Vagabundia


Hace ya varios días, Ariane preguntaba si era posible aplicar el mismo truco que permite mostrar los comentarios pares e impares con diferente color, a los posts de tal forma que se vean con fondos diferentes. Imaginé que sí y quedé en contestarle así que, trataré de cumplir.

Para quien no tenga implementada algunas de esas modificaciones, hay que aclarar que lo primero que debemos tener es identificados los posts de manera individual. Eso, puede hacerse agregando el atributo ID en ellos. Buscamos entonces en la plantilla algo así:
<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Y le agregamos lo que se muestra en color aunque hay que tener en cuenta que el atributo class puede variar en algunas plantillas pero no tiene importancia; lo importante es agregarle el ID, sea cual fuera el nombre de la clase. Con eso, identificamos cada post de manera individual en las páginas que muestran varios.

Ahora, agregaremos el script y el estilo, justo antes de </head>:
<script type='text/javascript'>
//<![CDATA[
function ContarP(cual) {
var resto;
resto = contadorPosts % 2;
if (resto == 0)
document.getElementById(cual).className='entradaPar';
else
document.getElementById(cual).className='entradaImpar';
}
//]]>
</script>

<style>
.entradaImpar {background-color: #F0F8FF; padding: 10px;}
.entradaPar {background-color: #F0F0F9; padding: 10px;}
</style>
Y por supuesto, las propiedades de estilo son personales así que puede agregarse cualquier otra.

Por último agregaremos el contador y la llamada a la función y para eso, biuscaremos esta parte:
<b:includable id='main' var='top'>
.......
<script type='text/javascript'>var contadorPosts=0;</script> <!-- contador a cero -->
<b:loop values='data:posts' var='post'>
.......
<b:if cond='data:blog.pageType != "item"'>
<!-- no ejecutamos la función en las páginas individuales -->
<script type='text/javascript'>
contadorPosts=contadorPosts+1;
ContarP(&#39;post-<data:post.id/>&#39;);
</script>
</b:if>

</b:loop>
.......
</b:includable>
De esta manera, los posts se mostrarán con fondo de color intercalados salvo en las páginas individuales donde se seguirán mostrando con el esquema gráfico normal del blog.

Puede verse un ejemplo en un blog de pruebas




















TABLA - FUENTES - FONTS


SOUV2BalaramScaGoudyFOLIO 4.2Biblica Font








free counters


Disculpen las Molestias




TABLA - INFORMÁTICA - UTILIDADES

Correo Vaishnava