Pubblicato il 21/08/14e aggiornato il

Come creare un menù a discesa per Blogger con tutti i post che sono stati pubblicati.

Come realizzare un menù con tutti gli articoli di un blog su Blogger in ordine cronologico o alfabetico.
Per favorire una più lunga permanenza nel nostro sito dobbiamo mostrare al navigatore che vi arriva per la prima volta ma anche al lettore più assiduo tutta la nostra migliore produzione di contenuti in modo che possa consultare altre pagine. Questo è fondamentale per ridurre la frequenza di rimbalzo e per migliorare molti fattori di ranking del nostro sito per avere un migliore posizionamento nei risultati di ricerca.

Se non si sono ancora scritti 1000 post è addirittura possibile mostrare un menù a tendina con tutti i post elencati in ordine alfabetico o cronologico a scelta. Il trucco si basa su i Pipes di Yahoo! che permettono un sacco di personalizzazioni a partire dalla unificazione di più feed. Il menù in questione può essere inserito a piacere in un gadget HTML/Javascript oppure postato in una pagina statica pubblicandola in Modalità HTML.

menù-tendina-tutti-post-blogger

Saranno visualizzati solo un numero limitato di articoli ma ci sarà un cursore sulla destra per scorrerli tutti. Se si opta per un widget bisogna andare su Layout > Aggiungi un gadget > Base > HTML/Javascript e incollare il codice in Sezioni del sito mentre per una pagina o un post bisogna andare su HTML che si trova accanto a Scrivi. In entrambi i casi il codice da incollare è il seguente

<script type="text/javascript">
<!--
document.write('<select style="width:100%;"  onchange="location=this.options[this.selectedIndex].value;">');
function MenuPost(feed) {
var Titolo = "<option>Clicca per selezionare un post in ordine alfabetico</option>";
document.write(Titolo);
var i;
for (i = 0; i < feed.count ; i++)
{
var href = "'" + feed.value.items[i].link + "'";
var TitoloPost = feed.value.items[i].title;
var Elenco = "<option style='width:460px;' value=" + href + 'title="' + TitoloPost + '">' + TitoloPost;
document.write(Elenco);
document.write('</option>');
}
document.write('</select>');
}
//-->
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://design-prova.blogspot.com
&Order=alphabet
&_id=3a0790282e47ab9450ebd3ec7bb0e0ad
&_callback=MenuPost
&_render=json"
type="text/javascript"></script>

Si salva nel caso di un widget e si pubblica nel caso di una pagina statica.


Le personalizzazioni da fare sono le seguenti:
  1. Incollare l'URL del nostro blog senza la slash finale e con il .com canonico al posto del .it se avete un blog gratuito del tipo blogspot.
  2. alphabet serve per se si opta per l'elenco alfabetico e chrono se invece si sceglie quello cronologico
  3. L'espressione "Clicca per selezionare un post in ordine alfabetico" sarà la prima voce del menù e può essere cambiata a seconda delle esigenze
  4. La larghezza width:460px serve per settare la evidenziazione delle voci selezionate
  5. Se avete scritto più di 1000 articoli il menù mostrerà solo gli ultimi mille.
Si deve provare il codice così com'è per vedere se funziona ma poi è opportuno crearsi un nostro Pipe personale per non incidere nella larghezza di banda di quello che ho creato per questo menu. Occorre avere un account Yahoo e accedere alla pagina del Pipe dell'elenco dei post in ordine cronologico o alfabetico da loggati su Yahoo.

pipe-yahoo

Si procede nel seguente modo:
  1. Si va su Clone per clonare il Pipe
  2. Si inserisce il nostro URL con il .com e senza slash finale quindi si sceglie il tipo di ordinamento.
  3. Si clicca su Run Pipe
  4. Nella parte bassa della pagina saranno visibili tutti i nostri articoli
  5. Si copia l'ID del Pipe che si può ricavare anche dall'indirizzo del browser e si incolla nel codice al posto di quello realizzato da me colorato di viola.




5 commenti :

  1. ciao Ernesto io lo inseriti cambiando con chrono ma non me li dà in ordine cronologico....help

    RispondiElimina
    Risposte
    1. Forse hai fatto qualche aggiornamento di post. In questo modo la cronologia viene alterata
      @#

      Elimina
  2. Ciao, neanche questo sembra più funzionare (su osx10.9.5 e Safari 9.1 o Firefox 41.0.2)

    RispondiElimina
    Risposte
    1. Ti ho già risposto qui
      http://goo.gl/stCmtl
      @#

      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.