Pubblicato il 02/05/15e aggiornato il

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

mappa-sito-titoli

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


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




12 commenti :

  1. Sto provando a creare la pagina. Facendo l'anteprima tutto ok, quando creo la pagina mi va sulla home e non sulla pagina creata

    RispondiElimina
  2. Dimenticavo: guardando la pagina creata ha come link quello della homepage

    RispondiElimina
  3. Stesso problema di Stefano :(

    RispondiElimina
    Risposte
    1. Ho provato a incollare il codice in un altro blog e funziona perfettamente come nella demo. Non capisco il bug che si è venuto a generare nei vostri siti da cosa possa dipendere. Cambiare URL non l'avevo mai sentito :P
      @#

      Elimina
  4. Funziona! Unico problema che pubblica gli articoli a doppio

    RispondiElimina
    Risposte
    1. Non riesco proprio a capire perché questo script abbia così tanti bug :P
      @#

      Elimina
  5. Buongiorno, ho appena creato questa pagina statica e sto aspettando di vedere qualcosa perchè per il momento resta vuota...ma non volevo parlare di questo, volevo solo dire che in effetti mi è capitato mi venisse chiesto soccorso per pagine statiche che anzichè rimandare al contenuto della medesima, riconducevano alla home. Purtroppo non sono venuta a capo del problema che resta un mistero, quindi, molto probabilmente l'errato caricamento della pagina del signor Stefano non dipende da un bug di questo script, ma da altro...che non ci è dato sapere....speriamo qualcuno sveli l'arcano.

    RispondiElimina
    Risposte
    1. Ti posso dire io da cosa dipende. Quando si incolla un codice in un post o in una pagina statica lo si fa da HTML. Se prima di pubblicare si va su Scrivi, Blogger modifica il codice in automatico e non funziona più. Per comprendere meglio leggi la parte finale di questo post in cui c'è anche uno screenshot che mostra quello che succede
      http://www.ideepercomputeredinternet.com/2015/07/creare-link-interni-segnalibri-capitoli.html
      @#

      Elimina
  6. Ciao Ernesto.
    Ho utilizzato questa mappa dall'apertura del blog (23 maggio scorso) fino alla settimana scorsa senza problemi. Ora però ci sono problemi di caricamento e non so capire il perché. Non è stato cambiato nulla nel modello.
    Attualmente i post inseriti sono 78, quindi non un grande numero.
    Ti risultano problemi temporanei? Qualche suggerimento?
    Attualmente visualizzo solo una riga rossa.
    https://ispirazioninfiera.blogspot.it/p/mappa.html
    Grazie
    Federica

    RispondiElimina
    Risposte
    1. Non funziona più Google Drive
      http://www.ideepercomputeredinternet.com/2015/10/google-drive-hosting-deprecato.html
      Salvo il tuo commento per ripristinare il widget al più presto
      @#

      Elimina
    2. Grazie per il post di aggiornamento.
      Ora funziona tutto regolarmente.

      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.