Mostrare la Timeline dei post su Blogger.

Creare una Timeline per Blogger in cui mostrare gli ultimi post in una linea del tempo insieme alle loro miniature.

Timeline non è solo il Diario di Facebook, è anche uno script che mostra una linea cronologica di tutti i post ma visualizzati in ordine inverso. Emilio Cobos ha adattato questo script per poter essere usato anche dagli utenti di Blogger.

Si può inserire il relativo codice per esempio in un post o in una pagina statica per mostrare ai lettori gli ultimi articoli pubblicati in un modo originale. Non occorre quindi neppure modificare il modello. Funziona con JQuery, quindi la riga che installa questa libreria javascript può essere tralasciata se fosse già presente nel nostro modello. 

Ricordo che è sempre opportuno aggiornare JQuery all'ultima versione. Nel momento in cui scrivo questo post la versione più aggiornata di JQuery è la 1.7.2. Ho anche postato una Demo della Timeline per Blogger

in cui nella parte alta viene visualizzato il singolo post e nella parte bassa ci possiamo spostare con il mouse tra le ultime pubblicazioni. Ci sono anche i pulsanti di navigazione e quelli di zoom. Sono visibili anche i titoli degli ultimi articoli con le relative miniature. C'è pure un effetto hover quando si passa sopra a un elemento con il cursore.

Per l'installazione di questa Timeline per Blogger in una pagina statica occorre andare in Bacheca > Pagine > Nuova pagina > Pagina vuota.

Si aprirà l'Editor di Blogger. Dovremo andare sulla sinistra su HTML e incollare il seguente codice

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/></script>
<style type="text/css">@import url("http://veritetimeline.appspot.com/latest/timeline.css");</style>
<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"></div>
<script>
window.TimelineConfig = {
  imagenPresentacion:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ0ZoYz-Vcr9A6Rc74Z-I3ll1Gx6ieZlIWGtBP05fM-xB-Otpf6_HiANUZvwN9F_-uYxNX2Q_Tx7sqCfUKEkkYM_epXXf1t14Jft7Jk-V2XevKAizPPj41O9GjbO1W6PQCBfMgyCq2/s800/pagina-timeline.png',
  chars:500
}
</script>
<script src='http://emiliocobos.site40.net/blogger/demos/timeline/timeline-min.js'></script>
<script>
var time = new VMM.Timeline("100%","500px"); //larghezza e altezza della Timeline
$.ajax({
  dataType:'jsonp',
  url:'http://www.ideepercomputeredinternet.com/feeds/posts/default?alt=json-in-script&max-results=15',// numero di post da visualizzare
  success:function(data){
   time.init(bloggerTimeline(data))
  }
});
</script>

dove le personalizzazioni riguardano i seguenti parametri:

1. La libreria JQuery può essere tolta se già presente nel modello.
2. Lo spessore e il colore del bordo della finestra (vedi lo stile dei bordi).
3. L'arrotondamento degli angoli del rettangolo (15 pixel)
4. L'immagine iniziale del blog, imagenPresentacion, il cui URL può essere ricavato da Picasa dopo che vi si è caricata.
5. Le dimensioni della timeline in altezza (500 pixel) e larghezza (100%)
6. L'URL del blog da cui acquisire i feed per mostrarne gli articoli 
7. Il numero degli articoli da visualizzare (15).
8. Se non si vuole dipendere dai server di Emilio Cobos si possono scaricare il CSS e lo script, i cui URL sono colorati di viola, e caricarli su un nostro hosting come per esempio Google Sites o DropBox.
9. I più bravi possono anche modificare lo script per sostituire il nome dei mesi con quello in lingua italiana e modificare l'ordine di visualizzazione (p.e. 12 Aprile al posto di April 12)