Pubblicato il 12/01/17 - aggiornato il  | 11 commenti :

Come mostrare tutti i post di Blogger divisi per etichette con casella di ricerca e gli ultimi aggiornamenti.

Come installare una Mappa del Sito che mostra tutti i titoli dei post del blog su Blogger insieme alle miniature, opzionalmente al numero dei commenti, con casella di ricerca e menù per le etichette.
Per mantenere il più a lungo possibile i lettori sul nostro sito occorre mostrar loro il meglio dei nostri contenuti e bisogna anche dar loro modo di scorrerli per scegliere quelli che li interessano maggiormente. Oltre a mostrare i widget degli Ultimi Post e dei Post più popolari si può mostrare anche un Post in Evidenza. Una soluzione interessante che è vista di buon occhio anche da Google è quella di mostrare una Mappa del Sito per il lettore.

Una mappa del sito o Sitemap sappiamo bene che deve essere inviata a Google e eventualmente agli altri motori di ricerca. L'equivalente per i lettori deve essere ovviamente facilmente consultabile e certamente non in formato XML come quella inviata a Google. Si tratta di creare una pagina statica in cui il lettore possa scorrere i titoli dei post per poi cliccare sopra a quelli che ha intenzione di leggere.

Ho già mostrato diverse soluzioni per creare una sitemap per i lettori. Quella che vado a presentare oggi è probabilmente la più sofisticata e permette al lettore di scorrere i post selezionandone l'etichetta, cercando gli ultimi aggiornamenti o addirittura effettuare una ricerca per parole chiave.

mappa-sito-blogger

Nella parte alta della pagina vengono mostrati tre campi di ricerca. Nel primo si sceglie se visualizzare gli Ultimi Articoli o gli Ultimi Aggiornamenti. Nel secondo si clicca sulla freccia verticale e si sceglie l'etichetta di cui visualizzare i post scegliendola dal menù che si apre. Infine nella terza riga si può digitare una parola o una frase di ricerca per poi andare su Invio. In questo modo si visualizzerà un elenco di post pertinenti come risultati di ricerca con la query immessa.






Gli articoli saranno mostrati su due colonne con a sinistra la miniatura della prima immagine del post e con a destra il titolo dell'articolo cliccabile. Di default viene mostrato anche il numero dei commenti che però come vedremo potremo anche eliminare. Vengono mostrati un massimo di 30 elementi per ogni schermata. Si può però cliccare su Post Successivi alla fine degli stessi per visualizzarne altri 30 e così via fino alla visualizzazione di tutti i post.






L'installazione è semplicissima. Si va su Pagine -> Nuova Pagina e si digita il Titolo della Pagina che potrebbe essere Tutti i post oppure I post divisi per etichetta o altra espressione. Si clicca su HTML che è il bottone accanto a Scrivi e si incolla questo codice

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
</div>
<style type="text/css">
#resultDesc {
    margin:0 30px;
    padding:0 0;
    border-bottom:4px solid #cbe5fd;
    display:none;
}
#resultDesc span {
    display:block;
    margin:0 0;
    padding:5px 10px 7px;
    color:#cbe5fd;
}
#feedContainer {
    display:block;
    clear:both;
    margin:0 30px;
    padding:0 0;
    overflow:hidden;
    position:relative;
    border:1px solid #cbe5fd;
    border-top:none;
    text-shadow:0 1px 0 rgba(0, 0, 0, .4);
}
#feedContainer:after {
    content:"";
    display:block;
    width:1px;
    height:100%;
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    background-color:#cbe5fd;
}
#feedContainer li {
    list-style:none;
    margin:0 0;
    padding:0 0;
    border-top:1px solid #cbe5fd;
    color:#999;
    width:50%;
    float:left;
    display:inline;
}
#feedContainer li .inner {
    margin:15px 16px;
    height:120px;
    overflow:hidden;
    word-wrap:break-word;
    text-overflow:ellipsis;
}
#feedContainer li a {
    text-decoration:none;
    color:#cbe5fd;
}
#feedContainer li a:hover {
    text-decoration:none;
    color:#cbe5fd;
}
#feedContainer li a.toc-title {
    color:#F95B5B/* Colore dei titoli */
