Pubblicato il 29/04/09 - aggiornato il  | 11 commenti :

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

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

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

URL

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

screenshot 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”.





11 commenti :

  1. Non ho capito come funziona gif up...dove si come si scarica la "creazione"??

    RispondiElimina
  2. @Mic
    Si clicca sulla scritta blu in basso
    " Let’s see what you get :)", quindi su Save ed infine in "Save gif animation in your computer". Poi nella finestra che si apre scegli Salva File.
    Se non riesci a usare GIF UP puoi sempre usare Make a GIF che tra l'altro non lascia lo watermark in alto. Per sapere come funziona Make a Gif leggiti questo post
    http://parsifal32.blogspot.com/2009/02/come-creare-immagini-animate-in-gif.html

    RispondiElimina
  3. grazie...davvero grazie!!
    [vincy7711]

    RispondiElimina
  4. L'immagine sulla home mi compare con un quadratino e una crocetta nera... credo che l'url che metto è sbagliato. Uso questo Hotfile come hosting poi vado su skydrive ma l'immagine non si muove.

    RispondiElimina
    Risposte
    1. @# Se hai un blog su Blogger utilizza Picasa Web Album per caricare la GIF e ricordati rio rendere pubblico l'album
      https://picasaweb.google.com/home
      e questo è il tutorial
      http://www.ideepercomputeredinternet.com/2013/03/picasa-image-hotlink.html

      Elimina
    2. Grazie! Vado subito a darci un'occhiata!

      Elimina
  5. Non mi è molto chiaro come fare per mettere nella intestazione della home page una serie di immagini dinamiche (almeno tre) al posto di una statica in Blogger ? Riesci a darmi un supporto ? Grazie mille per la consulenza ! Lisa

    RispondiElimina
    Risposte
    1. E' cosa non semplice. Si può risolvere con la grafica. Devi creare una sola immagine delle tre che hai in mente riunendole con Photoshop, Gimp o simili quindi caricarle. Vengono supportate anche le immagini animate in GIF
      @#

      Elimina
  6. Io in realtà desideravo mettere le immagini degli ultimi 5 post che si susseguono in alto nel blog subito sotto all'intestazaione e al menu in modo che cliccando su ciascuna immagine mi rimandasse al post relativo. Come è possibile fare questo su piattaforma blogger ? Grazie mille Lisa

    RispondiElimina
    Risposte
    1. Ci vuole un widget come questo
      http://www.ideepercomputeredinternet.com/2014/07/slideshow-blogger-easyslider.html
      anche se non è proprio quello che desideri
      @#

      Elimina
    2. Grazie vado a leggerlo

      Elimina

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.