Blogroll personalizado a modo de fichas o sumarios | Oloblogger El siguiente invento es casi para uno mismo, ya que está diseñado para reproducir una serie de mini ...

18 de septiembre de 2014

Blogroll personalizado a modo de fichas o sumarios

El siguiente invento es casi para uno mismo, ya que está diseñado para reproducir una serie de mini fichas de los sitios web que nosotros queramos (necesario feed público), ordenadas por fecha de publicación y que se van actualizando automáticamente. Vamos, lo que viene siendo un blogroll pero con un toque personal... el que queramos.

Bueno, he usado la expresión blogroll pero esto puede servir para cualquier cosa que se os ocurra en la que se necesite mostrar un resumen sobre las últimas publicaciones de una serie de sitios.

Para que esto funcione he reutilizado un mezclador de feeds que vimos hace tiempo, pero modificando el código para que se muestre también una miniatura de cada artículo. Tenéis una demo en este enlace porque el código es un poco largo y esta vez no quería llenar de código la entrada.

Ejemplo de formato blogroll personalizado


Para hacer esto sólo hay que instalar un par de trozos de código dónde indicaré a continuación y montar la relación de feeds.


En primer lugar editamos nuestra plantilla y justo antes del cierre del </head> añadimos todo este tocho. También se puede colgar esta parte en un servidor que admita alojar JavaScript, pero cada vez está más complicado encontrar uno que soporte muchas peticiones así que esta es la opción más segura (clic en el botón).


La primera parte es el mezclador de feeds modificado que os comentaba al principio y ahí no hay que tocar nada (salvo que queráis darle otra vuelta de tuerca). La segunda, que está entre etiquetas style, es evidentemente el estilo. Debería funcionar bien en cualquier ancho pues está diseñado para que sea adaptable pero no lo he probado en una plantilla de ese tipo y puede haber algún pequeño desajuste. Casi seguro que nada difícil de solucionar.

Lo que sí que podéis (y debéis) hacer es jugar con ese CSS para que el resultado quede bien integrado estéticamente con el de vuestro sitio.

Para cualquier duda sobre el elemento que controla cada selector (clase o Id) os remito a Leer, mezclar y mostrar feeds sin PHP.



La segunda tarea a realizar es abrir una nueva página o estática (o entrada... al gusto) para incluir el HTML necesario y la lista de sitios web que queremos incluir. Sería algo como esto:

<div class="paper" id="paper"></div>
<script type="text/javascript">//<![CDATA[
var newsfeed=new gfeedfetcher('paper', 'paper', '_new');
newsfeed.addFeed('Power Ballads', 'http://power-ballads.blogspot.com/feeds/posts/default');
newsfeed.addFeed('Musicae Memorandum', 'http://musicaememorandum.blogspot.com/feeds/posts/default');
newsfeed.addFeed('Musimales', 'http://www.musimales.com/feeds/posts/default');
newsfeed.addFeed('80 La década de oro', 'http://80ladecadadeoro.blogspot.com/feeds/posts/default');
newsfeed.displayoptions('label description');
newsfeed.setentrycontainer('div');
newsfeed.filterfeed(12, 'date');
newsfeed.definetemplate('{title} {label} {description}');
var resumen=true;
var longres=150;
newsfeed.init();
//]]></script>

Como veis, en cada línea que empieza con newsfeed.addFeed hay un par elementos que son en este orden el nombre del blog que aparecerá como título y luego lo que es la dirección del feed de ese sitio. En el ejemplo hay cuatro pero podéis poner más o menos líneas; las que queráis. Sólo es cuestión de ir haciéndolo con el mismo formato que en el ejemplo.


Hay algunas posibilidades que pueden resultar interesantes para alguien, como no ocultar el resumen de texto (.paper .resumenfield) al que yo le he puesto un display:none en el CSS.

Ya en lo que es la parte de JavaScript que va en la entrada (o página), la línea .definetemplate permite cambiar el orden de los elementos simplemente cambiando de orden esas palabras entre corchetes que aparecen como parámetros.

Una vez más tengo que remitiros a la anterior entrada sobre este mezclador de feeds para que allí veais con más detalle como configurar todo.



