Pubblicato il 11/04/12 - aggiornato il  | 8 commenti :

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

timeline-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.
pagina-statica-blogger

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)


8 commenti :

  1. Molto, molto bella, ma piuttosto ingombrante... :)

    RispondiElimina
  2. Salve... Passo nuovamente da queste parti perchè nel tuo sito trovo sempre ciò che mi serve per risolvere i miei problemi. E' da tre anni che traffico con blogger per creare un blog/sito piacevole, interessante e che non mi porti via tutto il tempo della vita, ma gli esiti non sono stati eclatanti. Comunque piccole soddidsfazioni me le sono tolte e, dietro le quinte dei miei piccoli "onorevoli" blog, c'è a tua insaputa un tuo grande aiuto. Insomma questo sito è bello e profondo di conoscenze e tanta professionalità. Complimenti...

    RispondiElimina
    Risposte
    1. @eurojackpot
      Ti ringrazio ma sono consapevole che siano molti i lettori che usano i miei articoli per migliorare i loro siti. Dovrei pensare un po' anche a migliorare il mio :D

      Elimina
  3. Bella, Ciao Ernest una domanda, come faccio a mettere sotto i post la domanda ...Ti potrebbe interessare anche...poi far vedere le 4 o 5 miniature di altri post? Grazie in anticipo..

    RispondiElimina
  4. @Antonio
    Segui questo post
    http://www.ideepercomputeredinternet.com/2012/02/come-personalizzare-il-widget.html

    RispondiElimina
  5. Fatto tutto ok, ma mi appaiono nella home page, non si possono mettere sotto il post quando si apre tutto l'articolo?
    ES: Clicca su CONTINUA A LEGGERE e alla fine del post inserire questi widget?

    RispondiElimina
    Risposte
    1. @Antonio
      Li puoi inserire in una qualsiasi parte del modello. Per metterli alla fine del post devi incollare il codice prima della linea
      div class='post-footer'
      come del resto scritto anche nel post. Per visualizzare il widget solo nei post e non in homepage bisogna mettere un tag condizionale che è presente nella seconda opzione di codice. Leggi l'articolo più attentamente.

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy