Diego Cabai | Blog

Entradas Recientes en Blogger/Blogspot

Adrián me hizo un comentario en el post Administrar los Feeds en Blogger donde me pregunta cómo es que se puede armar una lista con las últimas entradas realizadas o los últimos comentarios, sin utilizar el widget que trae Blogger que permite sólo 5 como resultado. Para hacer esto hay que recurrir a una programación externa, como hice yo en mi caso de la lista que se ve a la derecha de los últimos posts. Esto está basado en la solución provista por Beautiful Beta donde creó una serie de widgets y código para lograr consultar los feeds  de tu sitio por medio de Json. Luego se le puede dar el formato que uno quiere mediante CSS y puede lograr unos widgets muy buenos de últimas entradas o últimos comentarios al mejor estilo Wordpress.

Si bien la solución la podrías obtener de dicho sitio, está en inglés y si no estas ducho con el idioma tendrías que andar traduciéndolo para lograr el objetivo. De este lado voy a dar una mano simplificando un poco las cosas que hay que hacer y cómo hay que hacerlas.
Hay dos formas de hacerlo, una, si no entendés nada de código o no tenes ganas de andar editando el código HTML de tu Blog podés usar la solución de "Un Click Instalación del Widget" o bien podés ir por el otro lado a customizar en un 100% el widget que agregues.

Si optaste por el camino corto y decidiste instalar el Widget en un un click, tenes que ir al sitio Widget Installation and Downloads Page y ahí hacer click sobre el Widget "Add Recent Posts to Blog". Se va a abrir una ventana donde vas a poder customizar completamente la cantidad de posts que quieras, si queres el formato standard o si vas a definir uno vos, etc. Es muy sencillo de configurar y una vez finalizado haces click en Add Widget to My Blog y listo. Si queres customizar el formato de la lista de posts, letra, tamaño, etc. vas a tener que generar tres clases de código CSS en tu Blog con los siguientes nombres: bbrecpost, .bbrecpostsum y .bbwidgetfooter. Incluso con esta opción deberías cargar una línea adicional en tu Blog justo antes de </head>. No es necesario para todos los widgets pero así lo recomienda en su sitio.

<script src='http://home.planet.nl/~hansoosting/downloads/beautifulbeta.js' type='text/javascript'/>

Esta opción no la recomiendo porque siempre estas dependiendo del código fuente de su creador, si bien te aseguras de estar actualizado el día que su archivo no esté mas online vos te quedaste sin posts recientes. La solución para esto es la segunda opción de instalación.

La segunda opción es que vos mismo hostees ese archivo con la funcíón de obtener los posts recientes y luego lo utilices. Pero tal vez me digas "yo no tengo un servidor propio para subir archivos". Eso no es problema, podés ir a GooglePages usar tu usuario de Blogger e ingresar al servicio. En este servicio podes crear páginas web a tu gusto, que incluso podrías usar o linkear desde tu Blog o bien podes subir archivos que es lo que nos interesa.

Entonces los pasos serían los siguientes:

Bajar las funciones de JavaScript desde este link:

  ShowRecentPosts (1.0 KiB, 525 hits)

.bbrecpost {
  margin: 0 1px;
  position: relative;
  top:-18px;
  padding-left: 0;
  list-style-type: none;
  list-style-image: none;
  font-family: 'Trebuchet MS', Verdana, Sans-Serif;
  font-size: 12px;
}

.bbwidgetfooter {
position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0;}

Notarán que una de las 3 clases que nombré antes no está, eso es porque no utilizo la función de resumen de las entradas recientes. En ese caso si debería definir la clase adicional. El footer figura como left:-9999px y eso es para quitar el footer de la pantalla ya que no quedaba muy bien. Estos valores los podes modificar acorde a tu Blog, los nombres de cada propiedad de clase son bastantes intuitivos.
Con eso ya estamos en cuanto a edición HTML, ahora vamos a "Elementos de la Página". Ahí agregamos un widget de Código HTML/Javascript. Le ponemos el título que querramos, por ejemplo "Ultimos Posts" y en su contenido ponemos algo como esto:

<script style="text/javascript" src="http://tu-sitio.googlepages.com/showrecentposts2.js"></script><script style="text/javascript">var numposts = 8;var showpostdate = false;var showpostsummary = false;var numchars = 0;var standardstyling = false;</script><script src="http://dcabai.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>

Luego movemos el widget a la parte que mas nos guste de nuestras sidebar o footer y listo ya debería mostras los posts recientes. Pero con este ejemplo te va a mostras mis posts recientes. Hay ciertos parámetros para modificar del código, por ejemplo:

src=http://tu-sitio.googlepages.com/recentposts2.js  >> Acá tenes que poner la URL completa donde subiste el archivo en los pasos anteriores.
numposts = 8   >> Cantidad de Posts que queremos mostrar.
showpostdate = false  >> Si muestra o no la fecha del post, posible true o false 
showpostsummary = false   >> Si muestra un pequeño resumen del post, recuerden agregar la clase de CSS para esto
numchars = 0   >> Cantidad de caracteres del resumen, por default son 100
standardstyling = false   >> Si vas a usar tu propio CSS o el Standard, puede ser true o false
src="http://dcabai.blogspot.com/feeds/posts/default?orderby=published   >> Acá va la dirección de tu Blog donde está la mia. Debes cambiar dcabai.blogspot.com por tu blog, después el /feed/posts/default se debe mantener igual. Lo que podes cambiar es si queres que el órden sea de publicado o actualizado.

Recomiendo el publicado porque si después ingresas a modificar un posts viejo y lo actualizas con una modificación por ejemplo, va a aparecer en la lista.

Una vez que modifiques esos parámetros y publiques el Widget deberías ver los posts recientes. Nuevamente te recomiendo que utilices la segunda opción, pero si se te complica mucho la primera es muy válida también.

Podés hacer lo mismo con los Comentarios cambiando la dirección de los Feeds por la que desees pero en la página de Beautiful Beta hay un Widget con este fin únicamente. Cualquier duda o pregunta sabes que podes dejarme un comentario y voy a tratar de responderte a la brevedad.