Come aggiungere il widget degli Ultimi Commenti su Blogger.

Come installare in Blogger il widget dei Feed configurandolo per mostrare gli Ultimi Commenti e gli Ultimi Post e personalizzandone l'elenco.

Blogger mette a disposizione una serie piuttosto vasta di widget ufficiali che però non sono sufficienti a coprire tutte le aspettative anche dei blogger meno esigenti. Non esistono tra gli altri i widget ufficiali degli Ultimi Articoli, quello degli Ultimi Commenti e quello degli Articoli Simili. Esistono però diversi javascript che permettono agli amministratori di visualizzare questi elementi nel layout come mostrato a titolo di esempio nei post che sono stati linkati.

Questi gadget, con l'eccezione di quello degli Ultimi Commenti, possono essere visualizzati anche nella versione mobile di Blogger. In realtà si può usare un widget ufficiale di Blogger anche per realizzare un gadget degli Ultimi Post e degli Ultimi Commenti. In questo articolo mi occuperò in modo specifico di quello degli Ultimi Commenti ma il procedimento può essere adattato anche a quello degli Ultimi Articoli. 

Prima di procedere bisogna conoscere l'indirizzo dei Feed dei commenti del sito. Per un blog gratuito il suo URL avrà questa struttura di base

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

Per un dominio personalizzato di Blogger basterà sostituire la parte colorata di rosso. Per creare un widget degli Ultimi Commenti si va su Layout > Aggiungi un gadget > Base

per poi scorrere verso il basso fino a cliccare su Feed. Si aprirà una finestra di configurazione



in cui incollare in URL Feed l'indirizzo dei feed dei commenti per poi andare su Continua.

Nel campo del Titolo si digita quello che vogliamo appaia prima degli Elementi. In Mostra si sceglie il numero degli elementi da mostrare. Purtroppo se ne possono mostrare solo un massimo di cinque. Più sotto si possono mettere le spunte in Date elementi e in Fonti/Autori elemento per mostrarli opzionalmente. Si può anche decidere di far aprire i link generati in un altra scheda. Sotto si visualizzerà l'Anteprima del gadget. Si va su Salva per inserirlo nel layout. 

In Layout si trascina l'elemento  nella posizione voluta quindi si va in alto su Salva Disposizione.

Il widget è molto minimalista anche nell'aspetto oltre che nel numero degli elementi. Si può renderlo più accattivante aggiungendo una icona allo stile dell'elenco. Se non avete aggiunto al vostro sito nessun gadget dei Feed prima di questo il suo ID sarà Feed1 e per avere un risultato simile a quello mostrato nello screenshot precedente dovremo andare su Modello > Modifica HTML e, subito sopra alla riga ]]></b:skin> incollare il seguente codice

#Feed1 li {
list-style-image:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrBxBjAUdcFknxXACTlAgosDfIcZjO1ca6tKNv8F7yEfXWR-EGXYMNb_qOxhIueMY0ahBSaSvqGahk79cht83cTpmxeWVKSsoLVzHTkM3m3llhTRtgVws7YYQFazdqzLI7FL7dT6yBhjgQ/s10/check.png);}
#Feed1 li:hover {
list-style-image:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYedecQ4mSTSUL6szOFsr1yn9eXJymw7f6TZFGoAZoQfs_6rIKDxgIXXzTwWz4WJj2GJnIkZnjBItbQJUcheoZQBo_-_WtTBo0oBJEVO9OhujYYT-2dViI1H2DDgsIGU-8E224kGsxsfyg/s10/red-check2.png);
}

che mostrerà due diverse icone a seconda che sia o non sia puntato dal mouse. Gli URL delle icone sono colorati di rosso e possono essere modificati a piacere. Si salva il modello.

Demo Clicca qui

APPENDICE - COME MOSTRARE IL WIDGET DEGLI ULTIMI POST

Con la stessa procedura si può installare anche il widget degli Ultimi Post. Basterà sostituire l'URL dei feed dei commenti con quello degli ultimi post che ha la seguente struttura

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

Per la personalizzazione del gadget con le icone ricordo che il secondo widget dei Feed avrà come ID Feed2 che dovrà essere sostituito a Feed1 nel codice precedente. Per personalizzare nello stesso modo i widget degli Ultimi Commenti e degli Ultimi Post potremo incollare questo codice

#Feed1, #Feed2 li {
list-style-image:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrBxBjAUdcFknxXACTlAgosDfIcZjO1ca6tKNv8F7yEfXWR-EGXYMNb_qOxhIueMY0ahBSaSvqGahk79cht83cTpmxeWVKSsoLVzHTkM3m3llhTRtgVws7YYQFazdqzLI7FL7dT6yBhjgQ/s10/check.png);}
#Feed1, #Feed2 li:hover {
list-style-image:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYedecQ4mSTSUL6szOFsr1yn9eXJymw7f6TZFGoAZoQfs_6rIKDxgIXXzTwWz4WJj2GJnIkZnjBItbQJUcheoZQBo_-_WtTBo0oBJEVO9OhujYYT-2dViI1H2DDgsIGU-8E224kGsxsfyg/s10/red-check2.png);
}

con le stesse modalità e nella stessa posizione già viste in precedenza.