Pubblicato il 27/03/15e aggiornato il

Come mostrare tutti i titoli dei post di Blogger suddivisi per etichette in una pagina statica.

Come mostrare in una pagina statica di Blogger tutti i post pubblicati su Blogger suddivisi in etichette con effetto hover e con la possibilità di inserire anche miniature e snippet.
I motori di ricerca richiedono agli webmaster una Sitemap per procedere a una migliore scansione del sito. Per quello che riguarda gli utenti Blogger proprio un mese fa c'è stato un aggiornamento della piattaforma con la creazione automatica della sitemap inserita nel file robots.txt. Google consiglia gli amministratori dei siti anche di creare delle Mappe del Sito per i lettori. 

In pratica è opportuno pubblicare per esempio una pagina statica in cui si possano sfogliare tutti i titoli dei post che sono stati pubblicati suddivisi per etichetta che è il tipo di archiviazione canonica di Blogger. Ricordo di aver già presentato una Mappa del blog per etichette e una Tabella degli Articoli ma che mostra anche le miniature dei singoli post. 

Vado adesso a illustrare un codice che serve per entrambe le opzioni

mappa-sito-etichetta

cioè con cui si possa mostrare l'elenco di tutti gli articoli pubblicati con quella etichetta corredato da miniature e incipit del post oppure solo con i relativi titoli. La prima opzione è più ricca ma rende la pagina più lenta a caricarsi. Nei blog con molte pagine pubblicate è meglio optare per i soli titoli mentre le miniature vanno bene nei siti che non abbiano troppi articoli.

Si va su Bacheca > Pagine > Nuova Pagina e in Modalità HTML, si incolla questo codice
Si pubblica direttamente da HTML senza tornare su Scrivi

demo-bottone

La personalizzazione riguarda essenzialmente i codici dei colori e la famiglia di font. Nel codice sono stati inseriti dei commenti esplicativi su che aspetto del widget agisce la singola riga. Qui di seguito elenco la configurazione avanzata di questo widget per mostrare o meno determinati elementi. Nel codice questa parte è evidenziata di gialla per rendere più semplice la individuazione:
  1. activeTab per mostrare 1 o più etichette attive
  2. showDates per mostrare la data - false al posto di true per nasconderla
  3. showSummaries con true al posto di false per mostrare gli incipit
  4. numChars per settare il numero di caratteri del sommario
  5. showThumbnails mostra le miniature con true e non le mostra con false
  6. thumbSize per settare la dimensione della miniatura
  7. noThumb per l'URL della miniatura di default per i post che non ce l'hanno
  8. monthNames è il nome dei mesi (tradotto in italiano)
  9. newTabLink con true apre i link in un'altra scheda con false nella stessa
  10. sortAlphabetically con true i post sono in ordine alfabetico con false ordinati per data
  11. showNew per mostrare un testo negli ultimi 7 post pubblicati
  12. newText per settare l'espressione al posto di Nuovo!
  13. blogUrl per incollare l'indirizzo del nostro sito con .com
  14. @media (max-width:700px) serve per rendere Responsive la pagina della Mappa del sito in modo che sia correttamente visibile anche con dispositivi mobili




17 commenti :

  1. Grazie! Non so come farei senza i tuoi articoli, davvero. Lo inserisco subito nel mio blog.

    RispondiElimina
    Risposte
    1. Ho apportato alcune modifiche al mio blog (grazie ai tuoi consigli). Modificando due post di qualche mese fa, non so come ho fatto, risultano pubblicati entrambi oggi (rovinando una certa cronologia di eventi). E' risolvibile? Posso farli tornare alla data precedente?
      Grazie

      Elimina
    2. Certamente. Apri i Post andando su Modifica oppure cliccando sulla icona della matita (Quick Edit). Vai quindi sulla destra su Impostazioni post e clicca su Data di pubblicazione. Vedrai un calendario in cui scegliere la data della pubblicazione che può essere passata o anche futura (per programmare i post)
      @#

      Elimina
  2. Fantastico! Fantastico! Verrà fuori un bel ricettario che pubblicherò con la nuova grafica del blog prossimamente! Grazie! Sei il migliore come sempre!

    RispondiElimina
  3. Ciao Ignazio ma se volessi inserirlo nella home page all'interno del contenuto come potrei fare?

    RispondiElimina
    Risposte
    1. Ignazio? ahahah
      Nella Homepage ci sono contenuti dinamici vale a dire si vedono gli ultimi post pubblicati. Se volessi metterlo come una sorta di landing page per accedere ai tuoi post in modo più ragionato basta che tu vada su Layout > Aggiungi un gadget > Base > HTML/Javascript per poi incollare il codice in Sezioni del sito. Successivamente con il mouse lo devi trascinare subito sopra all'area del post e cliccare su Salva disposizione.
      @#

      Elimina
  4. Grazie mille, davvero utilissimo...posso chiederti solo una cosa? Io ho delle etichette lunghe e me le scrive solo per un pezzo....ad es. l'etichetta "Piante da Frutto" me la visualizza come "Piante da".
    Come posso fare affinché compaia il nome per esteso?

    Grazie Mille

    RispondiElimina
  5. Buongiorno, da qualche giorno non mi funziona più la pagina statica. Ho circa 160 post sul mio blog, ma la pagina non funziona più nemmeno eliminando le immagini di anteprima che potrebbero appesantirne il caricamento. Come potrei risolvere? Grazie

    RispondiElimina
    Risposte
    1. Nel senso che non ti funziona questo widget? Scusa ma non ho capito. Non hai neppure incollato l'indirizzo della pagina
      @#

      Elimina
  6. buonasera Ernesto,
    io vorrei utilizzare le etichette per ordinare i post per scadenza (sono post che trattano di bandi.. per cui nelle etichette indico la scadenza) ma il widget le ordina alfabeticamente invece a me serve che le metta in ordine numerico. E' possibile? Si puo' fare? grazie

    RispondiElimina
    Risposte
    1. Guarda che i numeri vengono inseriti prima delle lettere. Certo che se invece che di numeri puri si tratta di date allora la cosa cambia. In teoria si può fare di tutto però bisognerebbe mettere mano al javascript quindi il codice sarebbe tutto da rifare
      @#

      Elimina
  7. Avevo installato questa mappa con risultato perfetto. Avevo fatto anche modifiche nei parametri che hai indicato senza problemi.
    Ha smesso di funzionare da qualche giorno.
    Qualche idea?
    Grazie.

    RispondiElimina
    Risposte
    1. Ci sono dei problemi con i javascript di Blogger. Leggi qui
      http://www.ideepercomputeredinternet.com/2013/05/blogger-gadget-ultimi-commenti.html?showComment=1462729699434#c7322213925040597580
      e qui
      https://productforums.google.com/forum/#!topic/blogger/BwSxaq0LZLs;context-place=forum/blogger
      @#

      Elimina
    2. Grazie!
      Ho cambiato mappa, alla fine mi sento più sicura.

      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.