Come inserire immagini animate in GIF in Homepage del blog.

In un commento mi è stato richiesto come fare per inserire delle animazioni o foto animate in formato GIF in Homepage del nostro blog, preferibilmente nella Sidebar.

Per prima cosa bisogna fare un discorso di dimensioni e vedere quanto deve essere larga questa immagine e questo dipende naturalmente dal modello che abbiamo. Stabilita questa cosa dobbiamo passare a creare l’immagine che vogliamo inserire.

Per questa ragione esistono vari servizi online che ci permettono di farlo senza particolari problemi.

Potete consultare i seguenti articoli per avere un’idea

• Creare GIF animate 1 -
• Creare GIF animate 2 -
• Creare GIF animate 3 -

Quando sono state generate le animazioni per ridimensionarle e adattarle al nostro blog possiamo usare gli strumenti illustrati in questo articolo

• Come ridimensionare una GIF animata -

In alternativa possiamo prima ridimensionare tutte le foto alla stessa larghezza, per esempio con il tool ResizR, successivamente generare la GIF animata.

Adesso dobbiamo caricare questa immagine animata su un hosting gratuito tipo Skydrive. Per ottenerne l’URL da Skydrive dobbiamo cliccare sulla miniatura finché non si vedrà l’immagine animarsi. A questo punto selezionare e copiare l’indirizzo dalla barra degli indirizzi

Quindi, se si ha un blog sulla piattaforma Blogger, andare su Layout>Aggiungi un gadget>HTML/Javascript ed inserire il seguente codice

<img style="display: block; float: none; margin-left: auto; margin-right: auto" title="titolo immagine" alt="nome immagine" src="URL immagine" />

Dove al posto di titolo immagine inserite ovviamente il titolo che volete darle. Sarà quello che si vedrà quando si passa sopra con il mouse. Al posto di nome immagine mettete una spiegazione dell’immagine che può essere anche lo stesso titolo. Serve perché questo attributo piace ai motori di ricerca. La cosa più importante è quella di inserire l’URL dell’immagine caricata su Skydrive al posto di URL immagine. Cliccare su Salva per inserire l’elemento

Un esempio di codice potrebbe essere questo

<img style="display: block; float: none; margin-left: auto; margin-right: auto" title="ragazze in bikini" alt="belle ragazze" src="http://fr9uew.blu.livefilestore.com/y1pQXBrI1xzilQNf_lMv7nHBoeZZRPBRGQNPG_uvSQvr4WklbGUqICnwzOKaXVhTvDYChGkBvCe4aIA56NciXfrQoEw15GnIBPe/animatedveloce.gif" />

La prima parte del codice serve per centrare l’animazione nella sidebar. Per vedere il risultato guardate in alto a sinistra nel mio blog di supporto. Se ci passate sopra con il mouse ne leggerete il titolo “ragazze in bikini”.