Pubblicato il 06/10/11 - aggiornato il  | 86 commenti :

Come inserire i titoli di tutti i post con miniature in una pagina statica di Blogger.

Mappa del sito con tutti i titoli dei post pubblicati insieme alle miniature con strumenti di navigazione tra le varie pagine.
Avere un archivio di tutti i post che sono stati pubblicati e che possa essere consultato in modo piacevole dagli utenti è un importante servizio che tutti i blog dovrebbero offrire.

Dopo aver presentato la Mappa del sito per categorie e in ordine cronologico vado a illustrare un metodo esteticamente molto valido per visualizzare tutti i titoli dei post in una stessa pagina statica insieme alla miniatura delle immagini contenute. 

Ecco uno screenshot di prova per questo blog
archivio-titoli-post

Gli articoli sono visibili a partire dal primo fino all'ultimo. Ogni pagina ne mostra 60 e, nella parte bassa, si possono navigare tutte le pagine cliccando sul numero oppure andando su precedente e successiva. Per la creazione di una pagina statica di questo tipo non occorre modificare il modello. Basta andare su Bacheca > Pagine > Nuova pagina, incollare in Modalità HTML il codice seguente e pubblicare
Le personalizzazioni più importanti sono evidenziate di rosso e nei commenti è spiegato a quale elemento si riferiscono. Ricordo solo che c'è una immagine di sfondo che può essere sostituita da un'altra così come i colori, lo stile dei bordi e le dimensioni dei vari elementi. Nella parte finale c'è il javascript caricato su Google sites che si trova a questo indirizzo

 https://sites.google.com/site/scriptperilblog/javascript-2/riassunto-post-miniature.js

Può essere scaricato in formato ZIP da qui e va necessariamente modificato in almeno due parametri

var archivo = http://design-prova.blogspot.com/feeds/posts/default
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHBNUwslhPG-mlQNxErRc3-U-GB27wpD1WJ_r8auDmiZKvkOrcit343E61S_jNb3J4nXbH2wqD3-_g07Ygn3JjFoIJZ0ZbnVkg5zAyAMERisdOwk-XJF0i-mnPzbooyROBtvi_IenVIsg/s90/no-immagini.jpg

il primo rappresenta l'indirizzo del blog e il secondo l'URL della miniatura che sarà visualizzata quando in un articolo non sono presenti immagini. Quando il file è stato modificato, si può salvare il formato js mediante Notepad++ cioè della forma riassunto-post-miniature.js. Dovrà essere caricato su Google Sites o DropBox. Se ne dovrà acquisire l'URL diretto da sostituire nel codice che ho caricato su Google Documenti. Ho pubblicato nel web una
Esteticamente non fa testo perché sono pochi post e quasi tutti senza immagini.
Fonte | Vagabundia -


