Pubblicato il 20/10/11e aggiornato il

Widget degli Ultimi Post per Etichetta con Miniature per Blogger.

Comer installare il widget degli ultimi post per etichetta con miniature in un blog della piattafoma Blogger.
Propongo un nuovo gadget degli Ultimi Articoli riferiti a una determinata etichetta. Sarà visualizzato in verticale insieme alle miniature delle immagini eventualmente presenti nel post. Il widget assumerà lo stile degli elenchi del blog così come erediterà i colori dei link normali, di quelli già visitati e di quelli puntati con il mouse. Ho pubblicato in rete una dimostrazione del gadget
               Demo del widget degli Ultimi Post per una singola etichetta con miniature -
Ricordo comunque che ho già pubblicato un altro widget analogo e che quindi si può scegliere tra i due in funzione della compatibilità o meno con il nostro template o di una maggiore sintonia estetica. Nella demo si vedono dei puntini a lato delle miniature che sono ereditati dallo stile del blog in cui l'ho installato. Questo non significa che l'elenco dei post sarà visibile nello stesso modo anche in un blog con un altro modello

widget-ultimi-post-etichetta

Facendo riferimento alla nuova interfaccia di Blogger e ricordando che a breve la vecchia non sarà più disponibile ecco le istruzioni per l'installazione del widget. Si va su Modello < Backup/Ripristino > Scarica modello completo per un backup di sicurezza. Successivamente si va sempre su Modello > Modifica HTML > Procedi e, pigiando F3 o Ctrl+F, si cerca la riga  ]]></b:skin>. Per inciso ricordo che alcune volte in questa riga va a finire anche la parentesi graffa che chiude il CSS precedente diventando così }]]></b:skin>. In questo caso bisogna ricordarsi di inserire il cursore subito dopo la parentesi graffa e cliccare su Invio per separarla. Subito prima della riga colorata di rosso incollare i seguenti fogli di stile 

/* Ultimi Post per Etichetta */
img.label_thumb{
float:left;
border:1px solid #7e7e7e; /* Colore del bordo delle miniature */ margin-right:10px !important;
height:55px; /* Altezza delle miniature */
width:55px; /* Larghezza delle miniature */
}
.label_with_thumbs {
float: left;
width: 100%;
min-height: 70px; /* Altezza elemento */
margin: 0px 10px 2px 0px;
padding: 0;
}
ul.label_with_thumbs li {
padding:8px 0;
min-height:70px;
margin-bottom:10px;
}
.label_with_thumbs a {}
.label_with_thumbs strong {padding-left:0px;}

I parametri colorati di rosso possono essere modificati secondo il significato specificato nei commenti a fianco colorati di verde. Adesso occorre cercare la riga </head> e, subito prima, incollare quest'altro codice che ho pubblicato su Google Documenti 
Nel codice è presente l'URL della immagine di default che viene visualizzata quando non ne è presente nessuna all'interno del post. Tale URL può essere sostituito da quello di un'altra immagine quadrata che abbiamo precedentemente caricato su un hosting quale Picasa.
Si salva il modello. Si va su Layout > Aggiungi un gadget > HTML/Javascript e si incolla questo ultimo codice

<script type='text/javascript'>
var numposts = 4;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 100;
</script>
<script type="text/javascript" src="/feeds/posts/default/-/nome-etichetta?published&alt=json-in-script&callback=labelthumbs"></script>

dove al posto di nome-etichetta si inserisce il tag di cui vogliamo visualizzare gli ultimi articoli. Nella demo iniziale per questa etichetta ho scelto "blogger". Si clicca su Salva e si posiziona l'elemento nel punto prescelto della sidebar. I parametri hanno il seguente significato
  1. var numposts                   : numero degli articoli da visualizzare
  2. var showpostthumbnails   : mostrare le miniature (true), non mostrarle (false)
  3. var displaymore               : mostrare o non mostrare il link del Read More (true o false)
  4. var displayseparator      : mostrare o no un separatore tra gli elementi (true o false)
  5. var showcommentnum    : mostrare o non mostrare il numero dei commenti (true o false)    
  6. var showpostdate            : mostrare o non mostrare la data dei post (true o false)
  7. var showpostsummary      : mostrare o non mostrare l'incipit dei post (true o false)
  8. var numchars                   : il numero dei caratteri dell'incipit degli articoli (100)
