Come creare un menù verticale con tutti i titoli degli articoli.

Avevo già presentato questa interessantissima personalizzazione che non si sa se definire menù o widget. Serve per mostrare in un elenco verticale con barra di scorrimento tutti i post del blog o solo gli ultimi 1000 articoli se ne avete pubblicati un numero superiore. Tale widget si basava sui Pipes di Yahoo e quindi aveva smesso di funzionare come del resto molti altri gadget che utilizzavano lo stesso strumento in fase di aggiornamento da V1 a V2.

Dai dati di Yahoo mi risulta che più di 50 persone avevano clonato il Pipe e quindi erano in molti che lo stavano usando. Ho pensato quindi di realizzare un altro Pipe funzionante in modo tale che, coloro che lo avevano nel blog, possano reinstallare il widget. Chi si trovasse in questa situazione può consultare il vecchio post, clonare nuovamente il Pipe e modificare il codice come illustrato.

Alternativamente possono seguire questo tutorial insieme agli altri che si accingono a installarlo per la prima volta. Ho creato due Pipe distinti. Il primo mostra gli Ultimi 1000 post mentre il secondo si limita a mostrare solo gli Ultimi 800. Se vi sembrano troppi si può sempre creare un altro Pipe che mostri un numero inferiore di post. Magari lasciatemelo scritto nei commenti e, se la richiesta di un nuovo limite sarà supportata da più persone, vedrò cosa posso fare.  

Per l'installazione si va su Layout > Aggiungi un gadget > HTML/Javascript e si incolla il seguente codice

<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:210px;' value=" + href + 'title="' + TitoloPost + '">' + TitoloPost;
document.write(Elenco);
document.write('</option>');
}
document.write('</select>');
document.write('<div style="font-size:60%;text-align:right"><a href="http://goo.gl/mVEps">Get widget</a></div>');
}
//-->
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://www.ideepercomputeredinternet.com
&Order=alphabet
&_id=eb111916ba50a6d28a5a90c57b01c68a  
&_callback=MenuPost
&_render=json"
type="text/javascript"></script>
<noscript><a href='http://goo.gl/LlBrA' target='_blank'><span style='font-size: x-small;'>Drop Down Menu</span></a></noscript>

dove le personalizzazioni riguardano i seguenti elementi:

1. L'inserimento dell'URL della homepage del blog senza slash finale
2. La scelta dell'ordinamento tra alphabet e chrono con ovvio significato
3. La scritta che appare nella prima voce del menù e che è evidenziata di viola

Per acquisire l'ID del Pipe si procede nello stesso modo visto con altri widget. Ci si reca nella Pipe di Yahoo che preferiamo

• Elenco degli Ultimi 1000 Articoli -
• Elenco degli Ultimi 800 Articoli -

Dopo esserci loggati con il nostro account Yahoo, si clicca su Clone per copiare il Pipe, quindi inseriamo nei due campi l'URL del blog (senza slash finale) e una delle opzioni alphabet o chrono. Si va su Run Pipe per vedere se il Pipe ci funziona. Se, nella parte bassa della pagina, visualizziamo l'elenco dei nostri post significa che abbiamo svolto tutte le operazioni in modo corretto.

Non resta che copiare la stringa alfanumerica evidenziata di giallo nello screenshot e sostituirla a quella del codice. Il widget può essere collocato in una sidebar oppure in un'altra zona del template. All'occorrenza può anche essere posizionato in una pagina statica incollando lo script in Modalità HTML.

Ho postato due menù realizzati con questo script, il primo in ordine alfabetico in un elemento HTML e il secondo in ordine cronologico in una pagina statica

• Demo del menù verticale con gli ultimi 1000 post -