Pubblicato il 14/10/16e aggiornato il

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://lh3.googleusercontent.com/-RjOgALA1w_U/VUSBViUDQRI/AAAAAAAAsok/IpWh8uFHJio/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.




23 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

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.