27 marzo 2011

Menù a tendina con tutti i titoli dei post che sono stati pubblicati.

Avere la possibilità di accedere a tutti i post del blog dalla homepage o comunque da una pagina appositamente creata, è certamente l'obiettivo di molti blogger. La cosa è importante anche ai fini del posizionamento nei risultati di Google perché linkare un articolo gli dà certamente una spinta in questa ottica. Facendo delle opportune modifiche al widget dell'elenco dei titoli dei post sono riuscito nell'intento di mostrare appunto questi titoli non in un elenco ma in un menù a tendina con eventuale cursore per lo scorrimento.
Ho inserito due menù. Il primo in un elemento HTML con i post in ordine alfabetico e il secondo in una pagina statica con i titoli in ordine cronologico

menù a tendina per i post in ordine cronologico o alfabetico
Il widget mostra solo gli ultimi 1000 post che sono stati pubblicati (e scusate se sono pochi). Per i siti che ne hanno pubblicati di più, la Pipe di Yahoo, che serve per generare il menù può funzionare oppure no. Ma veniamo subito al codice da incollare
<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">Install widget</a></div>');
}
//-->
</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>
<noscript><a href='http://goo.gl/LlBrA' target='_blank'><span style='font-size: x-small;'>Drop Down Menu</span></a></noscript>
La personalizzazione riguarda i seguenti elementi evidenziati di rosso:
  1. Si deve inserire l'URL della homepage del blog senza la slash finale
  2. Ci sono le due opzioni alphabet e chrono per visualizzare gli articoli rispettivamente in ordine alfabetico o cronologico.
  3. L'espressione "Clicca per selezionare un post in ordine alfabetico" sarà la prima voce del menù e può essere personalizzata a piacere
  4. E' opportuno ma opzionale clonare la Pipe di Yahoo per ottenere un nostro ID personalizzato.
Relativamente al terzo punto si accede alla Pipe dell'elenco dei post in ordine cronologico o alfabetico. Ci si logga con il nostro account di Yahoo oppure si crea sul momento. Si clicca sul pulsante Clone. Nei due campi si inserisce l'URL del nostro blog senza la slash finale (Importante!) e il tipo di ordinamento (alphabet o chrono). Si va su Run Pipe e, se non ci sono stati intoppi, si dovrebbe visualizzare l'elenco dei titoli dei post nell'ordine prescelto
pipe dell'elenco dei titoli dei post Non resta che copiare l'ID del Pipe, evidenziato di verde nello screenshot, che può anche essere acquisito dalla barra degli indirizzi del browser. La stringa alfanumerica si sostituisce a quella evidenziata di rosso nello script appena postato.
Il codice può essere incollato su Design > Aggiungi un gadget > HTML/javascript e posizionato a piacimento con il mouse. Si può anche inserire in una pagina statica. In questo caso, prima di procedere alla pubblicazione, bisogna andare in basso su Opzioni post e mettere la spunta su Ignora nuove righe
pubblicazione pagine statiche
Credo che i blog che non hanno ancora pubblicato più di mille articoli possano essere fortemente interessati a questo "oggetto" che non si sa bene se definire menù o widget. Forse è un po' tutte e due le cose insieme.


