Creare una mappa del sito di Blogger per i lettori.

Come mostrare in una pagina statica di Blogger la Mappa del sito con tutti i titoli dei post, la data di pubblicazione e le etichette aggiunte a ciascun articolo.

Credo sia chiaro a tutti come soltanto mostrando ai lettori tutta la nostra produzione di contenuti si riesca a mantenere sul nostro sito i lettori il più possibile. Il dato della permanenza media su un sito è uno dei più rilevanti tra i più di 200 fattori di ranking di Google.

Tra l'altro è lo stesso Google a invitare gli webmaster a creare una sitemap del nostro sito non solo per i motori di ricerca ma a beneficio dei lettori. Ho già presentato diverse alternative per realizzare una Mappa del sito di questo genere. Ricordo la schermata per mostrare tutti i post suddivisi per etichetta e la Mappa del sito con Miniature. In questo post vediamo come elencare tutti gli articoli del nostro sito mostrati su tre colonne. Nella prima viene mostrato il titolo insieme al numero d'ordine, nella seconda la data di pubblicazione e nella terza le etichette che sono state aggiunte a ciascun post

Sulla destra è visibile un cursore per scorrere facilmente tutta la nostra produzione di articoli. Questo script è opportuno postarlo in una pagina statica e, per aumentare lo spazio, può essere utile allargare l'area della pagina nascondendo la sidebar, o le sidebar, e il footer. 

Demo
Clicca qui

Si tratta comunque di una operazione opzionale e si può installare la sitemap anche in una normale pagina statica senza modifiche. Si va su Pagine > Nuova Pagina e si digita il titolo prescelto. In basso si va su HTML, che è il bottone accanto a Scrivi, e si incolla questo codice

<div id="bp_toc" style="max-height:1300px;overflow:scroll;overflow-x:auto;">
</div>
<script src="https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/blogger-sitemap.js" type="text/javascript"></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>

Si pubblica la pagina. Le principali personalizzazioni riguardano i codici dei colori, la famiglia di font (Georgia) e la larghezza delle tre colonne.  L'URL del javascript colorato di viola per avere sotto controllo tuto il codice può essere sostituito dall'indirizzo dello stesso javascript dopo che si è scaricato e successivamente caricato sul nostro account Google Drive.

Aggiornamento: Il widget è stato ripristinato. Per la sua installazione consultate questo post

Mappa del sito di Blogger per i lettori