Hace poco vi un script que me llamó la atención. Se llama Timeline, y permite hacer eso, timelines. En principio soporta Twitter, Youtube y JSON (pero previamente escrito), así que he tenido que cambiar un poco la función init, para que soporte objetos directamente, y poder usarla con blogger. Ésto sería un ejemplo:

Ver TimelineOcultar

Como véis, es una línea cronológica en la que se muestran las entradas por orden cronológico inverso. Es necesario tener en la plantilla jQuery. El código que hay que usar es, en un gadget Html/Javascript, o directamente en la edición de HTML. Tenéis que cambiar algunos valores, como la dirección del blog o la imagen de la primera página.

<link href="http://veritetimeline.appspot.com/latest/timeline.css" rel="stylesheet"></link>
<style>
#timeline{
    height:auto;
    position:relative;
    border:3px solid #eee;
    box-shadow: 0 0 10px rgba(0,0,0,.6);
    border-radius:15px;
    margin: 0 auto;
}
</style>
<div id="timeline" class="vmm-timeline" ></div>
<script>
 window.TimelineConfig = {
  imagenPresentacion:'URL de la imagen de la primera página',
  chars:500
 }
</script>
<script src='http://emiliocobos.site40.net/blogger/demos/timeline/timeline-min.js'></script>
<script>
 var time = new VMM.Timeline("100%","500px");//anchura y altura
 $.ajax({
  dataType:'jsonp',
  url:'http://URLDETUBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=20',//20 es el nº de entradas
  success:function(data){
   time.init(bloggerTimeline(data))
  }
 });
</script>

30 pensamientos en “Timeline del blog

  1. Imagen de Oloman Oloman el dijo:

    Original forma de presentar un blog. Conocía algunos servicios que te lo mostraban con ese estilo Timeline, pero lo hacían en su propio dominio. Este sería un buen sustituto de los cada vez más usados sliders de "entradas recientes".

    Y ya que lo he visto… muy ocurrente la manera de marcar los comentarios propios ;)

    Y otra cosa: odio los captchas LOL

    • Imagen de Emilio Cobos Álvarez el dijo:

      The begginning is a presentation page, which contains the title, the description and image configured by the user or a thumb of the blog.

      Posts are ordered inversely, starting in the published date and ending in the last updated day.

      In this case I've used the last twenty posts. The twentieth starts in "January 31, 2012", and is iterating over the posts until the last one (this, which, I don't know why has a problem with the date and only detects that was published in April).

      In other blogs it depends of how many posts have the admin chosed and how much time has passed since the post was published. In this case (I think you're referred to Vagabundia), JMiur has chosed 20 post, and the twentieth was published in march.

      As the script is large, I recommend loading it asynchronously, like in this post (see this).

      If not, the page will load a bit slower, but anyway, I don't think it is a big problem.

  2. Imagen de XimenaXimena el dijo:

    Hola.

    Quiero insertar este código de Twitter:

    <a class="twitter-timeline" href=”https://twitter.com/PepePilato” data-widget-id="290648333071024130">Tweets por @PepePilato</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

    Es para mostrar mis últimos tweets, pero no funciona, se supone que en un elemento HTML/JAVASCRIPT en la side debería funcionar, pero no me aparece nada, sólo un texto.

    Lo intento poner en este blog:

    http://blogprueba2011.blogspot.com

    Gracias y saludos.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Puedes usar las siguientes etiquetas y atributos HTML:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre data-language=""> <ul> <ol> <li>
Para poner código usa <pre data-language="[lenguaje]"><code>[código]</code></pre>, y no olvides escapar el HTMl.