JMiur [E]

Timeline es un plugin para jQuery que genera "líneas de tiempo" visuales utilizando los datos de distintos servicios como Twitter, YouTube, Flickr, Vimeo, SoundCloud y otros pero, que también permite usar json por lo tanto, leer las entradas de un blog de Blogger y esto es lo que ha hecho Emilio Cobos; modificar el script original para permitirnos agregarlo en nuestros sitios.

Es simple de implementar (una vez que Emilio logró que funcionara, claro); basta tener jQuery en la plantilla y luego, personalizar algunos detalles.

Si lo vamos a agregar a la plantilla, primero el CSS:
<link href='http://veritetimeline.appspot.com/latest/timeline.css' rel='stylesheet' />
Si lo vamos a agregar a una entrada (como en este caso) o a una página estática, en lugar de la etiqueta LINK que suele no ser aceptada por el editor, importamos el estilo de esta forma:
<style type="text/css">@import url("http://veritetimeline.appspot.com/latest/timeline.css");</style>
Lo razonable sería usar páginas estáticas o elementos HTML para que el script sólo se cargue cuando alguien lo desea así que ahí, ponemos el DIV vacío:
<div id="timeline"></div>
y luego, el script:
<script>
  window.TimelineConfig = {}
  /*
    // si quisiéramos que la primera página tuviera una imagen especial:
    window.TimelineConfig = { imagenPresentacion:'URL_imagen', chars:500 }
  */
</script>
<script src="http://emiliocobos.site40.net/blogger/demos/timeline/timeline-min.js"></script>
<script type="text/javascript">
  var time = new VMM.Timeline("100%","500px");
  $.ajax({
    dataType:'jsonp',
    url:'http://miblog.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=20',
    success:function(data){
      time.init(bloggerTimeline(data))
    }
  });
</script>
donde debemos colocar el ancho (500 por defecto) la URL del blog y establecer la cantidad de datos a leer (20 por defecto)

Puesto así, tal cual, el script se ejecutará al ingresar a la página y se mostrará en el DIV timeline.

Un poco de CSS extra permitiría diseñar la estructura de ese DIV contenedor. En este ejemplo, permanece oculto hasta que se hace click en el enlace respectivo que simplemente dice esto::
<div style="text-align:center">
  <span style="cursor:pointer;" onclick="$('#timeline').show();">ver timeline</span>
</div>
Como quería mostrarla más ancha, la coloqué fija de este modo:
<style>
  #timeline {
  display:none;
  height: 500px;
  margin: 0 auto;
  position: fixed;
  top: 200px;
  width: 910px !important;
  z-index: 1000;
}
</style>
Y, como una vez abierta, hay que cerrarla, hacemos lo contrario con otro enlace:
<div style="text-align:center">
  <span style="cursor:pointer;" onclick="$('#timeline').hide();">ocultar timeline</span>
</div>
o usamos la función toggle() de jQuery o cualquier otra cosa que se les ocurra.

En el ejemplo, adosé el botón de cerrar a la ventana, agregándole dos líneas al script:
success:function(data){
  time.init(bloggerTimeline(data))
  var tag = "<span id='clostimeline' onclick='$(\"#timeline\").hide();'>ocultar</span>";
  $('#timeline').append(tag);
}
y colocando la regla de estilo respectiva; básicamente:
#clostimeline {
  cursor: pointer;
  display: block;
  font-size: 24px;
  left: 0;
  padding: 0 15px 10px;
  position: absolute;
  text-align: center;
  top: 0;
  z-index: 1001;
}
Y eso es todo:


ver timeline

REFERENCIAS:Emilio Cobos

12 comentarios:

@blogderevistas  

Hola , te hago una pregunta totalmente fuera de tema, me tenes que ayudar.. estoy buscando el boton que comparte entradas... me hay uno que tiene forma de me gusta, que comprate el titulo de la entrada , en google solo esta el que es violeta y dice compartir, yo quiero el "Me gusta" por que los de me gusta que encontre no comparten

JMiur  

No sé cuál es el que estás tratando de agreagr ni para que servicio es.

Responder
Edu  

coloco los 3 primeros apartados en un post o pagina pero no consigo que me funcione :
1.- Importar el estilo
2.- div vacio
3 scrip
http://frogatuedu.blogspot.com.es/2012/04/import-urlhttpveritetimeline_10.html

Responder
CristJian  

Wow! me parece bastante interesante, sería una buena alternativa para mostrar los archivos del blog verdad :)

saludos

Responder
Gem@  

Estaba trabajando y pasaba por aquí jejejeje eso, que es muy llamativa la idea :)

JMiur  

me lo imaginé :-D

Responder
tnorbey  

amigo, yo hago un boletin de noticias y me encantaria tener esto en ese boletin, es estatico que actualizo una o dos veces al dia, usted me podria decir si puedo implementarlo, este es el boletin

JMiur  

Si está en Blogger, se puede usar perfectamente,

Responder
Edu  

sigo intentandolo pero nada, no se ve la parte de abajo :
http://eduardoelorriaga.blogspot.com/p/cronologia.html
ayuda porfa

Responder
Edu  

ya lo consegui.....pero alguna entrada no se ve bien del todo es normal ?
saludos

JMiur  

Imagino que sí. Eso depende del servicio y de la forma en que se interpretan las entradas.

Responder
tomat  

Hola, JMiur. Por si algún día te pica la curiosidad del problema de compatibilidad con los iPad que te comenté en otra nota, he comprobado que la entrada que provoca el problema es esta. Todas las demás van bien, pero en cuanto se muestra esta, o la página de resumen que la contine entre otras, se quedan bloqueados los controles táctiles ny no permite desplazarse. Bueno, perdona por la pesadez del tema. Un saludo.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR