Pubblicato il 27/03/15 - aggiornato il  | 37 commenti :

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




37 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
  8. Ciao Ernesto, sono arrivata qui sempre alla ricerca della mappa del blog in ordine alfabetico (già ti ho scritto in un altro post). Questo script va benissimo, ma ho notato che sotto all'elenco mi appare questa scritta....
    "Pubblicato da Google Drive–Segnala una violazione–Aggiornato automaticamente ogni 5 minuti"
    ....che nella tua pagina di esempio non compare. Come mai? C'è un modo per toglierla? Grazie mille. Silvana

    RispondiElimina
    Risposte
    1. Quando hai copiato il codice da questa pagina
      https://docs.google.com/document/d/1a5wYwtRykTsd2esNEwQl1v7InCeQzp8z8C5LxJoJpdc/pub
      hai anche copiato l'ultima riga che è quella visibile in tutti i documenti di Google Drive e che viene aggiunta automaticamente da Google. Devi semplicemente toglierla dal codice. La prima riga vedo che la hai giustamente tralasciata :)
      @#

      Elimina
    2. Che sciocca a non averlo visto da sola!! Grazie, ciao..

      Elimina
  9. Grazie mille Ernesto.
    Ho notato che non mi importa tutte le ricette. Ho il titolo "label" a sinistra, ma quando clicco non appare il post. Questo mi succede con più labels.
    E' un mistero...

    Grazie e saluti
    Carola

    RispondiElimina
    Risposte
    1. Riguardando bene ho notato che mancano tutti i post pubblicati prima di agosto/settembre 2013.
      E' possibile cambiare la configurazione di modo da importarli proprio tutti? Grazie mille.

      Elimina
    2. Il codice non è mio. Lo ha creato il sito di cui il link a fine post. Non ti so dire di più, mi spiace
      @#

      Elimina
  10. Boh sui nuovi template responsive pare non funzioni

    RispondiElimina
    Risposte
    1. Nel Tema Contempo funziona
      http://ricette-cucina.blogspot.it/p/mappa-del-sito.html
      prova a mettere il .com/ alla fine dell'URL
      @#

      Elimina
  11. Buonasera Ernesto e grazie mille per i tuoi preziosi consigli... solo che ho un problema... la prima colonna dove è riportato il nome delle etichette, per il mio blog è troppo stretto e mi taglia il nome .. per allargare la colonna come posso fare?
    Grazie infinite

    RispondiElimina
  12. Nel codice c'è un 80%,sostituiscilo con 70%. Sono al cellulare e non posso testare ma dovrebbe funzionare. Se così non fosse fammelo sapere
    @#

    RispondiElimina
  13. Risposte
    1. @# Ho testato, c'è anche un'altra larghezza da modificare. In definitiva
      {width:20%;float:left}
      lo sostituisci con
      {width:30%;float:left}
      e
      width:80%;
      float:right;
      con
      width:70%;
      float:right;

      Elimina
    2. GRANDISSIMO!!!! grazie tante Ernesto

      Elimina
    3. un'ultima cosa... c'è un codice per visualizzare il numero totale dei post, magari da inserire in un widget?
      grazie ancora

      Elimina
    4. Mi hai dato una idea. Ci faccio subito un post
      @#

      Elimina
  14. Ho notato che ogni tanto la pagina si blocca su "Loading"...cioè non è che sia solo lenta, anche dopo 5 minuti non carica nulla.
    Può darsi che sia troppo pesante (ma perchè a volte si e a volte no) ? Ho circa 130 articoli sul Blog...
    Grazie

    RispondiElimina
    Risposte
    1. Ho aperto questa pagina
      http://ilgustodellanatura-blog.blogspot.it/2017/08/agave-come-riconoscere-le-diverse-specie.html
      e si è caricata in un tempo normale. Forse è un problema della tua connessione, specie se usi lo Wi-Fi talvolta le pagine sono lente. Quando succede invece di aspettare si devono chiudere e riaprire
      @#

      Elimina
    2. Grazie mille....forse allora è un problema mio !! Il mio unico dubbio era che non si apriva neppure stando molto tempo..cioè o si apriva velocemente o non si apriva, non c'erano via di mezzo.
      P.s. quella pagina aperta è una specifica, non l'elenco dei post...che è quella che segue..

      http://ilgustodellanatura-blog.blogspot.it/p/sitemapblogger-width99margin0_17.html

      A presto

      Elimina
    3. Aperta in un tempo brevissimo. È la tua connessione
      @#

      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.