Pubblicato il 05/04/16e aggiornato il

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.
widget-scorrimento-verticale-blogger
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.




3 commenti :

  1. Ciaooo, scusa il disturbo ma rilevo sulla mia bacheca del blog questo messaggio ...
    Tutti i visitatori potranno visualizzare i tuoi blog con dominio Blogspot attraverso una connessione criptata visitando https://.blogspot.com. I link esistenti e le pagine dei blog aggiunte ai Preferiti continueranno a funzionare. Come parte del cambiamento, l'impostazione Disponibilità HTTPS verrà rimossa e i tuoi blog avranno sempre una versione HTTPS.

    Sinceramente o la vecchiaia (72) mi appanna la testa ma io non ci ho capito niente tantopiù che ora abbiamo "IT" e non "COM". Tra l'altro quando voglio l'anteprima del post che scrivo nell'indirizzo che viene in automatico devo correggere e togliere "com" per mettere "it" altrimenti l'anteprima non la vedo.
    Grazie tante della risposta e scusa ancora il disturbo.
    Edvige

    RispondiElimina
    Risposte
    1. Quel messaggio è presente in tutte le Bacheche. Veniamo informati che a partire dalla fine di Aprile i blog del tipo blogspot avranno una connessione criptata. Se tu accedi a Facebook o a Twitter vedrai che la prima parte dell'URL è HTTPS invece che HTTP. Significa che i dati scaricati dal browser vengono criptati. L'utente non deve fare assolutamente nulla. Fino ad ora si poteva scegliere questa impostazione su Bacheca > Impostazioni > HTTPS > Disponibilità HTTPS. Non è ancora chiaro se questa opzione verrà attivata anche per i blog con dominio personalizzato cioè come questo del tipo www.esempio.com. Quando le cose saranno più chiare ci farò un post
      @#

      Elimina
    2. Grazie infinite molto gentile. Ti auguro una buona serata e prosecuzione di settimana.

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.