86 commenti :

  1. Molto bello questo archivio. Sarei tentato ma ho alcuni dubbi. Te li espongo: 1)ho le pagine statiche che mantengono anche la sidebar: mi pare che questo archivio abbia bisogno di spazio. Devo togliere la sidebar dalle pagine statiche?
    2) avevo messo la pagina statica con gli articoli (sono quasi a 1000) quindi conviene togliere quella e mettere la nuova?
    Grazie e ciao.

    RispondiElimina
  2. @Stefano
    Il codice proposto ha una larghezza di 950 pixel e una altezza di 980 ma i valori possono essere modificati. Fai dei tentativi se poi non trovi la soluzione ottimale puoi tornare indietro.

    RispondiElimina
  3. wow ma ne sai una più del diavolo :)
    Quasi quasi la inseirò, ovviamente la pagina si aggiorna automaticamente con i feeds presumo, giusto?

    RispondiElimina
  4. Bella trovata, la proverò. Ciao Parsi. :)

    LeNny

    RispondiElimina
  5. @Auto ...
    @LeNny
    Sì lo script è basato su Json e e sui feed del blog

    RispondiElimina
  6. Questa utility potrebbe essere utile con i nuovi modelli di Blogger...

    RispondiElimina
  7. è bella senz'altro ci faccio un pensierino
    ho una domanda e forse una curiosità
    magari tu lo sai già
    mi sono accorto col widget feedjit
    che ho tantissime visite o pseudo tali da groningen olanda .. fino a poco tempo fa dal belgio .. e ancor prima da mountain view casa madre google ..
    orbene ho capito col tempo che mountain view fosse il preview possibile dalle ricerche google
    e la domanda è hanno forse sostituito il server addetto a tale scopo in europa??
    sembrerebbe di si, non credo si tratti di un utente che viene a ravanare tra l'altro gli stessi post giornalmente
    chennedici chennedi??
    ;-)

    RispondiElimina
  8. @Maxso
    Con i nuovi modelli non si può modificare il template ma in questo caso si tratta di pubblicare una pagina statica quindi si può fare

    @Tex Willer
    Non te lo so dire. La tua è comunque una deduzione interessante. Potrebbe anche essere un bot di qualche altro tipo per esempio Bing o altro ancora :P

    RispondiElimina
  9. Ernesto ho bisogno del tuo aiuto :( Stava andando tutto bene nella configurazione, con IE e FF tutto bene, MA con Chrome le celle non vengono affiancate! SI crea una colonna con un riquadro sotto l altro! Come faccio?

    (se vuoi vedere tu con chrome: http://autodimerda.blogspot.com/search/label/ARCHIVIO"

    RispondiElimina
  10. @Auto ...
    Hai inserito il widget in una pagina statica che forse non ha le dimensioni orizzontali sufficienti prova a diminuirle o ad aumentare quelle della pagina.

    RispondiElimina
  11. Okey! :)
    Tutto sistemato, grazie di questo post perchè mi serviva una cosa del genere.

    PS: il probelma era che avevo tolto la formattazione H6 e Chrome sbandava.
    La pagina dove ho inserito l'archivio non è una pagina statica (non le uso) ma una pagina che linka una finta categoria, così non verrà indicizzata.


    ecco il lavoretto finito: http://autodimerda.blogspot.com/search/label/ARCHIVIO

    RispondiElimina
  12. Grazie Parsifal,
    cavolo era proprio quello che mi serviva :)!!!
    Vediamo che riesco a fare con qualche modifica!
    Ma senti, e per fare sempre una cosa del genere ma con un sistema tipo quello usato per il nuovo Template di Blogger (il Flipcard o il Mosaic)?
    Un caro saluto
    Marco Michele C.MI

    RispondiElimina
  13. @Auto ...
    Hai messo in alto la navigazione! Ottimo, forse è anche meglio.
    @Marco Michele
    Si può inserire in una pagina statica dei nuovi modelli ma per il momento aspetterei perché ci sono novità in vista, almeno a leggere questo post di Blogger Buzz
    http://buzz.blogger.com/2011/10/dynamic-views-update-1.html

    RispondiElimina
  14. L'ho inserito in alto in quanto cambiando pagina non tornava al #top dando una resa esteticamente poco logica. Alla fine dell indice ho aggiunto il comando TORNASU modificando il js

    Ancora grazie ;)

    RispondiElimina
  15. Cmq a proposito di questa importante funzione (la navigazione contestuale all'interno della stessa pagina) sarebbe il massimo se tu riuscissi a renderla verstile per altri scopi.

    Es: una raccolta di immagini o altri contenuti multimediali che renderebbero pesante l'accesso alla pagina. Non so..forse si potrebbe richiamare un determinato numero di contenuti all'interno di una classe e attribuire ad ogni classe una pagina di navigazione differente. (l'ho buttata lì)

    RispondiElimina
  16. Ok, ho letto...allora attendiamo!
    Grazie ancora!

    RispondiElimina
  17. Dimenticavo Parsifal, sto dando un'occhiata veloce al codice e ho modificato già qualcosa...ma per aggiungere (oltre al titolo del post) anche un pezzo di anteprima dell'articolo, cosa dovrei andare a modificare?
    Un saluto

    RispondiElimina
  18. @Auto ...
    Ho un sacco di cose da fare :((((

    @Marco Michele
    Mettere anche lo snippet dell'articolo è piuttosto complicato. Bisognerebbe mettere mano al javascript in modo radicale.

    RispondiElimina
  19. Oh mio dio sì!!!! non ci credooooooooooooo!!!!!!

    RispondiElimina
  20. Ciao,
    ho fatto il mio archivio seguendo la tua guida (come sempre)e vorrei sapere se è possibile creare qualcosa di simile discriminando per etichetta e poterle così suddividere.

    tecnoeggs.net se vuoi dare un'occhiata!

    RispondiElimina
  21. @Gibro
    Per categorie c'è questa opzione
    http://www.ideepercomputeredinternet.com/2009/10/come-creare-una-mappa-del-sito-per.html
    Bisogna anche sapersi accontentare ;)

    RispondiElimina
  22. Ciao, mi serve aiuto. Non avevo mai usato prima d'ora google docs e vorrei sapere come faccio a prendere l'url diretto al file.

    RispondiElimina
  23. @maurinho
    Ti apparirà una pagina in cui inserire il tuo account Google che hai sicuramente, visto che hai un blog su Blogger. Dopo che ti sarai loggato potrai accedere al file. Vai a questo URL per accedere a Google Documenti
    www.google.com/docs
    clicca su Accedi e inserisci i tuoi dati (email e password)

    RispondiElimina
  24. Ciao, io ho provato ma proprio non riesco a creare l'elenco generale di post. Ho anche provato a seguire le indicazioni per togliere la sidebar ma non trovo i codici a cui fai riferimento. In sostanza incollo il codice del riassunto, pubblico e la pagina rimane bianca. Ho provato ad aggiustare i campi in rosso ritarandoli secondo il mio blog e alla sidebar ma niente da fare.. sempre bianca! Mi sai aiutare? Grazie!

    RispondiElimina
  25. @Zonzolando
    Non è che posso aggiungere qualcosa in più a quello che ho scritto nel post. Se la pagina è bianca dipende probabilmente dal fatto che non hai inserito bene la fonte dei tuoi feed. Altrimenti veniva storta ma bianca no. Un'altra possibilità è che nel tuo blog ci sia già un widget basato su JSON come per esempio quello degli Ultimi Articoli che dà fastidio a questo. Se è così potresti provare a toglierlo, inserire questo archivio e rimetterlo nuovamente.

    RispondiElimina
  26. Ciao! grazie per la risposta velocissima! Purtroppo ho provato a togliere e rimettere gli ultimi articoli ma ancora niente. Forse sbaglio con la fonte dei feed, anche se non ho idea dove. Grazie lo stesso! ciao

    RispondiElimina
  27. Ciao Ernesto,
    finalmente mi sono decisa a provare ad inserire questo bellissimo archivio ma ho avuto una brutta sorpresa: io amministratore del blog vedo tutto perfettamente, ma gli altri vedono solo la pagina bianca... ti viene in mente niente (io da profana non so che pesci prendere...)

    RispondiElimina
  28. @Silvia
    Mi pare una cosa molto strana. Forse dipende dal fatto che usi delle limitazioni per le immagini nella privacy che vengono postate su Picasa. Ma poi sei sicura che sia proprio così? Hai provato a aprire il blog con la modalità in incognito (Chrome)? o con la navigazione anonima (Firefox)?

    RispondiElimina
  29. Sinceramente non ho modificato alcuna impostazione su Picasa (non credevo nemmeno si potesse fare ^_^ ) e lo vedo in qualsiasi browser solo se sono loggata, altrimenti appare su tutti (chrome, explorer9 e waterfox)solo la pagina vuota... se vuoi ti mando uno screenshot via mail.

    RispondiElimina
  30. @Silvia
    Non occorre Silvia, ci credo! Però non so spiegarlo né come ovviare :(

    RispondiElimina
    Risposte
    1. e dopo quasi un anno, ho riprovato e ce l'ho fatta, sono troppo contenta!

      Elimina
  31. ciao scusami ho inserito questo elenco in una pagina statica del mio blog, ma mi va in conflitto con un widget che ho sotto ogni post x la valutazione a stelle del post stesso...

    c'è un modo per sistemare il tutto?
    ti lascio il link (non attivo) della pagina http://serg7.blogspot.com/p/indice.html

    grazie

    RispondiElimina
  32. :) ho risolto utilizzando gli iframe

    RispondiElimina
  33. Grazie Ernesto, molto interessante;
    dopo averlo leggermente modificato, ho inserito lo script nel mio blog con tanto di ringraziamento al tuo sito. ;)

    RispondiElimina
  34. @Nicola
    I ringraziamenti con link al sito li apprezzo molto.

    RispondiElimina
  35. Questo archivio è qualcosa di fantastico, e carica davvero velocemente!
    Ti faccio una domanda:
    pensi che modificando in qualche modo il file .js potrebbe essere possibile far comparire oltre al titolo anche le prime righe dell'articolo oppure quelle che si inseriscono nel campo "Descrizione della ricerca" al'interno dei post?
    Ti ringrazio,
    Giuiana

    RispondiElimina
    Risposte
    1. @GiulianaMosetti
      Può darsi ma al momento è cosa al di sopra delle mie capacità. Come vedrai dalla fonte lo script non è mio.

      Elimina
    2. Sì sì, ma infatti non ti chiedevo di farlo, volevo solo sapere se c'era questa possibilità. Magari poi un modo lo trovo ;)

      Elimina
  36. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  37. ciao, sto cercando di creare questa cosa per il mio blog, ma davvero non riesco a farlo :( non sono pratica di tutte queste cose, sono alle prime armi, esiste qualche cosa di più semplice che dia lo stesso risultato? :( Grazie

    www.paciugabregaeimbelina.blogspot.it

    RispondiElimina
    Risposte
    1. @Paciuga...
      Ci sono queste mappe del sito
      http://www.ideepercomputeredinternet.com/2012/03/come-creare-delle-mappe-del-sito.html
      molto semplici ma senza miniature.

      Elimina
  38. @Cinetik
    Adesso lo ZIP ha il collegamento giusto.

    RispondiElimina
  39. Ciao Ernesto questo assomiglia un poco a quello che avrei voluto fare.. oramai mi hai già risposto che non esiste una cosa per blog spot che metta le miniature del post per categorie in una pagina .. grazie

    RispondiElimina
  40. Ciao Ernesto ti ringrazio ma purtroppo ho provato a salvare e aprire per vedere come sarebbe venuto ma non ci riesco.. si blocca tutto.

    RispondiElimina
  41. Dopo giorni che ci provavo finalmente sono riuscita a metterlo, io vedo le miniature ma gli altri no :-( Ho letto un'altro commento sullo stesso argomento, per caso ci sono novità su come ovviare a questa cosa? Ho un blog su Blogger...
    Grazie, soprattutto per tutti i consigli che ci dai :-)))

    RispondiElimina
    Risposte
    1. @Tival
      Se gli altri non vedono le miniature può essere che ci sia un problema di cookie o di privacy. Procedi in questo modo
      1)Apri una scheda del browser in modalità In Incognito e controlla se si vedono le miniature. Se si vedono allora è tutto OK e chi non le vede ha nel suo browser dei cookie in conflitto tra di loro
      2)Se invece le miniature non si vedono allora vai su Picasa e cambia la privacu degli album in cui finiscono le immagini di Blogger da Solo tu a Pubblca sul web.

      Elimina
  42. Pensavo... modificando l'url dei feeds (dando a tutte le foto una stessa etichetta) ... si potrebbe creare una galleria fotografica, magari aumentando leggermente le dimensioni delle miniature. Pensi sia fattibile? Ci provo? :) (grazie mille per il post)

    RispondiElimina
    Risposte
    1. @SoffioDiDea
      Puoi sempre provare utilizzando i feed delle etichette
      http://www.ideepercomputeredinternet.com/2009/10/come-conoscere-l-del-blog-l-del-post-i.html

      Elimina
    2. Sì ho appena provato e funziona... ora devo solo modificare le dimensioni delle celle :) Grazie mille utilissimo (come farei senza di te?!)

      Elimina
  43. Ciao. Ho seguito le istruzioni e tutto funziona tranne il fatto che i titoli dei post non si vedono nei riquadri, quindi ho le miniature, i rettangoli, ma sono vuoti. Ho sbagliato qualcosa? Grazie

    RispondiElimina
    Risposte
    1. Non è detto che tu abbia sbagliato qualcosa. Quando si testa un widget c'è sempre la possibilità che non possa funzionare, anzi si può dire che succede nella maggioranza dei casi :(
      R @

      Elimina
    2. Mi suggerisci di modificare qualcosa o rinuncio?:)

      Elimina
    3. Se non ti funziona è meglio rinunciare perché è difficile capire cosa non vada
      R @

      Elimina
  44. ciao ernesto.... qualche mio lettore mi ha fatto notare che il widget non si visualizza con firefox, ed ho verificato che anche con croome non visualizzo l'elenco... con safari si però ... cosa può essere che non funziona?

    RispondiElimina
    Risposte
    1. @# Anche nella Demo non si vede più con Chrome. Non saprei dirti perché. Prova con questo
      http://www.ideepercomputeredinternet.com/2012/10/cross-browser-internet-explorer-ie9-blogger.html

      Elimina
  45. Io con Chrome e Firefox la mia pagina statica la vedo ancora... speriamo duri! :)

    RispondiElimina
  46. ho seguito i consigli che davi in quel post ma niente da fare...
    ho inserito questo codice meta content='IE=8, IE=9, IE=10, chrome=1' http-equiv='X-UA-Compatible'

    RispondiElimina
  47. Ciao! È per caso possibile inserire un'immagine (tipo .gif) al posto della scritta 'sto caricando...'? Mille grazie, utilissimo come sempre!!!! :)

    RispondiElimina
    Risposte
    1. Scaricati questo file
      https://sites.google.com/site/scriptperilblog/javascript-2/riassunto-post-miniature.js
      e cercati il rigo
      Sto caricando ...
      Potresti provare a inserire al suo posto una immagine in questo modo
      <img src="URL_Immagine.gif"/>

      P.S. Non ho testato e non so se funzionerà

      Elimina
    2. avevo già provato, purtroppo non va... non mi si vedeva più nulla...
      farò altri esperimenti, grazie comunque! :)

      Elimina
    3. Puoi semplicemente togliere la scritta o cambiarla se non ti piace @#

      Elimina
  48. A me non si vede niente.. forse ho sbagliato a modificare il javascript ma la pagina rimane bianca! come poso fare??

    RispondiElimina
    Risposte
    1. Prova a pubblicare direttamente da HTML senza passare per Scrivi perché delle volte Blogger modifica il codice
      @#

      Elimina
    2. Niente da fare! Mi esce tutto bianco! Non c'è un altro modo per farlo?

      Elimina
    3. Prova con queste mappe del sito
      http://www.ideepercomputeredinternet.com/2012/03/come-creare-delle-mappe-del-sito.html
      Non hanno però le miniature
      @#

      Elimina
    4. E ma io volevo le miniature. Ci potrebbero essere dei widget o qualcosa che interferisce?

      Elimina
    5. Potrebbe essere. Se hai un widget degli ultimi articoli questo utilizza lo stesso URL dei feed. Prova a toglierlo quindi installa questa mappa con le etichette e guardi se funziona, poi provi a rimettere il widget
      @#

      Elimina
  49. Si potrebbero avere i post in ordine alfabetico? ho provato a mettere nello script orderby=alphabetically o alphabet, ma non funziona....

    RispondiElimina
  50. Ciao, sto diventando matta a cercare il tuo post giusto. Io vorrei solo che nella mia home page del blog mi si visualizzassero gli ultimi 3-4 articoli scritti, non in maniera completa, ma una parte con poi scritto "continua a leggere". Non credo di essere nel post giusto, anche perchè per me questo è troppo difficile. Mi puoi aiutare ? grazie mille.

    RispondiElimina
    Risposte
    1. Ti chiami Enzo e stati diventando matta :) Non voglio indagare oltre :))
      Il post a cui ti riferisci non esiste perché si tratta di funzioni semplici che ho ritenuto non meritassero un articolo. Per settare il numero di post vai su Bacheca > Impostazioni > Post e Commenti > Mostra più post possibili e digita 3 o 4. Poi ricordati di andare su Salva impostazioni in alto a destra.
      Per quello che riguarda il Continua a Leggere devi essere tu a inserirlo direttamente dall'Editor del post. C'è una icona che si chiama Inserisci Intervallo che ha come icona una pagina strappata e che mostra nella home solo la parte del post posizionata appunto prima dell'Intervallo. Visualizzerai una linea orizzontale nel punto in cui avrai posizionato il cursore
      @#

      Elimina
    2. Ahah!! :-) Grazie mille, molto semplice. Grazie ancora e buona serata.

      Elimina
  51. Ciao Ernesto. Pensi che si possa escludere dall'archivio dei determinati post tramite un'etichetta?

    RispondiElimina
    Risposte
    1. Non lo escludo ma non mi viene in mente nulla al riguardo
      @#

      Elimina
  52. Ecco, questa cosa non mi funziona più. Pensi di riprenderlo un giorno e renderlo responsive? Era utilissimo e molto comodo.

    RispondiElimina
  53. Non si può renderlo Responsive, ci sono le dimensioni delle larghezze in pixel e non in percentuale.
    @#

    RispondiElimina
  54. Ciao Ernesto, torno alla carica dopo un sacco di tempo (ho visto il mio ultimo commento era del 2013!); ho reinserito le miniature in un nuovo blog e funziona, solo che tutti i browser me lo bloccano per "script o immagini non sicure"... Ti viene in mente niente per ovviare a questa seccatura?
    Grazie mille!

    RispondiElimina
    Risposte
    1. Il problema è che le immagini vecchie hanno URL che iniziano con HTTP invece che con HTTPS 😐
      @#

      Elimina
    2. Cioè nello script prelevato da Google Sites? Intendi questo, vero? Dopo tanto tempo, sono un po' arrugginita :)

      Elimina
    3. No. Se tu adesso clicchi con il destro del mouse su una immagine pubblicata in un post di Blogger e sceglie Copia indirizzo immagine, vedrai che tale indirizzo inizia con https:// mentre se fai la stessa operazione su immagini pubblicate anni fa il loro URL inizierà con http:// Dovresti semplicemente aggiungere una s nell'indirizzo controllando che l'immagine si veda lo stesso. Si tratta di un lavoro noioso ma non vedo alternative
      @#

      Elimina
    4. Ti stupirò con i miei effetti speciali... è il nuovo che mi da problemi, quello con tutti https alle immagini, mentre il vecchio (con tutti http) non ha nessun genere di blocco :(

      Elimina

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