Widget nativi degli Ultimi Post e dei Commenti Recenti per Blogger.

Come installare i widget degli Ultimi Articoli e dei Commenti Recenti senza javascript esterni utilizzando solo il gadget Feed.

Continuo nel tentativo di velocizzazione dei blog su Blogger senza per il momento passare ai Nuovi Temi che sono significativamente più rapidi nel caricamento.

Per ottimizzare il download della pagina è quindi consigliabile, oltre che eliminare tutti gli inutili orpelli come immagini di sfondo, musica di sottofondo, anche rimuovere i widget inutili per la navigazione o al limite sostituirli con quelli ufficiali di Blogger che non avendo bisogno di javascript esterni sono caricati più velocemente.

Nel precedente post mi sono occupato di come personalizzare il gadget dei Post più Popolari che però non mi ha soddisfatto vista l'arbitrarietà con cui vengono scelti gli articoli da mostrare.

La piattaforma Blogger non offre i widget nativi degli Ultimi Post, Ultimi Commenti e degli Articoli Simili o Correlati. In questo articolo vedremo come creare da soli i primi due gadget utilizzando il widget Feed che poi potremo anche abbellire con dei marcatori dell'elenco personalizzati.

WIDGET DEGLI ULTIMI POST

Si parte dall'URL dei Feed degli articoli che per un blog gratuito generico è il seguente

http://nomeblog.blogspot.com/feeds/posts/default

e che per questo sito è

http://www.ideepercomputeredinternet.com/feeds/posts/default

Si va su Layout -> Aggiungi un gadget -> Base e si scorre la finestra verso il basso fino a trovare Feed. Nella finestra di configurazione si incolla l'indirizzo dell'URL dei Feed e si va su Continua. Nella finestra successiva si digita il Titolo e si scelgono le Impostazioni

Si possono mostrare un massimo di 5 elementi comprensivi delle date e degli autori. C'è anche un quadratino di controllo per far aprire il link in un'altra scheda del browser. Più in basso si visualizzerà l'Anteprima per poi andare su Salva. Sempre da Layout si può trascinare l'elemento per poi andare su Salva disposizione. I post verranno mostrati in un elenco puntato che esteticamente non è il massimo.

Si possono aggiungere delle personalizzazioni partendo dalle informazioni contenute nel post sugli elenchi.  L'ID del widget appena installato è #Feed1. Si va quindi su Tema -> Modifica HTML e si cerca la sezione <b:skin> quindi si clicca sulla freccetta nera posta sulla sinistra per visualizzare tutto il codice. Con Ctrl+F si trova l'ultima riga di tale sezione  ]]></b:skin> quindi subito sopra si incolla questo codice

#Feed1 li {list-style-image:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBL-uV87FVVmTrT9DXtcEJVywU2lq_56MicxSmOyGd5eHHWLp5qQ8qtH9QblHAtEeGTltAtfL83nXOXXdvGS_QjPQh1E75duJSh8L3fRdpu4RqPsTR_fXw0Bl-9vHmPA2T41TYAb9N78g/s10/check.png);}
#Feed1 li:hover {list-style-image:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2eUIpgg37sUab9IF5no7ui3P58FnuZTTu9QvY-qVn14D9WRT60PUCk7vn5lZIuPEx6XQySFDjOMdqQFgN9r_pWKNSYb9B-AxKPJJ1UkOr-y75R9cROCUnmSAUdsn4sanu1qBSaNb59z4/s10/red-check.png);}
#Feed1 li span a {font-weight:bold;}

Si salva il Tema. Ho lasciato gli URL delle due icone che verranno visualizzate al posto dei puntini. Quella con l'URL rosso sarà visibile di default mentre quella con l'URL blu sarà visibile quando si passa sopra al link con il cursore. Ovviamente tali icone possono essere sostituite da altre caricate su Google Foto o su Imgur. L'ultima riga serve per mostrare il link in grassetto. Il risultato sarà il seguente

I colori dei link e dei collegamenti puntati dal mouse sono ereditati dai CSS del blog.

WIDGET DEGLI ULTIMI COMMENTI

Con lo stesso sistema si può creare anche il widget dei Commenti Recenti. Si va ancora su Layout -> Aggiungi un gadget -> Base e si scorre la pagina fino a cliccare su Feed. Nel campo si incolla l'URL dei feed che è

http://nomeblog.blogspot.com/feeds/comments/default

per un blog generico. Per esempio per questo sito è

http://www.ideepercomputeredinternet.com/feeds/comments/default

Nella pagina successiva si configura il widget digitando il Titolo e mettendo la spunta alle preferenze

quindi si va su Salva. L'ID di questo nuovo widget sarà #Feed2 e potremo personalizzarlo come abbiamo fatto con #Feed1. Si può aggiungere il nuovo ID dopo le virgole nel codice precedente in questo modo

#Feed1 li, #Feed2 li {list-style-image:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBL-uV87FVVmTrT9DXtcEJVywU2lq_56MicxSmOyGd5eHHWLp5qQ8qtH9QblHAtEeGTltAtfL83nXOXXdvGS_QjPQh1E75duJSh8L3fRdpu4RqPsTR_fXw0Bl-9vHmPA2T41TYAb9N78g/s10/check.png);}
#Feed1 li:hover, #Feed2 li:hover  {list-style-image:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2eUIpgg37sUab9IF5no7ui3P58FnuZTTu9QvY-qVn14D9WRT60PUCk7vn5lZIuPEx6XQySFDjOMdqQFgN9r_pWKNSYb9B-AxKPJJ1UkOr-y75R9cROCUnmSAUdsn4sanu1qBSaNb59z4/s10/red-check.png);}
#Feed1 li span a, #Feed2 li span a {font-weight:bold;}

quindi si salva il Tema e si controlla il risultato.