Pubblicato il 14/10/16 - aggiornato il  | 31 commenti :

Come mostrare in una pagina statica l'elenco di tutti i post di Blogger con data e etichette.

Come mostrare in una pagina statica di Blogger una tabella con un elenco di tutti i post pubblicati su tre colonne con titoli, data e etichette e link agli articoli.
Continuo nell'opera di ripristino dei widget non più funzionanti a seguito dell'abbandono del servizio di hosting da parte di Google Drive. Il metodo utilizzato è quello di ripristinare i gadget inserendo il codice dei file esterni direttamente nel modello, negli elementi HTML/Javascript o nell'Editor del Post o della Pagina.

Il widget a cui ni riferisco in questo post è quello di una Sitemap dedicata ai lettori invece che ai motori di ricerca. Si tratta di mostrare un elenco di tutti i post pubblicati fino  quel momento che sarà aggiornato automaticamente tutte le volte che se ne pubblicheranno altri.

Avere un widget che mostri ai lettori tutti i contenuti che abbiamo messo online è uno dei metodi migliori per catturare la loro attenzione e quindi farli rimanere il più possibile nel nostro sito. La permanenza dei navigatori su un sito è uno dei 200 fattori di ranking più importante per Google e gli altri motori.

L'aspetto della mappa del sito sarà il seguente

mappa-del-sito-blogger

con la possibilità di modificarne i codici dei colori, la famiglia dei caratteri (Georgia), la dimensione delle tre colonne, l'altezza massima della tabella (1300 pixel) che comunque potrà essere visualizzata tutta con lo scorrimento del cursore posto sulla destra.






Per la sua installazione si va su Pagine -> Nuova Pagina  e si digita il titolo della stessa. Si clicca sul bottone HTML che si trova accanto a Scrivi e si incolla questo codice

<div id="bp_toc" style="max-height:1300px;overflow:scroll;overflow-x:auto;">
</div>
<script type='text/javascript'>
//<![CDATA[
/*=== Script per creare una mappa del sito su Blogger
---------------------------------------------------
Autore: Beautiful Beta - beautifulbeta.blogspot.com
Tradotto in italiano da: Idee per Computer ed Internet
URL: www.ideepercomputeredinternet.com
--------------------------------------------------- ===*/
   var postTitle = new Array();     // array of posttitles
   var postUrl = new Array();       // array of posturls
   var postDate = new Array();      // array of post publish dates
   var postSum = new Array();       // array of post summaries
   var postLabels = new Array();    // array of post labels
// global variables
   var sortBy = "datenewest";         // default value for sorting ToC
   var tocLoaded = false;           // true if feed is read and ToC can be displayed
   var numChars = 250;              // number of characters in post summary
   var postFilter = '';             // default filter value
   var tocdiv = document.getElementById("bp_toc"); //the toc container
   var totalEntires =0; //Entries grabbed till now
   var totalPosts =0; //Total number of posts in the blog.
