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

Creato il 06 settembre 2011 da Roberty
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 avetepubblicati 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, possanoreinstallare il widget. 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 preferiamoDopo esserci loggati con il nostro account Yahoo, si clicca su Clone per copiare il Pipe, quindi inseriamo nei due campil'URL del blog (senza slash finale) e una delle opzioni alphabet o chronoSi 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 essereposizionato 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 inordine cronologico in una pagina statica

Potrebbero interessarti anche :

Possono interessarti anche questi articoli :