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.

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.

Demo
Clicca qui

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

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