Widget scorrevole verso l'alto per Blogger che mostra titoli e snippet degli Ultimi Articoli.

Come installare su Blogger il widget degli Ultimi Post con scorrimento verticale che mostra titoli e snippet del riassunto.

Giusto ieri ho pubblicato un gadget che mostra i titoli degli Ultimi Articoli con uno scorrimento orizzontale. Il widget che mi accingo a presentare oggi ha invece uno scorrimento verticale con i titoli dei post che salgono dal basso verso l'alto. Il gadget non ha una larghezza predefinita e può essere installato in una sidebar di qualsiasi dimensione. Lo si può inserire anche in una pagina statica stando ben attenti a pubblicare da HTML e a incollare nuovamente il codice qualora si decidesse di modificare qualcosa. Si può invece configurare la sua altezza e quando si passerà sopra a un titolo con il cursore si bloccherà lo scorrimento di titoli e riassunti.

Per questo gadget oltre al javascript si utilizza il tag <marquee> che è stato deprecato dal W3C ma che è sempre supportato da tutti i browser. Non ci sono librerie aggiuntive e neppure file caricati su hosting esterni in modo da renderlo sempre funzionante. L'unica condizione è che si siano attivati i Feed del blog.

Se si decide di posizionarlo in una sidebar si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e, in Sezioni del sito, si incolla questo codice

<style>.titolo{
font-weight:bold;
margin-top:12px;
}
.more{
margin-bottom:10px;
padding:12px;
}
#widgclass{
padding-bottom:2px;
background-color:#DDEEFF;
padding:4px;
border:1px solid #003366;
}
</style>
<script language="javascript">
var numeropost = 10;
var speed = 2;
var sommario = true;
var numerocaratteri = 120;
var widalt = 250;
var IPCEIart = false;
function showrecentposts(json) {
  document.write('<marquee id="IPCEIWd" direction="up" width="100%" scrollamount="' + speed + '" height="' + widalt + 'px" align="top" onMouseOver="stop()" onMouseOut="start()">');
  for (var i = 0; i < numeropost; i++) {
    var entry = json.feed.entry[i];
    var IPCEItk = entry.title.$t;
    var IPCEItc;
    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        IPCEItc = entry.link[k].href;
        break;
      }
    }
    IPCEItk = IPCEItk.link(IPCEItc);
    var IPCEIms = "Leggi tutto>>";
    IPCEIms = IPCEIms.link(IPCEItc);
    var IPCEIart = entry.published.$t;
    var anno = IPCEIart.substring(0,4);
    var mese = IPCEIart.substring(5,7);
    var giorno = IPCEIart.substring(8,10);
    var mese2 = new Array();
    mese2[1] = "Gen";
    mese2[2] = "Feb";
    mese2[3] = "Mar";
    mese2[4] = "Apr";
    mese2[5] = "Mag";
    mese2[6] = "Giu";
    mese2[7] = "Lug";
    mese2[8] = "Ago";
    mese2[9] = "Set";
    mese2[10] = "Ott";
    mese2[11] = "Nov";
    mese2[12] = "Dic";
    if ("content" in entry) {
      var post1 = entry.content.$t;
    } else
      if ("summary" in entry) {
      var post1 = entry.summary.$t;
      } else var postcontent = "";
    var re = /<\S[^>]*>/g;
    post1 = post1.replace(re, "");
      document.write('<div class="titolo">');
    document.write('');
    document.write(IPCEItk);
    if (IPCEIart == true) {
      document.write(' <span class="data">[' + giorno + '.' + mese2[parseInt(mese,10)] + ']</span>');
    }
    document.write('</div><div class="contenuto">');
    if (sommario == true) {
      if (post1.length < numerocaratteri) {
        document.write(post1);
      } else {
        post1 = post1.substring(0, numerocaratteri);
        var post2 = post1.lastIndexOf(" ");
        post1 = post1.substring(0,post2);
        document.write(post1);
        document.write(' <span class="more">... ' + IPCEIms + '</span>');
       }
    }document.write('<br/>');
     document.write('</div>');
  }document.write('</marquee>');
}
</script>
<script src="http://www.ideepercomputeredinternet.com/feeds/posts/default?
orderby=published&alt=json-in-script&callback=showrecentposts">
</script>

Si salva e si posiziona con il drag & drop del mouse.

Le personalizzazioni più importanti riguardano i seguenti parametri:

1. In numeropost =10; si seleziona il numero di articoli che intendiamo vedere scorrere nel widget
2. In speed = 2; si configura la velocità di scorrimento. A numero più alto corrisponde velocità di scorrimento più elevata
3. var sommario = true; per mostrare anche il riassunto dei post. Se non lo si vuole visualizzare, si sostituisce true con false.
4. In numerocaratteri = 120; si imposta il numero dei caratteri del sommario se è stato impostato con true.
5. Al posto dell'URL di questo blog va inserito quello del vostro.
6. Si possono modificare le distanze all'interno dell'elemento modificando i valori dei tag margin e padding riferiti a top (alto), bottom (basso)
7. In widalt = 250; si configura l'altezza del widget
8. background-color:#DDEEFF; rappresenta il colore di background del widget (#FFFFFF; per avere sfondo bianco). Consultare il post sui codici dei colori.
9. border:1px solid #003366; contiene i parametri che determinano lo stile del bordo.
10. Leggi tutto>> è il link visualizzato alla fine del riassunto per aprire il post
11. Se si cambia il feed dei post del blog con quello degli ultimi articoli per una singola etichetta che sarà di questo tipo
    www.ideepercomputeredinternet.com/feeds/posts/default/-/nome-etichetta?…
    si potrà visualizzare lo scorrimento degli ultimi post riferiti a quella data etichetta.