font-weight:bold;
    font-size:12px;
    margin:0 0;
}
#feedContainer li .news-text {
    margin:10px 0 0
}
#feedContainer li a img {
    margin:0 10px 0 0;
    padding:4px 4px;
    background-color:#cbe5fd;
    border:1px solid #111;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    -webkit-box-shadow:0 1px 0 #444;
    -moz-box-shadow:0 1px 0 #444;
    box-shadow:0 1px 0 #444;
    float:left;
}
#feedNav {
    margin:10px 30px 0;
    text-align:center;
    font:normal bold 12px/30px Georgia;
}
#feedNav a, #feedNav span {
    background-color:#cbe5fd;
    padding:0 0;
    color:#999;
    text-decoration:none;
    display:block;
}
#feedNav a:hover, #feedNav a:active {
    background-color:black;
    color:white;
    border:none !important;
}
#feedNav span {
    cursor:wait
}
#table-outer {
    padding:7px 10px;
    margin:30px 30px 0;
}
#table-outer input {
    display:inline-block;
    vertical-align:top;
    margin:0 2px 0 0;
    padding:0 0;
}
#table-outer table {
    border:none
}
#table-outer td {
    padding:2px 2px;
    border:none;
}
#table-outer label {
    font-weight:bold;
    color:#999;
    text-shadow:0 1px 0 rgba(0, 0, 0, .4);
    display:block;
    text-align:right;
    margin:0 10px 0 0;
}
#table-outer select[disabled] {
    opacity:.4
}
#postSearcher {
    display:block;
    margin:0 0;
    padding:0 0;
}
#postSearcher input, #table-outer select {
    width:180px;
    background-color:#111; /* Colore di sfondo della casella */
    border:none;
    display:block;
    margin:0 0;
    padding:5px 5px;
    font:normal normal 10px Georgia;
    text-transform:uppercase;
    color:#fff; /* Colore del testo della Casella */
    outline:none;
    -webkit-box-shadow:inset 0 1px 3px black, 0 1px 0 #444;
    -moz-box-shadow:inset 0 1px 3px black, 0 1px 0 #444;
    box-shadow:inset 0 1px 3px black, 0 1px 0 #444;
}
#postSearcher input {
    width:170px;
    padding:5px 5px;
}
#postSearcher input:focus, #table-outer select:focus {
    background-color:#090909;
}
@media (max-width:800px) {
    #feedContainer li {
        float:none;
        display:block;
        width:auto;
        height:auto;
    }
    #feedContainer:after {
        display:none
    }
}
</style>
<script type="text/javascript">
//<![CDATA[
var tocConfig = {
url: "http://www.ideepercomputeredinternet.com",
feedNum: 30,
labelName: false,
numChars: 0,
thumbWidth: 80,
navText: "Post Successivi ▼",
frontText: "Post Precedenti ▲",
resetToc: "Reset",
noImage: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhknZpW41DVyTohq2YfbD4cINbvjrYvHgyn49e11DjVXJgW93PFo2ATWuue9r6bJCcrTVawzNX0HNJVBigOrMYqPg5Kx97PVg8MVa5pM8a3Wra_l2CRuBaIExZpsyrzQjlAx69GvS_gW1KC/s172-Ic42/no-image.jpg",
loading: "<span>Sto caricando ...</span>",
searching: "<span>Ricerca ...</span>",
noResult: "Non ci sono risultati con questa query"
};
//]]>
</script>
<div id="table-outer">
<table border="0"><tbody>
<tr>                 <td><label for="orderFeedBy">ORDINA GLI ARTICOLI PER DATA:</label>
</td>                 <td><select id="orderFeedBy">
<option selected="" value="published">ULTIMI ARTICOLI</option>
<option value="updated">AGGIORNAMENTI</option>
</select>
</td>             </tr>
<tr>                 <td><label for="labelSorterSelect">FILTRA I POST PER ETICHETTE:</label>
</td>                 <td><span id="labelSorter"><select disabled="" id="labelSorterSelect"><option selected="">CERCA...</option></select></span>
</td>             </tr>
<tr>                 <td><label for="feed-q-box">RICERCA PER PAROLE CHIAVE:</label>
</td>                 <td><form id="postSearcher">
<input id="feed-q-box" type="text" />
</form>
</td>             </tr>
</tbody>     </table>
</div>
<header id="resultDesc"></header>
<ul id="feedContainer"></ul>
<div id="feedNav">
</div>
<script type="text/javascript">
//<![CDATA[
document.body.oncontextmenu=function() {return false;}
function getID(a) {
return document.getElementById(a);
}
var head = document.getElementsByTagName('head')[0],
tocContainer = getID('feedContainer'),
feedNav = getID('feedNav'),
orderByer = getID('orderFeedBy'),
labelSorter = getID('labelSorter'),
input = getID('postSearcher').getElementsByTagName('input')[0],
resultDesc = getID('resultDesc'),
nextPage, feedArchive, startPage = 0, filter = 0;
function showLabels(json) {
var cat = json.feed.category, skeleton = "<select id='labelSorter' onchange='changeSort(this.value);'><option value='' selected disabled>CATEGORIA...</option>";
for (var i = 0, cen = cat.length; i < cen; i++) {
  skeleton += "<option value='" + decodeURIComponent(cat[i].term) + "'>" + cat[i].term.toUpperCase() + "</option>";
}
skeleton += "</select>";
labelSorter.innerHTML = skeleton;
}
function showFeedList(json) {
var entries = json.feed.entry, postTitle, postUrl, postImage, postContent, commentNum, skeleton = "";
if (json.feed.entry) {
  for (var i = 0; i < tocConfig.feedNum; i++) {
   if (i == json.feed.entry.length) {
    break;
   }
   postTitle = entries[i].title.$t;
   for (var j = 0, jen = entries[i].link.length; j < jen; j++) {
    if (entries[i].link[j].rel == 'alternate') {
     postUrl = entries[i].link[j].href;
     break;
    }
   }
   for (var k = 0, ken = json.feed.link.length; k < ken; k++) {
    if (json.feed.link[k].rel == 'next') {
     nextPage = json.feed.link[k].href;
    }
   }
   for (var l = 0, len = entries[i].link.length; l < len; l++) {
    if (entries[i].link[l].rel == 'replies' && entries[i].link[l].type == 'text/html') {
     commentNum = entries[i].link[l].title;
     break;
    }
   }
   postContent = ("summary" in entries[i]) ? entries[i].summary.$t.replace(/<br ?\/?>/ig," ").replace(/<(.*?)>/g,"").replace(/<iframe/ig,"").substring(0,tocConfig.numChars) : "";
   postImage = ("media$thumbnail" in entries[i]) ? entries[i].media$thumbnail.url.replace(/\/s[0-9]+\-c/, "\/s" + tocConfig.thumbWidth + "-c") : tocConfig.noImage.replace(/\/s[0-9]+\-c/, "\/s" + tocConfig.thumbWidth + "-c");
   skeleton += "<li><div class='inner'>" +
   "<a href='" + postUrl + "' target='_blank'><img style='width:" + tocConfig.thumbWidth + "px;height:" + tocConfig.thumbWidth + "px;' src='" + postImage + "' alt='" + postTitle + "' /></a>" +
   "<a class='toc-title' href='" + postUrl + "' target='_blank'>" + postTitle + "</a><strong> - (" + commentNum + ")</strong><br>" +
   "<div class='news-text'>" + postContent + "&hellip;<br style='clear:both;'></div>" +
   "</div></li>";
  }
  resultDesc.innerHTML = (input.value !== '' && filter == 'search') ? "<span>Hasil penelusuran untuk kata kunci <strong>&#8220;" + input.value + "&#8221;</strong> (" + json.feed.openSearch$totalResults.$t + " Temuan)</span>" : "Total: " + json.feed.openSearch$totalResults.$t + " Artikel";;
  feedContainer.innerHTML += (nextPage) ? skeleton : "";
  if (nextPage && filter != 'search') {
   skeleton = (filter !== 0) ? "<a href='javascript:initResult(2);' class='next'>" + tocConfig.navText + "</a>" : "<a href='javascript:initResult(1);' class='next'>" + tocConfig.navText + "</a>";
  } else {
   skeleton = "<a href='#top' class='front'>" + tocConfig.frontText + "</a>";
  }
  feedNav.innerHTML = skeleton;
  input.value = '';
  labelSorter.getElementsByTagName('select')[0].removeAttribute('disabled');
  orderByer.removeAttribute('disabled');
} else {
  if (filter == 'search') {
   feedContainer.innerHTML = "";
   resultDesc.innerHTML = "";
   alert(tocConfig.noResult);
  }
  feedNav.innerHTML = "<a href='#top' class='front'>" + tocConfig.frontText + "</a>";
}
}
function initResult(archive) {
var p, param;
if (archive == 1) {
  p = nextPage.indexOf("?");
  param = nextPage.substring(p);
} else if (archive == 2) {
  p = nextPage.indexOf("?");
  param = nextPage.substring(p).replace(/\?/, '/-/' + filter + '?');
} else {
  param = "?start-index=1&max-results=" + tocConfig.feedNum + "&orderby=" + orderByer.value + "&alt=json-in-script";
}
param += "&callback=showFeedList";
updateScript(param);
}
function removeScript() {
var old = getID('temporer-script');
old.parentNode.removeChild(old);
}
function buildLabels() {
var s = document.createElement('script');
  s.type = "text/javascript";
  s.src = tocConfig.url + "/feeds/posts/summary?max-results=0&alt=json-in-script&callback=showLabels";
head.appendChild(s);
}
function updateScript(tail) {
if (startPage == 1) {
  removeScript();
  startPage = 1;
}
feedNav.innerHTML = tocConfig.loading;
feedArchive = (tocConfig.labelName !== false) ? tocConfig.url + "/feeds/posts/summary/-/" + tocConfig.labelName + tail : feedArchive = tocConfig.url + "/feeds/posts/summary" + tail;
var toc_script = document.createElement('script');
  toc_script.type = 'text/javascript';
  toc_script.src = feedArchive;
  toc_script.id = 'temporer-script';
head.appendChild(toc_script);
}
function changeSort(label) {
removeScript();
tocContainer.innerHTML = "";
resultDesc.innerHTML = "Menghitung artikel&hellip;";
feedNav.innerHTML = tocConfig.loading;
var newScript = document.createElement('script'),
  labSorter = labelSorter.getElementsByTagName('select')[0],
  l = (label !== 0) ? '/-/' + label : "";
newScript.type = 'text/javascript';
newScript.id = 'temporer-script';
newScript.src = tocConfig.url + '/feeds/posts/summary' + l + '?alt=json-in-script&max-results=' + tocConfig.feedNum + '&orderby=' + orderByer.value + '&callback=showFeedList';
head.appendChild(newScript);
labSorter.disabled = true;
orderByer.disabled = true;
filter = label;
}
function searchPost() {
removeScript();
tocContainer.innerHTML = "";
resultDesc.innerHTML = "";
feedNav.innerHTML = tocConfig.searching;
var newScript = document.createElement('script');
  newScript.type = 'text/javascript';
  newScript.id = 'temporer-script';
  newScript.src = tocConfig.url + '/feeds/posts/summary?alt=json-in-script&orderby=published&q=' + input.value + '&max-results=9999&callback=showFeedList';
head.appendChild(newScript);
filter = 'search';
return false;
}
getID('postSearcher').onsubmit =  searchPost;
orderByer.onchange = function() {
changeSort(0);
}
initResult(0);
buildLabels();
//]]>
</script>
</div>

