Un timeline para Blogger

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