// main callback function
function loadtoc(json) {
   function getPostData() {
   // this functions reads all postdata from the json-feed and stores it in arrays
      if ("entry" in json.feed) {
         var numEntries = json.feed.entry.length;
         totalEntires = totalEntires + numEntries;
         totalPosts=json.feed.openSearch$totalResults.$t
         if(totalPosts>totalEntires)
         {
         var nextjsoncall = document.createElement('script');
         nextjsoncall.type = 'text/javascript';
         startindex=totalEntires+1;
         nextjsoncall.setAttribute("src", "/feeds/posts/summary?start-index=" + startindex + "&max-results=500&alt=json-in-script&callback=loadtoc");
         tocdiv.appendChild(nextjsoncall);
         }
      // main loop gets all the entries from the feed
         for (var i = 0; i < numEntries; i++) {
         // get the entry from the feed
            var entry = json.feed.entry[i];
         // get the posttitle from the entry
            var posttitle = entry.title.$t;
         // get the post date from the entry
            var postdate = entry.published.$t.substring(0,10);
         // get the post url from the entry
            var posturl;
            for (var k = 0; k < entry.link.length; k++) {
               if (entry.link[k].rel == 'alternate') {
               posturl = entry.link[k].href;
               break;
               }
            }
         // get the post contents from the entry
         // strip all html-characters, and reduce it to a summary
            if ("content" in entry) {
               var postcontent = entry.content.$t;}
            else
               if ("summary" in entry) {
                  var postcontent = entry.summary.$t;}
               else var postcontent = "";
         // strip off all html-tags
            var re = /<\S[^>]*>/g;
            postcontent = postcontent.replace(re, "");
         // reduce postcontent to numchar characters, and then cut it off at the last whole word
            if (postcontent.length > numChars) {
               postcontent = postcontent.substring(0,numChars);
               var quoteEnd = postcontent.lastIndexOf(" ");
               postcontent = postcontent.substring(0,quoteEnd) + '...';
            }
         // get the post labels from the entry
            var pll = '';
            if ("category" in entry) {
               for (var k = 0; k < entry.category.length; k++) {
                  pll += '<a href="javascript:filterPosts(\'' + entry.category[k].term + '\');" title="Click here to select all posts with label \'' + entry.category[k].term + '\'">' + entry.category[k].term + '</a>,  ';
               }
            var l = pll.lastIndexOf(',');
            if (l != -1) { pll = pll.substring(0,l); }
            }
         // add the post data to the arrays
            postTitle.push(posttitle);
            postDate.push(postdate);
            postUrl.push(posturl);
            postSum.push(postcontent);
            postLabels.push(pll);
         }
      }
      if(totalEntires==totalPosts) {tocLoaded=true;showToc();}
   } // end of getPostData
// start of showtoc function body
// get the number of entries that are in the feed
//   numEntries = json.feed.entry.length;
// get the postdata from the feed
   getPostData();
// sort the arrays
   sortPosts(sortBy);
   tocLoaded = true;
}
// filter and sort functions
function filterPosts(filter) {
// This function changes the filter
// and displays the filtered list of posts
  // document.getElementById("bp_toc").scrollTop = document.getElementById("bp_toc").offsetTop;;
   postFilter = filter;
   displayToc(postFilter);
} // end filterPosts
function allPosts() {
// This function resets the filter
// and displays all posts
   postFilter = '';
   displayToc(postFilter);
} // end allPosts
function sortPosts(sortBy) {
// This function is a simple bubble-sort routine
// that sorts the posts
   function swapPosts(x,y) {
   // Swaps 2 ToC-entries by swapping all array-elements
      var temp = postTitle[x];
      postTitle[x] = postTitle[y];
      postTitle[y] = temp;
      var temp = postDate[x];
      postDate[x] = postDate[y];
      postDate[y] = temp;
      var temp = postUrl[x];
      postUrl[x] = postUrl[y];
      postUrl[y] = temp;
      var temp = postSum[x];
      postSum[x] = postSum[y];
      postSum[y] = temp;
      var temp = postLabels[x];
      postLabels[x] = postLabels[y];
      postLabels[y] = temp;
   } // end swapPosts
   for (var i=0; i < postTitle.length-1; i++) {
      for (var j=i+1; j<postTitle.length; j++) {
         if (sortBy == "titleasc") { if (postTitle[i] > postTitle[j]) { swapPosts(i,j); } }
         if (sortBy == "titledesc") { if (postTitle[i] < postTitle[j]) { swapPosts(i,j); } }
         if (sortBy == "dateoldest") { if (postDate[i] > postDate[j]) { swapPosts(i,j); } }
         if (sortBy == "datenewest") { if (postDate[i] < postDate[j]) { swapPosts(i,j); } }
      }
   }
} // end sortPosts
// displaying the toc
function displayToc(filter) {
// this function creates a three-column table and adds it to the screen
   var numDisplayed = 0;
   var tocTable = '';
   var tocHead1 = 'Titolo del Post';
   var tocTool1 = 'Clicca per ordinare per titolo';
   var tocHead2 = 'Data';
   var tocTool2 = 'Clicca per ordinare per data';
   var tocHead3 = 'Etichette';
   var tocTool3 = '';
   if (sortBy == "titleasc") {
      tocTool1 += ' (scendi)';
      tocTool2 += ' (nuovi)';
   }
   if (sortBy == "titledesc") {
      tocTool1 += ' (scendi)';
      tocTool2 += ' (prima nuovi post)';
   }
   if (sortBy == "dateoldest") {
      tocTool1 += ' (sali)';
      tocTool2 += ' (prima nuovi post)';
   }
   if (sortBy == "datenewest") {
      tocTool1 += ' (sali)';
      tocTool2 += ' (prima vecchi post)';
   }
   if (postFilter != '') {
      tocTool3 = 'Clicca per vedere tutti i post';
   }
   tocTable += '<table>';
   tocTable += '<tr>';
   tocTable += '<td class="toc-header-col1">';
   tocTable += '<a href="javascript:toggleTitleSort();" title="' + tocTool1 + '">' + tocHead1 + '</a>';
   tocTable += '</td>';
   tocTable += '<td class="toc-header-col2">';
   tocTable += '<a href="javascript:toggleDateSort();" title="' + tocTool2 + '">' + tocHead2 + '</a>';
   tocTable += '</td>';
   tocTable += '<td class="toc-header-col3">';
   tocTable += '<a href="javascript:allPosts();" title="' + tocTool3 + '">' + tocHead3 + '</a>';
   tocTable += '</td>';
   tocTable += '</tr>';
   for (var i = 0; i < postTitle.length; i++) {
      if (filter == '') {
         tocTable += '<tr><td class="toc-entry-col1"><a href="' + postUrl[i] + '" title="' + postSum[i] + '">' + postTitle[i] + '</a></td><td class="toc-entry-col2">' + postDate[i] + '</td><td class="toc-entry-col3">' + postLabels[i] + '</td></tr>';
         numDisplayed++;
      } else {
          z = postLabels[i].lastIndexOf(filter);
          if ( z!= -1) {
             tocTable += '<tr><td class="toc-entry-col1"><a href="' + postUrl[i] + '" title="' + postSum[i] + '">' + postTitle[i] + '</a></td><td class="toc-entry-col2">' + postDate[i] + '</td><td class="toc-entry-col3">' + postLabels[i] + '</td></tr>';
             numDisplayed++;
          }
        }
   }
   tocTable += '</table>';
   if (numDisplayed == postTitle.length) {
      var tocNote = '<span class="toc-note">Elenco di tutti i ' + postTitle.length + ' posts<br/></span>'; }
   else {
      var tocNote = '<span class="toc-note">Displaying ' + numDisplayed + ' posts labeled \'';
      tocNote += postFilter + '\' of '+ postTitle.length + ' posts total<br/></span>';
   }
   tocdiv.innerHTML = tocNote + tocTable;
} // end of displayToc
function toggleTitleSort() {
   if (sortBy == "titleasc") { sortBy = "titledesc"; }
   else { sortBy = "titleasc"; }
   sortPosts(sortBy);
   displayToc(postFilter);
} // end toggleTitleSort
function toggleDateSort() {
   if (sortBy == "datenewest") { sortBy = "dateoldest"; }
   else { sortBy = "datenewest"; }
   sortPosts(sortBy);
   displayToc(postFilter);
} // end toggleTitleSort
function showToc() {
  if (tocLoaded) {
     displayToc(postFilter);
     var toclink = document.getElementById("toclink");
  }
  else { alert("Just wait... TOC is loading"); }
}
function hideToc() {
  var tocdiv = document.getElementById("toc");
  tocdiv.innerHTML = '';
  var toclink = document.getElementById("toclink");
  toclink.innerHTML = '<a href="#" onclick="scroll(0,0); showToc(); Effect.toggle('+"'toc-result','blind');"+'">» Show Table of Contents</a> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZPAKre7CMcvhJKMGkFOxoH_HvMoOkfIvRxlTgbkhfXbtAuuwtESj6ShsYijcDK2spY43NHB_qUzJHeweva7uJ82mLChoYHcDAOZB_ZQyY9M5GABxZ-brWDRyLOLYHQJL4k9HdCDujhoi9/s18/new.gif"/>';
}
//]]>
</script>
<script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>
<style scoped="" type="text/css">
    #comments {display:none;}
    </style>
