Pubblicato il 16/11/15e aggiornato il

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.

mappa-sito-etichette

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://lh3.googleusercontent.com/-QHAVnMyiszg/VHL1-qLbkTI/AAAAAAAAqMA/KjsePS2PsRQ/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.
Concludo osservando che questo widget può sostituire la normale ricerca
ricerca-blogger
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.




13 commenti :

  1. ciao carissimo, ho provato in tutti i modi ma non funziona... ho provato anche a caricare il file .js su dropbox, ma niente da fare, come mai?

    RispondiElimina
    Risposte
    1. Ho appena incollato il codice così com'è in una pagina statica e funziona perfettamente come nella Demo. Se il tuo blog è questo
      http://www.salvadanaio.info
      significa che ha un dominio personalizzato e quindi il file .js caricato su Google Sites non funziona. Devi incollare questo URL nel browser
      https://sites.google.com/site/progetto3322/archivio/mappa-sito.js
      e andare su Invio per scaricarlo quindi devi caricarlo su Dropbox o su Google Drive
      http://www.ideepercomputeredinternet.com/2014/07/hotlink-google-drive.html
      @#

      Elimina
    2. Ernesto, sei riuscito a scoprire qualcosa?

      Elimina
    3. Riguardo allo spam? Ho salvato il tuo commento. Vedo se trovo qualcosa di utile
      @#

      Elimina
    4. si ... grazie mille!!! xchè sto impazzendo con queste continue visite di spam, sopratutto arrivano da siti ed indirizzi (.ru) attendo tue notizie ^_^

      Elimina
  2. Fatto! grazie mille ^_^ sono riuscito con google drive. Già che ci sono vorrei chiederti una cosa, riusciresti a fare un articolo riguardante le visite di spam? nel senso il mio sito web riceve visite da siti spam, solo che non so come fermarle. esiste un modo per bloccare le visite dai siti spam su blogger? te lo chiedo perché non ne parla nessuno sul web. grazie mille in anticipo

    RispondiElimina
    Risposte
    1. Comunque è una cosa ben conosciuta. Si tratta di spam proveniente da siti per adulti della Russia. Accedi a questo gruppo con il tuo account Google per saperne di più
      https://productforums.google.com/forum/#!topic/blogger/Wcnr3tUqGv4;context-place=topicsearchin/blogger/spam$20.ru
      L'importante è non cliccarci sopra. Al limite puoi copiare l'indirizzo e aprirlo in una scheda in incognito per vedere chi c'è dietro il link. Ci farò un post i prossimi giorni
      @#

      Elimina
  3. Ciao Ernesto,
    Ho utilizzato il codice da te illustrato sul mio blog e funziona perfettamente... volevo chiedeeti è possibile avere un codice o basta modificare qualcosina per aver 3 colonne anzichè 2?
    inoltre c'è un sistema per sostituire il riquadro post successivi/post precedenti a fine pagine con un menu in cui si vedano il numero delle pagine (1 2 3 4 ... tot 60) in modo da velocizzare lo scorrimento in vecchi post?
    GRAZIE INFINITE PER IL TUO SERVIZIO

    RispondiElimina
    Risposte
    1. Tutto è possibile ma si dovrebbe rifare tutto da capo. Senza stravolgere tutto si possono fare solo piccole modifiche di colori, font, testo, ecc
      @#

      Elimina
    2. Sì certamente hai ragione. Ma come mai da android non riesco a vedere la mappa del sito con il codice che hai fornito?

      Elimina
    3. Perché i browser dei cellulari non mostrano in modo sempre corretto i javascript. Solo se hai un cellulare di alta gamma e se scegli la visualizzazione desktop forse riesci a vedere la mappa anche da mobile
      @#

      Elimina
    4. OK ottimo grazie del chiarmento.
      Un ultima cosa, si può modificare il colore del riquadro post precedenti successivi? se sì a che riga di codice lo trovo?

      Elimina
    5. #feedNav a, #feedNav span {
      background-color:#cbe5fd;
      per il colore di sfondo in condizioni normali e
      #feedNav a:hover, #feedNav a:active {
      background-color:black;
      per il colore dello sfondo al passaggio del cursore. Il colore del testo invece è
      color:#999;
      in entrambi i casi
      @#

      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.