Si va su Pubblica in alto a destra senza tornare su Scrivi.

Le personalizzazioni più rilevanti sono le seguenti:
  1. Va sostituito l'URL di questo blog con quello del vostro sito
  2. I codici dei colori dei titoli dei post, dello sfondo della casella di ricerca sono individuati da commenti colorati di verde mentre il codice #cbe5fd è quello del colore delle linee della tabella
  3. La famiglia di caratteri Georgia può essere sostituita da un'altra
  4. Se non vogliamo visualizzare il numero dei commenti si cancella la riga evidenziata di giallo
    "</a><strong> - (" + commentNum + ")</strong><br>" +
  5. La icona con l'URL con noimage verrà mostrata quando non ci siano immagini nel post
  6. La dimensione della miniatura è di 80 pixel
  7. Le scritte colorate di blu e quelle in stampatello possono essere personalizzate
  8. Le etichette sono ordinate a seconda del numero di post che contengono.


Per effettuare delle ricerche si digita la parola chiave quindi si va su Invio

ricerche-mappa-sito

Se i risultati della ricerca fossero più di 30 si potrà andare su Post Successivi per visualizzarli tutti.


11 commenti :

  1. ciao non mi mette le immagini e l articolo per il resto sembra fuzionare tutto alla grande come posso fare?

    RispondiElimina
    Risposte
    1. Ti mette solo le immagini che sono prima del read more o jump o intervallo
      @#

      Elimina
  2. ""Le etichette sono ordinate a seconda del numero di post che contengono."
    Ernesto scusa, ci sarebbe la possibilità di ordinarle in ordine alfabetico?
    Grazie e cari saluti

    RispondiElimina
    Risposte
    1. Ci sono altri widget con l'ordinamento alfabetico come questi
      http://www.ideepercomputeredinternet.com/2015/05/blogger-sitemap.html
      http://www.ideepercomputeredinternet.com/2014/09/blogger-sitemap-etichette-label-post-widget.html
      @#

      Elimina
  3. Ciao Ernesto, volevo chiederti se, ed eventualmente come, secondo te è possibile effettuare le seguenti modifiche:

    1) visualizzare l'elenco dei post come da default sul blog e non con tutte le personalizzazioni e il raggruppamento in due colonne
    2) sostituire al posto della tendina "ordina gli articoli per data/per aggiornamento" una vera e propria ricerca per data, inserendo "da ../../.. - a ../../.."

    Grazie mille e sei come sempre il TOP!

    RispondiElimina
    Risposte
    1. Tutto è possibile però mi sembrano modifiche che comporterebbero notevole impegno senza avere la certezza di riuscire a realizzarle
      @#

      Elimina
  4. Ciao. Ho seguito le tue istruzioni alla lettera su due blog collegati all'account dal quale ti sto scrivendo. Su quello con molti post funziona bene, mentre su quello con pochi non visualizzo i post. Riesci a dirmi perché?

    RispondiElimina
    Risposte
    1. Bisogna che ci sia un numero minimo di post affinché lo script possa funzionare. In questo momento non ti so dire tale numero perché il post è di 3 anni fa e non me lo ricordo
      @#

      Elimina
  5. Sarebbe stato utile poter impostare l'ID di una specifica etichetta per impostazione predefinita.
    Pensavo di fare così: creare delle pagine con descrizione, e a ciascuna di queste pagine fare redirect "da etichetta a pagina". Ovviamente in ogni pagina andrei a mettere lo script relativo ai post dell'etichetta affine. Purtroppo con questo script mi sa che non è possibile fare quel che voglio e mi pare sia l'unico con il pulsante che "carica" nuovi post all'interno della stessa pagina.

    RispondiElimina
    Risposte
    1. Si tratta di uno script particolarmente complicato e non me la sento di metterci mano in modo così radicale 😒
      @#

      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