Se volete visualizzare gli ultimi post di una etichetta formata da due parole divise da uno spazio bisogna usare i caratteri %20. Se per esempio vogliamo creare il widget per il tag primi piatti occorre inserire al posto di nome-etichetta l'espressione primi%20piatti. Ricordo infine che le etichette sono case sensitive e che quindi le minuscole sono considerate diverse dalle maiuscole




37 commenti :

  1. Ciao io sto cercando di realizzare una cosa che si vede poco nei blog di blogger..
    Vorrei inserire sotto il post, due colonne, in una colonna inserire non so gli articoli recenti e nell'altra gli articoli di una categoria non so.. Come posso creare un area widget da inserire sotto il post divisa in due colonne?
    L'effetto sarebbe molto figo, un solo articolo in grande e sotto, le miniature di tutti gli articoli che desideriamo, ovviamente nella homepage.

    RispondiElimina
  2. @michelelan
    Forse ti possono essere utili questi post
    http://www.ideepercomputeredinternet.com/2011/05/come-dividere-l-di-blogger-in-due-parti.html
    http://www.ideepercomputeredinternet.com/2011/05/come-dividere-in-tre-parti-l-sotto-l-di.html
    Comunque ti consiglio di cercare un template già pronto con le caratteristiche che desideri.

    RispondiElimina
  3. Intanto grazie per la condivisione di cotanta sapienza :-)

    E se volessi includere la stessa cosa in un sito di altro host, tipo altervista?

    RispondiElimina
  4. @Massi Titti
    Prova ma non dovrebbe funzionare perché su Altervista c'è una sintassi diversa per JSON. Ti dovresti informare e chiedere cosa mettere al posto di
    src="/feeds/posts/default/-/nome-etichetta?published&alt=json-in-script&callback= ...

    RispondiElimina
  5. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  6. Ciao Ernesto,
    ho installato questo widget (è quello con il titolo RICETTE FACILI) sul mio blog (www.lacucinaimperfetta.com) e funziona perfettamente! Ho però dei problemi di estetica: Non riesco ad eliminare il pallino a sinistra della foto e a spostare il widget sulla sinistra riducendo a 0 px il padding sx che attualmente dovrebbe essere di 15 px. Vorrei poi modificare la dimensione del carattere del titolo e del sommario a sinistra delle miniature (cosa che ho fatto per i post più popolari)!
    Mi puoi aiutare?
    Ciao Giuliana

    RispondiElimina
  7. @Giuliana
    I parametri che possono essere modificati sono indicati nel post. Ti posso dire come fare per eliminare il pallino che poi non è altro che l'elemento dell'elenco puntato.
    Nel CSS, subito sotto alla riga
    ul.label_with_thumbs li {
    incolla il codice
    list-style:none;
    Dovrebbe funzionare.

    RispondiElimina
  8. Grazie mi hai risolto il problema principale!!! A presto Giuliana

    RispondiElimina
  9. Ciao Ernesto,
    sono riuscita ad inserire questo elemento e a togliere il pallino nero, solo che l'immagine del post anzichè comparire alla sinistra del testo compare sopra. Posso spostarla alla sinistra del testo in qualche modo, aumentando anche un pochino il margine tra immagine e testo?
    Grazie :)

    RispondiElimina
  10. Scusami, aggiungo anche se per caso si può inserire una cornice intorno al widget.
    Grazie Ernesto

    RispondiElimina
  11. @Dieta e Dintorni
    Questi widget sono visualizzati in funzione degli stili dei modelli nei quali vengono inseriti. Si può fare poco, si possono solo modificare le distanze. Hai una sidebar molto stretta, forse dipende anche da quello.

    RispondiElimina
  12. Però io il widget l'ho inserito sotto l'area post, e lì c'è un bel po' di spazio... Non capisco perchè la foto si sposta sopra anzichè rimanere in linea col resto del testo...

    RispondiElimina
  13. Ernesto!!!
    Ore 03.00, ho gli occhi a palla ormai, ma finalmente ho risolto!!!
    Il problema era soltanto che tra la voce ]]> e il codice subito sopra c'era una stringa con su scritta una cosa di questo tipo "inserire qui il codice css per aggiungere modifiche". Tolta la stringa, il widget funziona. Poi, non penso fosse proprio la stringa, penso che fosse il fatto che tra ]]> e il codice del widget ci fosse qualcos'altro inserito. Meno male che domani non lavoro, perchè quando mi impunto che devo risolvere una cosa...
    Grazie ancora Ernesto, e stavolta buonanotte veramente :)
    Giuliana

    RispondiElimina
  14. Ernesto,
    ho cancellato un paio di commenti sopra perchè ero posseduta dal demone del programmatore pazzo e ho fatto un po' di casino, scusami ;)
    Allora, riassumendo: finalmente sono riuscita ad inserire questo elemento, ed ho quindi messo una serie di ultimi articoli per etichetta subito sotto all'area post, che ho diviso in due come da tue istruzioni.
    Volevo chiederti un paio di cose su questo elemento:
    - E' possibile impostare una lunghezza massima del titolo, così come si fa con quella del sommario? Ho provato con 'var title lenght', ma non funziona :D
    - E' possibile far sì che questi ultimi articoli per etichetta non siano visualizzati nelle pagine statiche?
    - E' possibile inserirli in dei riquadri colorati o all'interno di cornici?
    Ecco, basta, giuro che me ne vado, più che buonanotte è ormai quasi buongiorno
    Scusa ancora per il casino, se mi dici dove abiti ti porto capuccino e brioche ;)
    Grazie ancora Ernesto,
    un saluto
    Giuliana

    RispondiElimina
  15. @Dieta e dintorni
    E' possibile tutto ma solo per chi conosce il javascript. Ti do uno spunto per non visualizzare il widget nelle pagine statiche. Inserisci i tag condizionali come illustrato in questo post
    http://www.ideepercomputeredinternet.com/2010/11/come-mostrare-o-non-mostrare-widget-in.html

    RispondiElimina
  16. Ci avevo già provato, ma il problema è che questo elemento non ha la struttura di un widget, quindi non ci sono le parti 'b includable' e così via, e quindi non sapevo come e dove inserire la stringa.
    Per quanto riguarda la lunghezza del titolo, pensavo che bastasse inserire qualcosa tipo 'var...' nella parte che incollo nel widget html/javascript.
    Per la cornice posso anche combatterci un po', ma mi pare di capire che devo proprio andare a modificare il pezzo in javascript, mentre io pensavo che bastasse aggiungere qualcosa nella parte html. Io il javascript non lo tocco nemmeno, mentre con l'html posso anche sperimetare un po ;)
    Grazie, Ernesto

    RispondiElimina
  17. @Dieta e dintorni
    Ti sbagli ha la struttura di un widget solo che devi scoprirne l'id che sarò HTMLX dove X è un numero
    http://www.ideepercomputeredinternet.com/2011/12/come-trovare-l-di-un-widget-per.html

    RispondiElimina
  18. Hai ragione, Ernesto! Come sempre :)
    Seguendo le tue indicazioni sono riuscita a rendere i widget visibili solo nella Homepage, proprio come mi serviva, grazie mille.
    Ora provo a vedere se riesco a sistemare titolo e sfondo.
    Ernesto, ti sono debitrice, Dio solo sa quanto!
    Un caro saluto,
    Giuliana

    RispondiElimina
  19. Allora, Ernesto, ho fatto un bel passo in avanti, perchè seguendo le istruzioni di altri tuoi post sono riuscita ad incorniciare i widget degli ultimi articoli per etichetta e a modificarne i margini, sia interni che rispetto alle sidebar. Sarai orgoglioso di me ;)
    Per quanto riguarda la lunghezza del titolo lascio stare, ho risolto il problema che avevo in altro modo.
    L'ultima cosa che vorrei chiederti è questa: ad ogni widget ho aggiunto un titolo e in basso un link. Questi due elementi rimangono però esterni alla cornice. C'è modo di includerli all'interno della cornice o è troppo complicato ed è meglio se lascio stare?
    Grazie ancora, un saluto
    Giuliana

    RispondiElimina
  20. @Giuliana
    Non ti so rispondere perché così su due piedi non riesco a fare mente locale. Onestamente non mi sembra un grosso problema ...

    RispondiElimina
  21. Infatti, non lo è. Si tratta solo di un fattore estetico, ma va bene anche così com'è.
    Grazie, Ernesto :)

    RispondiElimina
  22. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  23. Ciao ho un problema: vorrei eliminare il pallino dell'elenco puntato.
    Nel CSS ho inserito, subito sotto alla riga
    ul.label_with_thumbs li {
    il codice
    list-style:none;
    come hai suggerito in un commento.
    Ma il pallino invece di scomparire mi si porta attaccato subito sopra all'immagine.
    Hai qualche altro consiglio?

    RispondiElimina
  24. Ernesto, tutto funziona perfettamente ma, modificando l'html e modificando altezza e larghezza delle immagini, essere vengono visualizzate sfocate. Ho utilizzato il widget qui: http://nintendogalaxyitalia.blogspot.it/

    RispondiElimina
    Risposte
    1. @# Le miniature delle immagini dei post di Blogger hanno una dimensione standard di 72 pixel (mi sembra). Se si aumenta questo valore vengono sfuocate o sgranate.

      Elimina
    2. E' quindi impossibile modificare questa dimensione standard?

      Elimina
    3. @# Puoi fare quello che ti pare ma perdendo in qualità delle foto. Mi sembrava di essere stato chiaro.

      Elimina
  25. Ciao Ernesto, andando nel "Modifica HTML > Procedi e, pigiando F3 o Ctrl+F" digito ]]>. o }]]>. ma non me lo trova. Come posso fare?
    Avevo bisogno di un Widget degli Ultimi Post per Etichetta con Miniature come questo o alternativo, abbastanza leggero.
    Grazie

    RispondiElimina
  26. Credo che tu abbia dei problemi a trovare le righe di codice. Prova a leggere questo post
    http://www.ideepercomputeredinternet.com/2013/08/cercare-codice-html-blogger-template.html
    @#

    RispondiElimina
  27. Ho provato a cercarla in blog 1 , ma "]]>." proprio non la trovo, mi sa che sono fulminato allora.
    Grazie lo stesso..

    RispondiElimina
    Risposte
    1. Non è in Blog1, basta cliccare nell'area codice quindi digitare Ctrl+F e infine incollare la stringa in questione nel campo di ricerca. Si pigia su Invio e viene evidenziata. Si clicca sulla freccetta nera per visualizzare tutto il codice quindi si scorre fino a trovarla
      @#

      Elimina
  28. Si Ernesto l'ho fatto, ma quando inserisco "b:skin"nella casella di ricerca che esce quando pigio f3, non si evidenzia nulla. Mentre quando metto "head" mi si evidenzia.... L'avevo già fatto altre volte con altri widget e sono sempre riuscito a trovare tutto.. :(
    Per caso, per non arrecarti molto disturbo, non c'è un'altro widget simile?
    Grazie mille per il tempo che mi dedichi :)

    RispondiElimina
    Risposte
    1. Non si deve pigiare su F3 ma digitare Ctrl+F. Di widget simili ce ne sono tantissimi. Prova questo
      http://www.ideepercomputeredinternet.com/2014/04/widget-ultimi-post-con-miniatura-blogger.html
      @#

      Elimina
  29. Ciao Ernesto,
    vorrei sapere se è possibile rendere questo script asincrono.
    Grazie Giuliana

    RispondiElimina
    Risposte
    1. Non lo so. Puoi provare seguendo queste istruzioni
      http://www.ideepercomputeredinternet.com/2014/07/javascript-asincrono.html
      per poi testarne il comportamento (se si apre subito o come ultimo)
      @#

      Elimina
  30. Grazie sei stato gentilissimo a rispondermi subito! Purtroppo questa soluzione non funziona! A presto Giuliana

    RispondiElimina

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.