Creare uno slideshow di foto su Blogger con link ai post.

Come installare uno slideshow di immagini con link ad articoli o a blog amici in un blog di Blogger.

Quando i lettori giungono sul nostro sito è buona norma mostrare loro il meglio dei nostri contenuti per trattenerli e per non farli fuggire subito. I widget degli Ultimi Articoli, quello dei Post più Popolari e del Post in Evidenza possono essere delle soluzioni utili per informare i lettori di altri articoli interessanti che abbiamo pubblicato.

Tutti i siti hanno quelli che vengono definiti articoli pilastro cioè dei post che l'autore e il lettore considerano fondamentali. Questi post possono essere inseriti in un elenco ma possono anche essere mostrati in uno slideshow di immagini con il titolo del post, e eventuale descrizione, e soprattutto con il link che permette al lettore di aprirli. In questo articolo vedremo come realizzare un tale slideshow con la possibilità anche di settare la durata dell'intervallo tra una immagine e l'altra durante la sua riproduzione automatica.

Per realizzare questo widget occorrono diversi passaggi tutti però piuttosto semplici. La prima operazione da fare è quella di scegliere i post da mostrare in questo slideshow. Successivamente si dovrà selezionare una immagine rappresentativa per ciascun post. Tali immagini poi dovranno essere rese delle stesse dimensioni con una larghezza compatibile con quella della sidebar se volessimo inserire lo slideshow in quella posizione.

Si dovrà poi effettuare una piccola modifica grafica per aggiungere un testo a ciascuna immagine con il titolo del post a cui si riferisce e eventualmente anche una breve descrizione. L'aggiunta di un testo può essere fatta con Photoshop ma anche con i gratuiti Gimp e Paint.NET. Il gadget che vado a mostrare sarà visibile sono in blog con connessione HTTP e non sarà compatibile con chi ha scelto la connessione HTTPS.

CARICARE IMMAGINI SU GOOGLE FOTO

Gli utenti di Blogger possono usare un sistema molto semplice per caricare le immagini su Google Foto per poi ricavarne il link diretto. Si apre la Bacheca di Blogger quindi si sceglie uno qualsiasi dei blog che abbiamo creato con il nostro account e si va su Nuovo Post per aprire l'Editor di Blogger.

Si clicca sulla icona per aggiungere le immagini quindi nella finestra che si apre si seleziona la scheda Carica e si va su Scegli File. Si selezionano le immagini che abbiamo preparato per lo slideshow quindi si selezionano tutte cliccandoci sopra con il mouse e infine si va su Aggiungi Selezionate.

Le immagini verranno inserite nella bozza del post una sotto all'altra. Si clicca su HTML per visualizzare il codice delle immagini per poi ricavarne il link diretto.

Il codice di ciascuna immagine è separato da quello della successiva dal tag <br /> che rappresenta un salto di riga. Per trovare gli indirizzi delle immagini si cerca in ciascun blocco di codice il tag src=". L'hotlink della immagine sarà l'indirizzo che viene dopo a tale tag. Si selezionano e si copiano tali URL in un file di testo

Tali URL iniziano tutti con https e termineranno con il formato della immagine, solitamente JPG. A questo punto possiamo andare su Bacheca -> Post e eliminare la Bozza che abbiamo creato.

Le immagini caricate rimarranno comunque in Google Foto e gli URL diretti saranno pienamente funzionanti.

COME INSTALLARE IL WIDGET DELLO SLIDESHOW

Si va su Layout -> Aggiungi gadget -> Aggiungi il tuo

Verrà mostrato un avvertimento che informa come alcuni widget di terze parti potrebbero non essere compatibili con HTTPS. Nel campo sottostante si incolla l'indirizzo del gadget che ho caricato su Google Sites quindi si va su Aggiungi URL. L'URL da aggiungere è il seguente

https://sites.google.com/site/exdrive32/script/gadget-slideshow.xml

Verrà aperta una finestra di configurazione come questa

Nella prima riga si digita il titolo del widget, nella seconda si sceglie la sua altezza in funzione della dimensione delle immagini che abbiamo scelto e nella terza digitiamo il numero di secondi dell'intervallo tra le immagini.

Ci sono poi tre campi da compilare per ognuna delle sei immagini di cui è composto il widget. Nel primo si incolla l'URL diretto della foto che abbiamo appena ricavato, nel secondo si incolla l'indirizzo del post a cui collegare la foto in oggetto e nel terzo il Testo Alternativo ovvero il nome della foto per questioni SEO.

Opzionalmente si può aggiungere un margine sinistro e un margine destro. Si potrebbe non visualizzare l'anteprima del widget anche se si va su Aggiorna. Si clicca su Salva quindi si posiziona il widget nel Layout e si va su Salva disposizione. Se avete abilitato la connessione HTTPS visualizzerete il messaggio che questi widget non sono ancora disponibili su connessioni criptate. Se invece siete ancora con la connessione HTTP vedrete lo slideshow.

Demo
Clicca qui

Chi ha un dominio personalizzato potrebbe dover scaricare il file .XML del widget incollandone l'URL nel browser per poi andare su Invio. Tale file dovrà poi essere incollato in uno spazio nostro per poi ricavarne il link diretto da incollare nella finestra di configurazione Aggiungi il tuo. Per questa operazione di può usare Firebase.

Concludo ricordando che oltre a creare uno slideshow di post si possono creare slideshow di nostri blog collegati in un network, aggiungere immagini e link di blog amici o anche creare delle campagne di sensibilizzazione. Non c'è limite alla fantasia, basta scegliere immagini, aggiungere testo e link e il gioco è fatto.