Gadget rotativo para entradas recientes con lista seleccionable | Oloblogger Este es un código JavaScript que permite mostrar las últimas publicaciones de cualquier feed con la particularidad de que tiene dos partes -...

27 de agosto de 2013

Gadget rotativo para entradas recientes con lista seleccionable

Gadget de entradas recientes rotativas
Este es un código JavaScript que permite mostrar las últimas publicaciones de cualquier feed con la particularidad de que tiene dos partes -ambas interesantes- y que podemos utilizar individualmente o combinadas.

En la parte superior se verá una sola entrada con su título (enlace), autor, fecha y un pequeño resumen de su contenido. Además, esta entrada irá rotando automáticamente de entre una lista cuya cantidad de elementos nosotros decidiremos.

En la zona inferior se verá la lista completa de los posts seleccionados para el rotador y al pasar el puntero por encima de cualquiera de ellos, la entrada correspondiente se verá en la parte superior, rompiendo así el ciclo automático.

Pero como siempre, mejor verlo en acción para ver si hace lo que queremos antes de montar nada.


Loading...

Y como dije que se trata de un gadget, pues ahí es dónde hay que meter el código, en un gadget tipo HTML/JavaScript si hablamos de Blogger, aunque debería funcionar en cualquier plataforma.

Esto es lo que habría que copiar y luego os comento los ajustes necesarios. Sin miedo, que la mayor parte es CSS.

<style>
/* CONTENEDOR GENERAL */
.gfg-root {
width: 100%;
height : auto;
position : relative;
overflow : hidden;
margin: 0 auto;
text-align : center;
font-size: 12px;
border: 2px solid #666666;
}
/* TITULO FEED/BLOG */
.gfg-title {
font-size: 16px;
font-weight : bold;
color : #fff;
background-color: #F69537;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
}
/* CONTENEDOR CUERPO SUPERIOR (entrada con resumen) */
.gfg-entry {
background-color : white;
width : 100%;
height : 9.2em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}
/* TITULO ENTRADA CUERPO SUPERIOR */
.gf-title a {
font-weight: bold;
}
/* SUBTÍTULO LISTA DE ENTRADAS */
.gfg-subtitle {
display: none;
}
/* CONTENEDOR CUERPO INFERIOR (lista entradas) */
.gfg-list {
position : relative;
overflow : hidden;
text-align : left;
}
/* CADA UNA DE LAS ENTRADAS DE LA LISTA */
.gfg-listentry {
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
padding-left : 15px;
padding-right : 5px;
}
/* ENTRADAS IMPARES DE LA LISTA */
.gfg-listentry-odd {
background-color : #eeeeee;
}
/* ENTRADAS PARES DE LA LISTA */
.gfg-listentry-even {
background-color : #fefefe;
}
/* MARCA PARA LA ENTRADA ACTUALMENTE VISIBLE */
.gfg-listentry-highlight {
background: #F69537;
}
.gfg-listentry-highlight:before {
position: absolute;
left: 0;
content: '\25BA ';
font-size: 14px;
color: #eee;
}
.gfg-listentry-highlight a {
color: #eee;
}
/* Ajustes */
.gfg-root .gfg-entry .gf-result {
position : relative;
background-color : white;
width : auto;
height : 100%;
padding-left : 20px;
padding-right : 5px;
}
.gfg-root .gfg-entry .gf-result .gf-title {
font-size: 14px;
line-height : 1.2em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
margin-bottom : 2px;
}
.gfg-root .gfg-entry .gf-result .gf-snippet {
height : 3.8em;
color: #000000;
margin-top : 3px;
}
.clearFloat {
clear : both;
}
</style>
<script src="http://www.google.com/jsapi" type="text/javascript"></script><script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>
<script type="text/javascript">
function showGadget() {var feeds = [{title:'Lista',url:'http://www.oloblogger.com/feeds/posts/default?redirect=false&start-index=5&max-results=10'},];
new GFdynamicFeedControl(feeds, 'feedGadget',{title: 'OLOBLOGGER', numResults : 10, displayTime : 5000, hoverTime : 500});} google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<div id="feedGadget">Loading...</div>