Últimamente tengo más ganas de experimentar y crear cosillas que de explicarlas, así que mis disculpas para los que esperan publicaciones más frecuentes.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

15 comentarios :

  1. Que bueno Oloman que estes experimentando, asi nos traes muchas novedades. Saludos

    ResponderEliminar
  2. buenísimo, lo voy a probar con un proyecto, saludos!

    ResponderEliminar
  3. Se ve interesante, voy a probarlo. Muchas gracias.

    ResponderEliminar
  4. Bro como hago para cambiar el tamaño alas imagenes pero no por skin si no por un script? bueno todas mis imagenes llevan el /s1600 pero quiero cambiarlo a un /s550 osea 550px como le ago ay algun intente poner .post img { width: 550px; } pero es muy mal resultado porque las imagenes son muy pesadas porque son covers y tengo miles posts con las imagenes con tamaños de 2000px y el blog me lo carga muy lento y eso me preocupa porque recibo muchas quejas sobre eso ayuda por fa, gracias

    ResponderEliminar
    Respuestas
    1. Si tu problema es el peso, no solucionarás nada con JavaScript, porque con eso lo único que puedes hacer es sustituir unas imágenes por otras, pero una vez cargadas, así que lo único que conseguirías sería hacer todavía más lenta la página.

      La única solución es usar imágenes más pequeñas (s550, por ejemplo) y ya en el enlace, usar la s1600.

      Eliminar
  5. hola me ha interesa mucho el blog, buscando ayuda llegue aca, se que escribiste sobre las paginas de blogger, pero a mi me ha pasado todo lo contrario, en donde aparecian todas las paginas a mi ya no me salen! se entiende? solo me aparece una, no se si es problema mio, o es que cambio, su supieras decirme de esto , no sabes cuanto te lo agradeceria!
    saludos!

    ResponderEliminar
    Respuestas
    1. Actualmente tienes 7 enlaces en tu menú de Páginas, así que supongo que era cosa tuya y que ya lo solucionaste :)

      Eliminar
    2. si en las paginas no es el problema, en la parte de la configuracion en donde deberian aparecer todas las pag para modificar, solo me aparece una.. el resto no.

      Eliminar
    3. Pero eso es porque realmente no son páginas estáticas, sin enlaces... y en los enlaces no hay nada que modificar, o pones una dirección de destino u otra. En tu caso son todo enlaces a etiquetas y sólo la que llamaste "Yo" es una página auténtica.

      Eliminar
  6. Confieso que cuando vi esto en Musicae Memorandum me gustó tanto, y me pareció una evolución tan genial del típico blogroll que tan poco aporta a los usuarios, que no tuve la paciencia necesaria para esperar por este tutorial y lo copié a pelo del código. Insisto, esta es la forma ideal para mostrar los blogs amigos, de temática relacionada o lo que sea que se quiera compartir.

    Y muchas gracias por incluir nuestro blog en el ejemplo. Es todo un honor.

    ResponderEliminar
    Respuestas
    1. Es que era de temática relacionada como tú dices XD

      Eliminar
  7. Hola amigo, te he enviado hoy un mensaje pero también voy a hacerlo por aquí. ¿Cómo es posible que desde ayer no me funcionen los blogrolls personalizados a modo de ficha de sumarios que tenía enlazados tanto en la portada como en el menú de arriba y que hice en su día siguiendo este post? Ahora los he cambiado a las etiquetas por categorias pero me gustaba más antes. He mirado en vuestro Musicae Memorandum y sí que va. No lo entiendo. Te agradecería muchísimo que, si puedes, me explicaras qué ha podido suceder cuando durante muchos meses ha ido bien. Gracias.

    ResponderEliminar
    Respuestas
    1. Problemas pasajeros con los feeds de Blogger... ya sabes ;)

      Eliminar
  8. un genio una pregunta podría hacer un tutorial explicando como adaptarlo sin etiquetas saludos

    ResponderEliminar
    Respuestas
    1. ¿Sin etiquetas? ¿A qué etiquetas te refieres Francisco?

      Eliminar