<style type='text/css'>   
    #bp_toc {background:#F95B5B;color:#420202;margin:0 auto;padding:5px;}
    span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#fedede;font-family:'Georgia';font-weight:bold;text-transform:uppercase;font-size:30px;line-height:normal;}
    .toc-header-col1 {padding:10px;background-color:#fff;width:250px;}
    .toc-header-col2 {padding:10px;background-color:#fff;width:75px;}
    .toc-header-col3 {padding:10px;background-color:#fff;width:125px;}
    .toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px;
    text-decoration:none;color:#f60909;font-family:'Georgia';font-weight:bold;letter-spacing: 0.5px;}
    .toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
    text-decoration:none;}
    .toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fff;padding:5px;padding-left:5px;font-size:89%}
    .toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#555;font-size:13px;}
    .toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#f60909;}
    #bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;}
    .toc-entry-col1 {counter-increment:rowNumber;}
    #bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;}
    td.toc-entry-col2 {background:#fdfdfd;}
    </style>

quindi si va su Pubblica senza tornare su Scrivi (importante!!!). Per aver più spazio in larghezza potrebbe essere utile nascondere la sidebar solo dalla pagina statica in cui viene pubblicata la Mappa del sito così come è stato fatto nella Demo postata in un blog di test


Per nascondere la sidebar in modo da avere più spazio per la tabella della Mappa del sito si può aggiungere questo codice subito sopra a quello precedente

<style type="text/css">
#sidebar-left-1, #sidebar-right-1, #sidebar-right-2-1, sidebar-right-2-2 {
display: none;
visibility: hidden;
}
#main {
width: 920px; /* Larghezza della pagina statica */
}
</style>