En verde he marcado lo que se puede configurar.

En primer lugar está la dirección del feed a mostrar. Esa (url:'http://www.oloblogger.com/feeds/posts/default) evidentemente la tenéis que cambiar por la vuestra. Podéis usar sin problemas la del tipo del ejemplo, una de FeedBurner o incluso una tipo http://NOMBRE_BLOG.blogspot.com/atom.xml.

Lo siguiente es start-index=5. Este número indica a partir de qué post queremos empezar a mostrar. Si dejamos ahí un 1 que es lo que saldría por defecto, en la página principal del blog se verían en la lista las mismas entradas que tenemos a la vista en la página, es decir, los últimas, así que personalmente prefiero poner un número mayor. Si queréis que os muestre otras más antiguas todavía, pues sólo tenéis que incrementar la cifra.

max-results=10 indica el número máximo de entradas que vamos a leer del feed, a partir de la que indicamos en el start-index=5. Este número siempre tiene que ser igual o superior al que veremos después y que servirá para fijar el número de entradas que realmente mostrará el gadget. Lo fácil sería poner un 500 para no fallar, pero cuanto mayor sea el número, más tardará en cargar el gadget, así que mejor ajustarlo a lo que queremos mostrar... o poco más.

Por último están algunos parámetros propios del script:

  • title: 'OLOBLOGGER', el rótulo que saldrá arriba del todo.
  • numResults : 10, número de posts que efectivamente se verán en la lista y rotando
  • displayTime : 5000, tiempo de retardo entre posts en el rotador (en milisegundos)
  • hoverTime : 500, tiempo mínimo sobre un elemento de la lista para que se visualice en la parte superior.



Y con CSS podemos obtener fácilmente un par de variantes que sólo nos mostrará el rotador o sólo la lista. En este mismo orden esto es simplemente lo que tendríamos que añadir para que se viera respectivamente como se muestra debajo del código.

.gfg-list {display:none;}

Loading...

.gfg-entry {display:none;}

Loading...


El código está obtenido de una librería que Google tiene para demos y en un principio no es probable que desaparezca. Si alguien quiere usarla desde un hosting propio, entonces habría que descargarlo, cambiar la dirección y añadir a la carga de las librerías Google, la propia clave:

<script src="http://www.google.com/jsapi/?key=AQUI_LA_CLAVE_PROPIA" type="text/javascript"></script>

¿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

59 comentarios :

  1. Estos experimentos que estás haciendo con cajitas para mostrar elementos de un feed se salen. Se me ocurren un montón de aplicaciones... ¡Se puede hacer casi cualquier cosa!

    ResponderEliminar
    Respuestas
    1. La verdad es que sí. Eso de poder manejar un feed al antojo, da mucho de sí. Tú ya conoces mi Jukebox ¿no? XD

      Eliminar
    2. Sí, claro, soy un gran seguidor de Musicae Memorandum... Me encanta cómo quedó, menudo curro para ir configurando toda esa información! Personalmente tengo apuntado el carrusel automático para meterlo en el blog de música que abrí casi al mismo tiempo que el vuestro. Como te decía, abre tantas opciones que asusta ;)

      Eliminar
  2. Hola Oloman,

    Me gustaría añadir una imagen de fondo que se ponga en toda la barra lateral de mi blog www.fananimalcrossing.com. Uso la plantilla "Sencillo" que trae Blogger.
    ¿Cómo puedo hacerlo?

    Gracias y disculpa las molestias.

    ResponderEliminar
    Respuestas
    1. Prueba a añadir a tu CSS esto con la dirección de la imagen:
      .column-right-inner {
      background: #FFFFFF url(DIRECCION_IMAGEN);
      }

      Eliminar
  3. se puede configurar para que arroje solo entradas ( clasificadas) ??

    me refiero a que solo publique entrdas de tal etiqueta ejemplo: ( deportes)

    ???

    ResponderEliminar
    Respuestas
    1. Claro que sí. Para eso sólo tienes que cambiar el feed general del blog por uno de este tipo: http://DIRECCION_PRINCIPAL_BLOG/feeds/posts/default/-/ETIQUETA,sustituyendo DIRECCION_PRINCIPAL_BLOG y ETIQUETA por la dirección de tu blog y la etiqueta de tu elección.

      Eliminar
  4. saludos,como podemos cambiar los colores
    pedro

    ResponderEliminar
    Respuestas
    1. En la primera parte del código, entre las etiquetas STYLE que conforman el Css. Verás en él diversos comentarios sobre qué zona del gadget controla cada parte; pues sólo cambia los COLOR y BACKGROUND que necesites.

      Eliminar
  5. Genial Oloman, incluso se puede personalizar (colores, tipografía, tamaño, ...) según el diseño de nuestro blog. Gracias!!

    ResponderEliminar
    Respuestas
    1. ¿Y si no quiero que sea aleatorio? es decir quiero que aparezca en el orden de publicación de la última publicación a la más antigua...¿cómo podría hacerlo?
      Saludos!

      Eliminar
    2. No aparece aleatorio. Tal cual lo puse yo empieza desde la más reciente, pero saltándose las 5 más nuevas. Es para no repetir lo mismo que se ve en la página de Inicio.

      No obstante si quieres cambiar eso tendrás que jugar con "&start-index=5". En la entrada se explica para qué sirve.

      Eliminar
  6. ME GUSTARIA SABER SI ES POSIBLE PONERLE UNA IMAGEN AL PO QUE SE TA MOTRANDO

    ResponderEliminar
    Respuestas
    1. Tendrías que añadirla en el CONTENT de este selector. En lugar de usar una entidad HTML como hice yo (el triángulo), deberías poner una URL con la imagen:

      .gfg-listentry-highlight:before

      Eliminar
    2. No entendí como hacer eso? Poner una imagen en el post que se está mostrando... o una mezcla entre el slider de últimos posts. Saludos.

      Eliminar
    3. Hola Gerardo. Lo que respondí fue cómo poner un pequeño icono o imagen delante del post que se muestra en el gadget. Sólo eso.

      Eliminar
  7. Hola oloman quisiera preguntarte aunque mucho no tenga que ver con el tema ; pero mencionaste el feed... cómo hago para buscar el nombre del blog en internet y deje de salir que no tengo ninguna entrada?

    ResponderEliminar
  8. Con mucha paciencia :)

    Perdón por la broma, pero eso de salir en un buscador (y entre los primeros) es cuestión de muchas cosas y ni aún haciéndolas todas bien tienes garantía de salir. Tú preocúpate sólo de publicar y de hacerlo bien y ya vendrán los resultados con el tiempo.

    De momento sólo asegúrate de que en el escritorio tienes bien marcada la opción de:
    "Aparece en Blogger Visible para los motores de búsqueda"

    ResponderEliminar
  9. Hola Oloblogger! Como estas? Espero que muy bien!. Bien pues, comenzando con mi pregunta, la cual te pido mil disculpas ya que no tiene nada que ver con este tema, si con los Gadgets, pero no especificamente con lo que refiere esta entrada. Ya, comenzando con mi pregunta... Como haria para que el contenido de mis Gadgets esten mas juntos al Titulo de los mismos?. Eh buscado una respuesta en todos los lugares y solo encuentro "Reducir espacio entre los Gadgets". Lo que yo quiero es Reducir pero el espacio que hay entre EL CONTENIDO del Gadget y el Titulo. Seria mejor si me dijeras un codigo para que funcione en todos los Gadgets, porsupuesto, si es que hay solucion para lo que te pregunto. Espero con muchisimas ancias tu respuesta y te dejo un abrazo inmenso!.

    ResponderEliminar
    Respuestas
    1. En tu caso, la "magia" se hace desde esta parte de tu código CSS:
      h2 {
      margin: 0 0 1em 0;
      font: normal bold 18px Calibri;
      color: #0039c1;
      }

      Ese margin con valor 1em es lo que te separa el título del contenido. Cambia el valor por ejemplo por cero y verás como se reduce al mínimo.

      Eliminar
    2. Oloblogger muchisimas gracias por tu ayuda y por tu inmediata respuesta, la verdad salio perfectamente. Te invito a pasarte por el blog cuando tu quieras!. Como vez en el Header, tratara de muchas cosas, espero te lleves alguna :) . Saludos!

      Eliminar
  10. estupendo, gracias por el aporte

    ResponderEliminar
  11. Gracias, estupendo como siempre. Lo estoy utilizando al final de cada post para relacionar entradas de una misma categoría. lo que ya sería la repera es que se pudiera obtener una imagen junto a la descripción en el contenedor del cuerpo superior. es decir, la descripción de la entrada y además una imagen de las que contenga esa entrada

    ResponderEliminar
    Respuestas
    1. Es buena idea esa de usar esto para entradas relacionadas y como dices, sería mejor si viéramos la manera de incluir imagen y descripción. No sé ahora mismo cómo hacerlo exactamente, pero pienso que sí se podría hacer. A ver si lo logro y lo publico.

      Eliminar
  12. Al poner dos a mas gadgets...en la portada de la pagina, cada gadget con diferentes feeds y en etiquetas diferenciadas, se solapan, de repente aparece una en el sitio de otra, y la otra no se carga...a que se debe?...hay alguna solución para esto?...veo que tu tienes dos diferentes en la misma publicación..y esto me dejo desconcertado...no se que hacer

    ResponderEliminar
    Respuestas
    1. Cada uno esta puesto en distintos HTML/Javascript en la columna de la portada

      Eliminar
    2. Investigando creo que di con la tecla...cambie los feedGadget..por feedGadget2
      y parece que funciona, me podría decir su tengo que hacer algo mas...para asegurar

      Eliminar
    3. ....No puedo modificar los estilos en los diferentes gadget...como si se estableciera uno como predeterminado

      Eliminar
    4. -¿Se puede poner mas de un feed en la misma lista?
      - No se como hacer para poder tener diferentes estilos o variantes (con varios gadget publicados), como en esta entrada publicada ya que automáticamente, se ponen de un solo estilo.

      Eliminar
    5. Hola. Si quieres publicar más de uno de estos en la misma página, no te queda más remedio que repetir esta parte:
      <script type="text/javascript">
      function showGadget() {var feeds = [{title:'Lista',url:'http://www.oloblogger.com/feeds/posts/default?redirect=false&start-index=5&max-results=10'},];
      new GFdynamicFeedControl(feeds, 'feedGadget',{title: 'OLOBLOGGER', numResults : 10, displayTime : 5000, hoverTime : 500});} google.load("feeds", "1");
      google.setOnLoadCallback(showGadget);
      </script>
      <div id="feedGadget">Loading...</div>

      Pero como feedGadget es una ID y estas tienen que ser únicas, además de repetir el código tendrás que cambiar en cada repetición su nombre. Tal como dijiste, por ejemplo poniéndole feedGadget2, feedGadget3, etc. Así es como logré que salieran todos los ejemplos en esta entrada.

      No olvides que hay que cambiar ese nombre en dos sitios, en la función SHOWGADGET y en la ID del último DIV.

      Además, ahí mismo podrás cambiar el feed para que en cada gadget se muestre uno distinto.

      Por último, para ajustar el estilo podrás usar el ID que usaste (#feedGadgetX {propiedades})

      Eliminar
  13. Tengo tres gadget cada uno con feed diferentes, el caso es que a cada uno lo tengo en HTML/Javascript diferentes, y cuando cambio el estilo... (que uno sea lista y los demás rotador), no se puede, siempre cambias los tres a la vez a la misma configuración realizada, no se como hacer para cambiar y que unos sean listas y otros rotador), intuyo que tengo que hacer algo con la id, ya que cada uno tiene una distinta, pero cuando cambio un HTML/Javascript, los tres se configuran igual

    Podrías explicarme que debo hacer para tener diferentes tipos de gadget en la misma portada...presupongo que abría en Editar en HTML, pero como ?

    ResponderEliminar
  14. Para dar estilo individualmente utiliza selectores como estos:
    #feedGadget2 .gfg-entry {...}
    #feedGadget3 .gfg-list {...}

    Es decir, anteponiendo la ID del gadget que quieres modificar.

    ResponderEliminar
  15. Hola, me podrías decir como poner entradas en el gadget de entradas populares de blogger?

    ResponderEliminar
  16. Nada ya lo he encontrado:)

    ResponderEliminar
  17. Hola! Te hago una consulta! se puede hacer un gadget donde se pongan de forma predeterminada las entradas actualizadas?. Te explico mi caso, en mi blog tengo entradas resumidas. Hay ocasiones en donde encuentro info de una entrada vieja que decido agregar y aunq puedo compartir la actualización en las redes, el público del blog no se entera de dicha actualización y me gustaria poner un gadget donde se ubicaran esas actualizaciones. Espero haber sido clara. Saludos y gracias por tu trabajo y x compartirlo. Saludos!

    ResponderEliminar
    Respuestas
    1. Hola Andie. Sí que te he entendido porque yo también tengo esa necesidad, pero hoy por hoy no tengo ni idea de cómo se puede hacer. Sí sé cómo averiguar con JavaScript cuando fue la última actualización de cualquier cosa en el blog, pero sin indicar cuál fue esa cosa. Lo siento.

      Eliminar
  18. Hola, ya he usado este gadgets (gracias por ello) pero tengo dos preguntas! me gustaria saber como podria colocarlo en entradas relacionadas en vez de entradas recientes, como dice el comentario 12 de Hector Navarro.

    Y mi segunda pregunta es: este gadget asi como esta aca, esta agregado a mi blog, sin embargo no me muestra las ultimas entradas (es decir las mas recientes), por ejemplo,. tengo dos dias de haber actualizado y sigue mostrando las mismas que mostraba antes (hace 4 dias atras), siempre mostrara esas entradas, o cuanto tiempo tengo que esperar para que actualice el feed?

    espero haberme dado a entender y que puedas ayudarme!!! T^T

    ResponderEliminar
  19. Hola. El del comentario 12 creo que usó el feed de una etiqueta concreta debajo de cada entrada, pero no te puedo decir más porque cuando me metí a fondo con el JavaScript, me dió mucho miedito :S Era demasiado complejo para mí.
    Y lo de que en tu blog no se vean las últimas seguramente es porque es privado. Si el feed fuera público perdería esa privacidad, así que el cacharrito no funciona en esas condiciones. Yo al menos no lo pude ver

    ResponderEliminar
    Respuestas
    1. Este es el blog: teamhvenezuela.blogspot.com (es publico) pero aun siguen saliendo solo esas 10 entradas del feed, he añadido mas post y nada que los muestra en el gadget! >:<

      En el inicio veras a lo que me refiero! ~

      Eliminar
  20. ¿No será por esta respuesta que Oloman le dio a otro usuario?
    "No aparece aleatorio. Tal cual lo puse yo empieza desde la más reciente, pero saltándose las 5 más nuevas. Es para no repetir lo mismo que se ve en la página de Inicio."
    Porque yo tenía la misma duda, ya que acabo de publicar algo nuevo, y no aparece en el gadget.

    ResponderEliminar
    Respuestas
    1. Hola, gracias por la respuesta, cambie el feed a una etiqueta y ahora si me funciona correctamente!

      eso de que se salta las cinco primeras en efecto! pero tenia tres entradas nuevas y por eso no rotaban, coloque la etiqueta que mas se actualiza y bingo, ahora si veo que se actualiza el feed!!! ^^

      Eliminar
    2. Vaya, siento no haberme dado cuenta, pero hace bastante que escribí este post y no me acordaba que había metido esa variante de no incluir los 5 últimos posts :(

      LaProfe, muchas gracias por estar al quite ;)

      Eliminar
  21. Anónimo2/6/14, 2:06

    Hola puedo aumentar el contenido que aparece de entrada osea que aparesca mas contenido y quisas todo el contenido de la entrada se puede??

    ResponderEliminar
    Respuestas
    1. Pues es un gadget para compactar cosas (muchos títulos en poco sitio), pero es que además habría que modificar el fichero .js que es el que se ocupa de todo. El problema es que es muy largo y algo complejo para mí, así que no sé si podría siquiera modificarlo para que hiciera lo que quieres.

      Eliminar
  22. Hola!!! Muchisimas gracias por el Gadget, llevo como 3 horas buscando uno que me sirva (o que entienda jejeje) y el tuyo es perfectisimo, Genial!! Muchisimas gracias!!

    ResponderEliminar
  23. Hola Oloman,
    tengo una duda, he creado un gadget html/javascript con este artilugio en mi blog de blogger pero, ¿como puedo hacer que el link al feed no me carge la entrada en una nueva pestaña (_blank) sino en la propia zona "main"?

    ResponderEliminar
  24. ¿tendré que reubicar y modificar el fichero gfdynamicfeedcontrol.js?

    ResponderEliminar
    Respuestas
    1. No es necesario Vibu, es suficiente con que añadas una opción más en esta parte:
      title: 'OLOBLOGGER', numResults : 10, displayTime : 5000, hoverTime : 500, linkTarget : google.feeds.LINK_TARGET_SELF

      Sería la última, la de LINKTARGET

      Eliminar
  25. Hola Oloman: Resulta que estoy construyendo una web desde html y me pareció buenísimo tu gadget, el cual quise poner en mi sección de noticias y al copiar el código me funciona perfecto, pero al querer cambiarle la url, por el archivo en el que tengo las noticias me arroja error, no se si esto se presenta por que no es un blog sino una web. por favor me podrías ayudar con esto? Gracias

    ResponderEliminar
    Respuestas
    1. William, si te funciona bien con la dirección del ejemplo y al poner la tuya de noticias es cuando no funciona, evidentemente es que no estás usando la correcta. Tiene que ser la dirección de un feed, bien de Feedburner, bien del tipo Atom. Busca cual puede ser en tu caso y pruébala en el navegador antes.

      Eliminar
  26. Hola Oloman: Hay alguna forma de hacer que se refresque el contenido que muestra cada x minutos? Es decir, que si hay una modificación en el blog origen (conde apunta la url), y tienes abierto este widget, refresque la información a mostrar y muestre el cambio?

    gracias

    ResponderEliminar
    Respuestas
    1. No lo sé, pero quizás añadiendo un setInterval() a la función showGadget(), puede que te funcione.

      Eliminar
  27. Podría utilizar esta lista con la lista de blog (predeterminada de blogger), la lista de blog, web en donde te sale titulo, y recientes entradas de dichos blogs. En vez de la predeterminada, con una imagen en miniatura, que pudiera meterle este diseño y el sistema de lectura este. ??

    ResponderEliminar
    Respuestas
    1. En un principio no NeoPeseta. Este código es sólo para leer un feed.

      Eliminar
  28. Hola como estas?
    me gstaria saber como hacer para que aparezca tambien la imagen que acompaña al post.
    Lei todos los comentarios, pero creo que ninguno pregunto esto.
    muchas gracias

    ResponderEliminar
  29. Hola como estas?
    y ya que estamos te hago otra pregunta...
    Se puede ordenar alfabeticamente los post?
    muchas gracias

    ResponderEliminar
    Respuestas
    1. Hola Gerardo. Sobre este gadget no te puedo dar apenas opciones porque no lo he desarrollado yo. Si te fijas en el código verás que es una aplicación de una API de Google. Por otra parte, si insertas una imagen, el cacharrito ya iba a abultar mucho.

      Eliminar