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

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

Demo
Clicca qui

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.