31 commenti:

  1. Buon giorno, Sig. Ernesto.
    È incredibile come quando devo far qualcosa sul mio blog, poi trovo un suo posto su quell'argomento o di molto simile :). Ora stavo cercando il modo per inserire un'icona sul menu orizzontale che rappresenti il mio archivio, mi piace l'idea. Il principio è lo stesso della bustina per farmi contattare, si ricorda? Solo che nel mio codice 'è sì, una stringa riguardo all'archivio
    (/* Archive
    --------------------------------------------- */
    .BlogArchive #ArchiveList ul li {
    padding-left: 0px;), ma come vede, è una "stringhetta". Non so cosa aggiungerci o modificare per raggiugere il mio obiettivo.
    Grazie e buona giornata.
    joy

    RispondiElimina
  2. @Joy L'archivio non è un semplice elenco è una cosa molto più complicata e non può essere inserito in un link. In un link è possibile inserire solo una singola pagina (post) o un insieme di pagine (etichetta determinata)

    RispondiElimina
  3. Grazie, Sig. Ernesto.
    Ok, è complicato..., ma, insomma, se ci si vuole mettere per farlo? È tanto, tanto complicato?
    Grazie.
    Joy

    RispondiElimina
  4. ciao Ernesto
    quante cose interessanti e carine...
    Da mesi sono piena di impegni e più che fare ogni tanto un post e qualche salutino,non riesco.Ci saranno tempi migliori,almeno lo spero.
    Ti leggo spesso ed anche in silenzio ti mando sempre un caro e dolce saluto
    un abbraccio
    Lella

    RispondiElimina
  5. Ciao Parsifal, bellissimo questo widget, volevo provarlo ma non riesco a fare la pipe di questo widget. Quello dei top commentatori riece bene, ma questo mi da sempre errore, anche del blog francese..sono stordita? che devo fare?
    Mi dice:
    No pipe results for Elenco dei post in ordine alfabetico e cronologico. copy.

    This Pipe ran successfully but encountered some problems:

    warning could not parse feed from: http://lacassataceliaca.blogspot.com/feeds/posts/default?redirect=false&max-results=1000

    warning Could not determine type for 'pubDate', using 'text' sort.

    warning Could not determine type for 'alphabet', using 'text' sort.

    ho sbagliato qualcosa? grazie mille e buona serata :-))

    RispondiElimina
  6. @Lella
    Un abbraccio sentito anche da parte mia.

    @Sonia
    Questo Pipe (sarà più corretto il maschile nel senso di tubo o il femminile nel senso di pipa? ^_^) ha in effetti dei problemi. Se hai pubblicato più di 1000 post non funziona. Se hai pubblicato meno di 1000 post e incontri ugualmente delle difficoltà procedi in questo modo.
    1)Inserisci URL della homepage senza slash finale senza clonare
    2)Scegli tra chrono e alphabet
    3)Vai su Run Pipe
    4)Se appaiono i tuoi post in ordine, lascia stare l'ID del Pipe e non cambiare il codice alfanumerico.
    5)Incolla il codice limitandoti a cambiare solo l'URL del blog senza slash finale
    Dovrebbe funzionare lo stesso. Delle volte se si ripubblica dopo aver cambiato qualcosa nel codice, smette di funzionare. In questo caso bisogna togliere l'elemento e reinstallarlo.

    RispondiElimina
  7. Ernesto, grazie per la risposta veloce. L'ho fatto ma ora mi dice:
    No pipe results for Elenco dei post in ordine alfabetico e cronologico..
    sob... :-(( c'aggiàffà?
    grazie di nuovo
    ciao :))

    RispondiElimina
  8. ps. secondo me tubo, perchè unisce varie derivazioni come i tubi ;-)

    RispondiElimina
  9. @Sonia
    In questi casi mi sa che bisogna rassegnarsi ^*^

    RispondiElimina
  10. @Ernesto T.
    ops...quel dommage...! ma mi rifarò con qualche altro widget di tendenza :-)) grazie mille e buona cena :-))
    ciauuuu :-D

    RispondiElimina
  11. Salve! Ringrazio anch'io il sig. Ernesto per le molteplici idee utili ed interessanti che ci dà.
    Volevo chiedere se fosse possibile cambiare lo stile del carattere, dimensioni, colore, colore di sfondo ecc... ai titoli dei post nella lista...Potrebbe aiutarmi?
    Grazie

    RispondiElimina
  12. @SilVan
    Non è cosa semplicissima. Bisognerebbe inserire gli attributi di stile nel javascript.

    RispondiElimina
  13. Salve Mister, dopo diversi tentativi sono riuscito ad installare questo spettacolare widget.Avevo difficoltà con i "tubi"
    Grazie infinite e auguri per le prossime festività.
    Roberto

    RispondiElimina
  14. Avevo installato il tuo widget e andava a gonfie vele, stasera mi sono accorto che non funziona.Cosa può essere successo? Mi puoi aiutare?
    Grazie e buona serata.

    RispondiElimina
  15. @Roberto
    Su Yahoo Pipes stanno facendo dei cambiamenti. Anche il widget dei Top Commentatori non funzionava più poi è tornato tutto normale dopo tre o quattro giorni.
    Ti consiglio di provare a reinstallare e, nel caso continuasse a non funzionare, di riprovare dopo qualche giorno. Nel post di demo i widget funzionano ancora.
    Ciao

    RispondiElimina
  16. Per fortuna che è opportuno ma "opzionale" clonare la Pipe di Yahoo per ottenere un nostro ID personalizzato.

    Ci riproverò all'infinito ma per adesso non ci riesco.
    Grazie per le tue idee. Mi hanno fatto riscoprire la passione per il computer

    RispondiElimina
  17. non funziona più il widget! Non visualizza più i post. ?

    ciao

    RispondiElimina
  18. @Animo ...
    Il codice adesso dovrebbe nuovamente funzionare

    RispondiElimina
  19. non funziona e non so perchè , ti lascio il link del mio blog:http://catrina-cucinalight.blogspot.com/

    RispondiElimina
  20. @Caterina Pili
    Ho messo l'URL del tuo blog nel Pipe e funziona. Ecco lo screenshot
    http://i.minus.com/i9Akvua8sMzl5.jpg
    forse metti la slash finale?
    Se il Pipe ti funziona e non ti funziona il codice prova a togliere qualche widget tipo gli ultimi post reinstallandolo successivamente.

    RispondiElimina
  21. NIENTE DA FARE ANCHE DISINSTALLANDO I WIDGET CHE HAI DETTO TU NON FUNZIONA

    RispondiElimina
  22. @caterina pili
    Della serie i misteri di Blogger ...

    RispondiElimina
  23. ok ci sono riuscita , ho rifatto tutto daccapo , grazie per il tuo prezioso aiuto!!!!

    RispondiElimina
  24. @caterina
    per il blogging ci vuole tenacia e precisione ;)

    RispondiElimina
  25. ciao,
    grazie per il post è molto utile.
    solo che vorrei omettere dall'elenco alcuni post. E' possibile?
    grazie.

    RispondiElimina
  26. @Pasticciando con Rosy
    Non mi viene in mente nulla al riguardo di semplice. Si potrebbero mettere dei filtri come nel widget dei top commentatori ma è complesso

    RispondiElimina
  27. EVENTUALMENTE A FILTER COSA DOVREI METTERE? IL NOME DEL POST O IL LINK?

    RispondiElimina
  28. scusa se ti scrivo ancora :( ma sarebbe possibile che i link del menu si aprano in un altra pagina?
    ok grazie e scusa per le numerose domende :(

    RispondiElimina
  29. @Pasticciando con Rosy
    Non so se il pipe supporta un filter di questo tipo, penso proprio di no. Per aprire le pagine in un'altra scheda bisognerebbe cambiare il jasvascript e inserire target='_blank' ma anche questa è cosa non semplice.

    RispondiElimina
  30. Sei un grande, grazie infinite, spiegato benissimo, comodo, l'ho inserito facilmente e funziona!

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti al post.