Mostrare tutti i post del blog su Blogger separati per etichette con casella di ricerca.

Come pubblicare in una pagina statica di Blogger un widgetche mostri tutti i widget suddivisi per etichetta, che mostri gli aggiornamenti e con cui si possano fare delle ricerche.

Da qualche mese hanno smesso di funzionare gli Yahoo Pipes perché ritirati dai dirigenti dell'azienda per la loro bassa redditività. Con questo strumento di Yahoo si potevano organizzare e elaborare i feed per creare dei widget molto interessanti quali quello dei Top Commentatori o quello della Mappa del sito per i lettori che mostrava l'elenco di tutti i post pubblicati.

Riguardo al widget che mostrava gli utenti con più commenti non ci sono novità però si possono mostrare sempre tutti i titoli dei post pubblicati utilizzando un altro javascript. Si tratta di una soluzione anche migliore di quella degli Yahoo Pipes visto che si può decidere di visualizzare tutti gli ultimi articoli pubblicati con relative miniature delle immagini, mostrare gli ultimi aggiornamenti, selezionare gli ultimi post con quella data etichetta oppure fare una ricerca con parole chiave.

Alcuni stili di questo widget verranno ereditati da quelli del blog mentre altri possono essere personalizzati a piacere. Il widget va pubblicato in una pagina statica e può riguardare anche i post di un altro sito. Ci sono tre caselle di controllo. Nella prima si può optare per gli Ultimi Articoli o gli Ultimi Aggiornamenti, nella seconda si può selezionare la etichetta per visualizzare i post corrispondenti mentre nella terza si può effettuare una ricerca con parole chiave.

Si va su Bacheca > Pagine > Nuova pagina e in Modalità HTML 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:#00F;  /* 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 Tahoma, Verdana, Arial, Sans-Serif;
}
#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 Tahoma, Verdana, Arial, Sans-Serif;
    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 src="https://sites.google.com/site/progetto3322/archivio/mappa-sito.js" type="text/javascript"></script></div>

Si pubblica da HTML senza tornare su Scrivi. Le personalizzazioni più importanti sono:

1. L'URL del blog da sostituire a http://www.ideepercomputeredinternet.com
2. Vengono mostrati di default 30 articoli ma si può cliccare su Post Successivi ▼ per caricare altri 30 post. Si potrà poi tornare indietro andando su Post Precedenti ▲
3. I codici dei colori dei titoli, dello sfondo della casella e del colore del testo al loro interno sono individuati dai commenti. Il colore  #cbe5fd; serve essenzialmente per le linee della tabella.
4. Lo script evidenziato di giallo è stato caricato su Google Sites. Se si possiede un dominio personalizzato potrebbe non funzionare. In  questo caso va scaricato il file incollandone l'URL nel browser per poi caricarlo nuovamente su Dropbox o Google Drive e sostituirne l'URL
5. L'icona il cui URL è in noImage è quello della miniatura che si vede quando non ci sono foto
6. La dimensione della miniatura è di 80 pixel
7. Le scritte in stampatello possono essere personalizzate e il loro colore sarà ereditato dal blog
8. Se non si vuole mostrare il numero dei commenti va scaricato il file evidenziato di giallo, aperto con Notepad++, va trovata e cancellata questa stringa
           "</a><strong> - (" + commentNum + ")</strong><br>" +
   quindi va salvato e infine caricato di nuovo su Google Sites, Dropbox o Google Drive.
9. Si può modificare la famiglia di font Tahoma, Verdana, Arial, Sans-Serif;
10. Le etichette saranno ordinate secondo il numero di post che contengono.

Demo
Clicca qui

Concludo osservando che questo widget può sostituire la normale ricerca

Basterà digitare una query di ricerca nella terza casella e pigiare su Invio. Dopo qualche attimo verranno mostrati nella griglia i post che corrispondono alla ricerca.