dove la larghezza della pagina proposta in 920 pixel può essere modificata secondo le esigenze. Gli ID colorati di viola sono quelli delle sezioni che si visualizzano in Layout.

PERSONALIZZAZIONI


Oltre ai codici dei colori e alla famiglia di font si possono personalizzare anche le larghezze delle singole colonne. Le larghezze proposte sono 250px, 75px e 125px. I nuovi articoli avranno accanto l'icona NEW che è presente nel codice con il suo URL new.gif colorato di viola. Concludo ricordando che si può cliccare su Titolo del post per un ordine alfabetico dei titoli dei post e cliccare su Data per un ordine di anzianità di pubblicazione. Nella prima colonna si può scegliere l'ordine inverso vale a dire partire dalla A fino alla Z oppure partire dalla Z fino alla A mentre nella seconda colonna con un click si possono mostrare prima i post recenti o quelli più vecchi.


31 commenti :

  1. Ho il solito problema che avevo evidenziato nel post correlato di qualche anno fa: incollo il codice, faccio l'anteprima e vedo i posts, salvo e quando vado sulla pagina mi ritrovo in home invece che nella nuova pagina creata

    RispondiElimina
    Risposte
    1. Mi chiedo perché tu faccia L'Anteprima :) Pubblica poi vai su Pagine e clicca su Visualizza sotto alla pagina appena pubblicata. Anche se ho sentito dire di questo bug che comunque credevo fosse stato risolto
      @#

      Elimina
  2. Fatto. Non va più sulla home ma va sulla pagina giusta. Stavolta però non si vedono i posts.

    RispondiElimina
    Risposte
    1. Forse hai pubblicato da Scrivi e non da HTML. Cancella il codice e reincollalo pubblicando da HTML e vedrai che funziona. Ricordati di fare sempre così nelle modifiche
      @#

      Elimina
  3. No non funiona: mi compare solo il nome della pagina e la riga rossa

    RispondiElimina
  4. Perfetto Ernesto e grazie ;)Per gli interessati comunico che il widget è funzionante anche sulle "Visualizzazioni Dinamiche"

    RispondiElimina
  5. Bellissimo, tra l'altro con i colori del mio blog :-)

    RispondiElimina
  6. Ciaoo eidentemnete non sarò forse l'unica ma ho incollato il codice su Nuova Pagina, html e subito pubblica ma non lo vedo da nessuna parte.
    Non vorrei che il problema di vedere sia dovuto alla presenza nella header di tutte le icone che portano ai vari argomenti del blog. Se cosi gentile da suggerirmi qualcosa....grazie e buona fine settimana.

    RispondiElimina
    Risposte
    1. PS. Mi sono accorta ora che anche a me le miniature ultimi post non funzionano. So che hai dato la soluzione al problema ma non trovo la pagina me la ridai qui gentilmente. Grazie e scusa.

      Elimina
    2. Il codice funziona perfettamente. Probabilmente lo hai copiato male essendo molto lungo. Il widget degli ultimi post con miniature sta qui
      http://www.ideepercomputeredinternet.com/2016/09/recent-post-widget-with-thumbnails-blogger.html
      @#

      Elimina
    3. Grazie quello semplice delle miniature okk. Per l'altro ci riprovo.

      Elimina
  7. In qualche sito dà problemi. L'ho copiato in due blog: in uno funziona e in uno no.

    RispondiElimina
    Risposte
    1. Può darsi che dipenda dalla presenza di widget simili che utilizzano lo stesso URL dei feed come il gadget degli Ultimi Post. In questi casi si può provare a disinstallare il widget che si presume dia noia per poi reinstallarlo di nuovo ovviamente se abbiamo a disposizione il codice necessario
      @#

      Elimina
  8. Ho provato a rimuovere sia gli ultimi post che gli articoli casuali ma senza successo. Peccato perchè il gadget era molto bello.

    RispondiElimina
  9. Gent.mo Ernesto,
    sto vedendo che nel tuo sito hai delle utilità che compensano il deficit di Blogspot.
    Così ho inserito anche il codice per la site map visitatori, però ho lo stesso problema con l'indirizzo, come con l'altro widget, quello dei post delle etichette.
    La pagina va bene e si vede benissimo, però con questo strano indirizzo: http://incontraregesu.blogspot.it/p/totalentires-var-nextjsoncall-document.html
    E' normale questo indirizzo o posso sistemarlo?
    Ho fatto una pagina statica e l'ho collegata con un widget laterale; come titolo della pagina ho messo "Site Map".

    Grazie per il tuo gentile servizio e aiuto.
    Saluti.

    RispondiElimina
    Risposte
    1. Il problema è lo stesso. Hai pubblicato la pagina senza titolo e l'URL è stato generato automaticamente dalla prima riga di codice del contenuto
      @#

      Elimina
    2. Gent.mo Ernesto,
      grazie per la risposta.
      Ma dopo l'esperienza del primo problema, ho fatto attenzione a inserire il titolo nella pagina...
      Forse debbo inserire il titolo da qualche altra parte?

      Elimina
    3. Che dici: se scrivo "Site Map" prima di "totalentires-var-nextjsoncall-document" nel codice, prende quello? O è ormai troppo tardi?

      Elimina
  10. RISOLTO
    Ho fatto una nuova pagina http://incontraregesu.blogspot.it/p/sitemap.html
    Un'ultima domanda: quel /p/ che compare nell'indirizzo starebbe a significare "PAGINA"?
    Grazie per tutto.
    Saluti

    RispondiElimina
    Risposte
    1. È la struttura di tutte le pagine di Blogger dominio/p/nomepagina.html
      @#

      Elimina
  11. molte grazie per questo codice; avrei necessità di fare una variazione, se possibile e cioè abbassare l'altezza della riga ove è scritto "ELENCO DI TUTTI I nnn POSTS".
    Dove posso intervenire?
    grazie ancora, Valter Bruno

    RispondiElimina
  12. ho notato adesso che forse modificare questa riga può creare qualche problema quando si esegue una ricerca, ad esempio, per Etichette e la descrizione cambia di contenuto, utilizzando lo spazio disponibile. Forse è meglio non toccare troppo; magari agire sulla dimensione del carattere :)
    Valter Bruno

    RispondiElimina
  13. Grazie per il valido suggerimento, funziona alla grande. Volevo solo chiederti se è possibile allungare la tabella a piacimento dato che mostra determinate dimensioni e poi scorre. La mia pagina di base è molto più lunga...

    RispondiElimina
  14. Nelle prime righe del codice sostituisci height:1300px con un valore maggiore fino a trovare l'altezza giusta. Ricordati di modificare sempre da HTML senza tornare su Scrivi altrimenti reincolla tutto il codice
    @#

    RispondiElimina
  15. Perdonami Ernesto volevo un altro suggerimento. Mi piacerebbe aggiungere del testo tra il titolo "Elenco di tutti i post" e la tabella in modo da spiegare la possibilità di modulare i risultati per titolo, per date ecc. Ho visto che passando il mouse esce un'etichetta ma non comparendo alcun elemento grafico vistoso sarà difficile che un utente individui a prima occhiata questa possibilità, pertanto volevo specificare con del testo. Credi sia possibile?

    RispondiElimina
    Risposte
    1. Lo puoi aggiungere prescindere dalla tabella. Nella pagina statica in Scrivi inserisci il testo che ritieni opportuno per spiegare ai lettori il suo utilizzo quindi subito dopo incolli il codice andando su HTML
      @#

      Elimina
  16. Ciao, posso chiederti se esiste un modo per troncare l'anteprima del post all'ultima parola senza spezzare le parole dello snippet con il conteggio delle lettere?

    Questo è lo script del mio tema in cui mi piacerebbe implementare la funzione sopra:

    // Summary Grid Posts
    $('.sample-post').each(function() {
    var re = /<\S[^>]*>/g;
    var postcontent = $(this).find('.ct-sample-post').html().replace(re,"");
    if(postcontent.length > 190){
    postcontent = ''+postcontent.substring(0,190)+'...';
    }
    $(this).html(''+ postcontent +'');
    });
    ______________________________________________

    // reduce postcontent to numchar characters, and then cut it off at the last whole word
    if (postcontent.length > numChars) {
    postcontent = postcontent.substring(0,numChars);
    var quoteEnd = postcontent.lastIndexOf(" ");
    postcontent = postcontent.substring(0,quoteEnd) + '...';
    }

    RispondiElimina
    Risposte
    1. Non so a quale widget ti riferisci. Però dallo script mi pare che i caratteri che vengono mostrati siano 190. Quello che puoi fare è di modificare questo numero. Altro non ti so dire mi spiace
      @#

      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