Pubblicato il 12/01/11 - aggiornato il  | 57 commenti :

Come inserire uno slideshow di foto con link a articoli o blog.

Se avete un blog su piattaforma Blogger e siete molto attenti alla grafica, vi consiglio il widget dello Slideshow con miniature degli Ultimi Post che è uno dei più belli mai realizzati per Blogger. Vediamo come sia possibile realizzare uno slideshow corredato da miniature degli articoli che riteniamo più interessanti per proporli in un modo accattivante ai visitatori del nostro blog.
Per la realizzazione si usa lo stesso codice impiegato per la scritta scorrevole che è stata ripresa su molti siti. Il nostro obbiettivo è quello di sostituire il testo con delle miniature di immagini. Sarà anche possibile personalizzare il bordo e perfino il background del widget oltre alla velocità di scorrimento. Passo subito a presentare il codice, successivamente parlerò delle possibili personalizzazioni
<marquee width="300" height="80px" direction="left" bgcolor="#FFCC99" scrollamount="6" style="border: 2px solid #003366;" onmouseover="this.stop()" onmouseout="this.start()" >
<a href="http://www.ideepercomputeredinternet.com/" title="TITOLO_LINK" tag="Testo alternativo" target="_blank">
<img heigth="70" width="70" src="http://eqrg2a.blu.livefilestore.com/y1pGKOmMQ3L7qPwUoGJYYYf1TRdwlGAY5E4Gz0XaIY-o2uZvrzA8oREd623kEmwS92ImtzcvXHlBKQYVOdYReoTLd4J7MyiO24E/alba1.jpg"/></a>
<a href="http://www.ideepercomputeredinternet.com/" title="TITOLO_LINK" tag="Testo alternativo" target="_blank">
<img heigth="70" width="70" src="http://eqrg2a.blu.livefilestore.com/y1pGKOmMQ3L7qNDxQufvzyRcf13WcBJD4Q1WbI1YVjm9wIwrgTirEsgaskPgwzUFVztFrtNBN63EeFOkoFmH9y13wDjthxuz4_9/alba2.jpg"/></a>
<a href="http://www.ideepercomputeredinternet.com/" title="TITOLO_LINK" tag="Testo alternativo" target="_blank">
<img heigth="70" width="70" src="http://eqrg2a.blu.livefilestore.com/y1p1GbmTbqO5fshUMwaAD-h33Q5Pr0FFDURdxzSFa1s085HjqTo5xISYQN1lZD7L14fs0c60mkEZIJUjDCrbBBw-ksmzkj1Hyw5/tramonto1.jpg"/></a>
<a href="http://www.ideepercomputeredinternet.com/" title="TITOLO_LINK" tag="Testo alternativo" target="_blank">
<img heigth="70" width="70" src="http://eqrg2a.blu.livefilestore.com/y1p1GbmTbqO5fsvzsgxrP47XrXtjvXY0VpVNyK9s9NAbs6KowBqyNpqNNLO_8UqknVUpPsF0k1QmN0vO9GDFMhoyyMdPUUgilcw/tramonto2.jpg"/></a>
</marquee>
Questo codice va incollato su Design > Aggiungi un gadget > HTML/Javascript e posizionato a piacere con il mouse. Ecco l'aspetto di questo slideshow





Se voi ci passate sopra con il mouse vedrete che il movimento si arresta per poi riprendere quando lo togliete. Se cliccate su una miniatura, sarete indirizzati al relativo collegamento, in questo caso la homepage di questo blog. Le personalizzazioni che si possono fare sono:
  1. Larghezza del widget: width="300". Se si vuole che occupi tutto lo spazio si sceglie width="100%"
  2. Lunghezza del widget: height="72px" - E' chiaramente in funzione della dimensione delle miniature
  3. Direzione: direction="left" può essere sostituito da direction="right"
  4. Colore di sfondo: bgcolor="#FFCC99" - Se si vuole lo sfondo bianco si sostituisce con #FFFFFF o si toglie l'attributo
  5. Velocità di scorrimento: scrollamount="6" - Più è alto il numero maggiore è la velocità
  6. Stile del bordo: solid - Altre opzioni sono dotted, dashed, double, ecc
  7. Dimensioni del bordo: 2px
  8. Colore del bordo: #003366
  9. Dimensioni delle miniature: heigth="70" width="70"
  10. Titolo e Testo alternativo: Quello che si inserirà nel tag Title sarà visibile quando si punterà con il mouse sull'elemento. Potrebbe quindi essere il titolo dell'articolo a cui si riferisce la miniatura. Il tag ALT è importante ai fini SEO e si può inserire la stessa espressione presente in Title.
  11. Numero delle miniature: Possono essere inserite tutte le miniature che si vogliono aggiungendo altre righe con questa sintassi
    <a href="URL COLLEGAMENTO" title="TITOLO_LINK" tag="Testo alternativo" target="_blank"><img heigth="70" width="70" src="URL_IMMAGINE"/></a>
Vanno anche inseriti i collegamenti ai vostri post al posto dell'URL della mia Homepage evidenziato di rosso. Si devono poi sostituire gli URL delle immagini che saranno state in precedenza caricate su hosting come Picasa, SkyDrive o ImageShack.




57 commenti :

  1. Ernesto che modello di template hai di base? Giusto per capire qual'è il punto di partenza e tutto ciò che potrei realizzare seguendoti

    RispondiElimina
  2. @Soffio di Dea
    Un vecchio modello, si chiama Tekka, che adesso non c'è più. Comunque tutte le personalizzazioni le provo anche sul nuovo modello Simple in questo blog di prova
    http://design-prova.blogspot.com/

    RispondiElimina
  3. Fino a quanto si può allargare questo widget? Lo vedo bene messo sotto l'header, ad esempio, ma 300 è un pò piccino..

    Bello, bello, bello.. (mi riferisco al widget!!!) hihihihihihi ^.^

    RispondiElimina
  4. @Sarù
    Si può allargare fino a quanto si vuole e si possono mettere tutte le immagini che si vogliono avendo scelto 70 pixel per le miniature (4x7=28) ho messo width="300" pixel ma si può mettere anche width="1000" pixel o, meglio ancora, width="100%" il che significa che prenderà tutto lo spazio dell'header o della sidebar.
    Ho aggiornato il post per rendere la cosa più chiara.

    P.S. Non ho pensato neppure per un attimo che il "bello" non fosse rivolto al widget :D

    RispondiElimina
  5. Ciao grande, volevo farti una domanda, esiste il modo per far si che non ci sia interruzione tra l'ultima e la prima miniatura? è bruttino quel vuoto....
    Volevo anche dire a te e tutti i tuoi lettori che io ho messo il tutto in verticale e scrivendo "down" lo scorrimento va dall'alto in basso, scrivendo "up" dal basso all'ato :)
    Ciao e grazie dei consigli che ci regali

    RispondiElimina
  6. @Sauro
    utilizzando il tag marquee non c'è possibilità, bisogna prima che esca l'ultima miniatura prima che si inizi a visualizzare la prima.
    Mi sono dimenticato nel post di parlare delle opzioni "up" e "down" mentre avevo parlato della "right", grazie di averlo ricordato.
    Ciao

    RispondiElimina
  7. ciao! Io conoscevo anche il tag <marquee behavior="alternate.... in due modi.. ma volevo sapere se era compatibile con blogspot e con tutti i browser... posso aggiungerlo senza problemi o causa disguidi???? con firefox li vedo bene ma non so gli altri...

    RispondiElimina
  8. @Camilla
    Funziona con tutti i browser recenti. Con IE6 non ci metterei la mano sul fuoco ma adesso quel browser non lo supporta più nessun sito.
    Con behavior="alternate" le miniature oscillano da sinistra a destra, nel post non ho citato questo attributo ma si può inserire al posto di direction="left" .
    Ciao

    RispondiElimina
  9. Domanda...le mie foto le inserisce automaticamente wlw nell'account che mi ha fatto aprire blognotesalento@live.it come posso inserirle in questo slideswou?

    RispondiElimina
  10. @Petra
    Se non riesci a trovarle su Picasa
    http://picasaweb.google.com/home
    Le scarichi con il destro del mouse e le ricarichi su un album di Picasa
    http://www.ideepercomputeredinternet.com/2010/07/picasa-e-lo-strumento-piu-completo-per.html
    quindi ricavi l'URL e lo incolli nella giusta posizione.
    Ciao

    RispondiElimina
  11. Ti ringrazio per la risposta!!!! allora proverò

    RispondiElimina
  12. Grazie,ci provo subito..........

    RispondiElimina
  13. Ciao, non capisco perché a me non linka alla pagina del post ma alla foto su picasa web album... Eppure ho copiato esattamente il tuo codice...

    RispondiElimina
  14. @Vale
    Hai sicuramente sbagliato a incollare l'URL. Il link alla pagina è il primo, lo devi sostituire all'URL del mio blog.
    Ciao

    RispondiElimina
  15. Ciaoooo Io ho inserito lo slide nel mio blog: http://myricettarium.blogspot.com/, io uso Firefox e funziona.. purtroppo con explorer 8 mi fanno notare non funziona.. come psoso risolvere? grazie mille

    RispondiElimina
  16. @Claudia
    Purtroppo IE dà spesso di questi problemi anche se è strano perché il tag marquee dovrebbe riconoscerlo. Ho provato ad aprire il tuo sito con IE9 e funziona perfettamente lo slide che hai sulla destra nella sidebar. Non so però se lo hai inserito questo codice.

    RispondiElimina
  17. Si..si quello che tu hai visto è esattamente questo codice.. allora credo sia proprio un problema di IE 8! grazie mille della risposta..

    RispondiElimina
  18. era molto bello come effetto... però l'ho tolto per via dello spazio vuoto tra prima e ultima miniatura :( peccato

    RispondiElimina
  19. @Soffio Di Dea
    Con questo slideshow
    http://www.ideepercomputeredinternet.com/2011/02/widget-di-uno-slideshow-orizzontale-con.html
    non ci sono spazi vuoti.

    RispondiElimina
  20. E se lo volessi fare in verticale??

    RispondiElimina
  21. @solofilm
    sostituisci direction="left" con direction="up" o direction="down"
    e modifica radicalmente le dimensioni
    Es: width="100px" height="400px"

    RispondiElimina
  22. Ciao Ernesto! A me servirebbe uno slide di immagini come quello del sito Robin Film presente? Non voglio fare spam quindi ho messo solo il titolo del sito, sufficiente per trovarlo.
    A me interessa che sia anche simile a quello.. so che avevi fatto un post simile, ma non riesco a trovarlo!
    grazie mille!

    RispondiElimina
  23. @Corvo Michele
    Esistono dei template in quel modo ma widget per blogger penso di poterlo escludere

    RispondiElimina
  24. Il template è stato fatto appositamente per quel sito da ARWeb
    Se vuoi carpire delle personalizzazioni vai qui
    view-source:http://www.robinfilm.com/

    RispondiElimina
  25. Ciao, ho inserito il codice nei gadget della side bar destra del blog http://vanigliazenzeroecannella.blogspot.com, con firefox e chrome funziona, ma con explorer mi spalma fuori tutte le immagini.. è solo una questione di versione vecchia di explorer? C'è una soluzione? Grazie
    Vale

    RispondiElimina
  26. @Vale
    Ho appena aperto questo widget con IE8 e IE9 e funziona perfettamente. Qualche volta però con IE certi modelli di Blogger appaiono diversi e anche con diverse distanze. E' uno dei tanti problemi di questo browser.

    RispondiElimina
  27. Grazie, finalmente grazie alla tua spiegazione ci sono riuscita, a presto!

    RispondiElimina
  28. Ciao,
    ho provato a immettere il codice qui sopra, ma le foto al passaggio del mouse non si fermano...c'è qualcosa che non va nella stringa del codice?? dove va messo il tag alt?? scusa la domanda ma è una delle prime volte che mi cimento con questo tipo di cose....
    ho per adesso inserito la stringa e la lascio x qualche giorno sul mio blog così magari riesci a darmi una mano e a modificarla in modo corretto... il link al blog è
    http://saporidicasanicoletta.blogspot.it

    Grazie mille
    Nicoletta

    RispondiElimina
    Risposte
    1. @# Lo slideshow nella tua sidebar di sinistra funziona perfettamente e si ferma quando si passa sopra con il cursore. Il tah alt lo puoi anche tralasciare, comunque nel codice di questo post mi sembra sia chiaro dove si mette. Ci devi inserire le parole chiave della immagine tipo alt="cucina-sapori-tagliatelle"

      Elimina
    2. ho risolto quando ormai avevo già scritto qui...cmq grazie x la risposta!!!buona giornata.

      Elimina
  29. Ciao Ernesto! Alla fine ho inserito questo widget, mi piace molto! Solo che c'è un piccolo problema, con Chrome è perfetto ma su Explorer in pratica è come se le immagini fossero fuori dal riquadro... Un macello insomma! Come mai? Ho seguito tutto, ho solo cambiato la direzione...

    RispondiElimina
    Risposte
    1. @# IE dà sempre dei problemi. Con IE10 dovrebbero essere di meno. Comunque prova con questa procedura
      http://www.ideepercomputeredinternet.com/2012/10/cross-browser-internet-explorer-ie9-blogger.html

      Elimina
    2. Ciao, scusa se ti stresso nuovamento! L'inghippo delle immagini fuori del widget si è risolto cambiando la riga del tuo post, però ora nel widget si arriva alla terza immagine e inizia da capo! Si può fare qualcos'altro? Grazie!

      Elimina
    3. @# Prova a allargare cioè a modificare il valore di width

      Elimina
    4. Proverò! Grazie e buon weekend!

      Elimina
  30. Ciao Ernesto, devo riscrivere il commento perchè ho messo un link al mio blog di prova :-(
    Il widget è fantastico e funziona benissimo, se non fosse che quando clicco sull'immagine, inizialmente si apre la pagina linkata, ma poi si apre una pagina di errore di Chrome che mi avverte che il link è errato.
    Ho letto e riletto il codice ma mi sembra ok, non riesco a capire il perchè di questo reindirizzamento :-(
    Grazie in anticipo e buon we
    Cinzia

    RispondiElimina
    Risposte
    1. Il problema dipende dal fatto che non hai sostituito bene
      http://www.ideepercomputeredinternet.com/
      con l'indirizzo specifico. Se provi a linkare su una immagine del Demo in questa stessa pagina funziona perfettamente. Forse utilizzi degli URL non corretti.
      @#

      Elimina
    2. Grazie per la risposta tempestiva! Ho provato a lasciare inalterata al stringa con il link alla home page del tuo blog ed in effetti funziona. Ma se inserisco l'url specifico del post del tuo blog si ripresenta lo stesso problema...Forse va inserito l'url della home page?
      Grazie
      Cinzia

      Elimina
    3. No no. È una cosa strana. Stai sbagliando qualcosa ma non ho capito cosa :)
      @#

      Elimina
    4. @# Forse non riesci a trovare l'URL di un post. Per esempio quello di questo articolo è
      http://www.ideepercomputeredinternet.com/2011/01/come-inserire-uno-slideshow-di-foto-con.html

      Elimina
    5. ho trovato l'errore...semplicemente non avevo tolto lo slash prima delle virgolette di chiusura dell'URL. Devo cambiare occhiali mi sa.
      Grazie e scusa il disturbo
      buona domenica Cinzia

      Elimina
  31. Caspita,complimenti davvero!!!
    Erano due giorni che giravo tra vari siti di "pseudo geni dementi" dove non si capiva niente e all'improvviso ecco tutte le risposte a quello che cercavo in modo semplice e chiaro,ho fatto qualche modofica al codice ed è perfetto per quello che quello che volevo nel mio sito.
    Grazie mille. Bruno

    RispondiElimina
  32. Ciao ma questo widget funziona su qualsiasi sito?
    Mi spiego io ho un sito preso da 1and1. Ho fatto svariate prove anche semplicemente copincollare il codice di esempio di questo post e mi succede una cosa stranissima. Il widget funziona ma le immagini invece di essereuna di fianco all'altra sono attaccata ed in colonna. Verticalmente!!
    Mi potreste aiutare?

    RispondiElimina
    Risposte
    1. Se sono in colona è un problema di larghezza. Prova a aprire questa pagina
      http://htmledit.squarefree.com/
      che è un Editor online e incollaci il codice così com'è. Lo vedrai nello stesso modo di questa pagina. Il codiuce funziona in tutte le pagine HTML anche se il tag marquee è un po' obsoleto. Se come credo tu lo abbia instalato in una sidebar manca lo spazio per lo scorrimento. Sarebbe stato più adatto il footer o una pagina statica
      @#

      Elimina
    2. Grazie per la risposta,
      A dire il vero però il widget è inserito al centro e non in una sidebar ci dovrebbe essere spazio sufficiente per una una lunghezza come quella indicata nel qui nel sito. Come posso risolvere?
      Grazie Emiliano

      Elimina
    3. Ma hai provato se funziona il mio di codice? Se il mio codice funziona significa che stai sbagliando a modificarlo mentre se non funziona allora c'è poco da fare
      @#

      Elimina
  33. ciao, ma come posso realizzare sul mio blog uno slideshow con i link ma di dimensioni molto grandi? questo sarebbe l'esempio di ciò che vorrei arrivare a realizzare http://www.uglytruthofv.com/
    grazieeeeeee

    RispondiElimina
    Risposte
    1. Quello che mi hai indicato è un sito Wordpress. Realizzare uno slideshow come quello è piuttosto complesso. Ti consiglio di cercare un modello con uno slideshow come quello. Qui ce ne sono 170 tutti Responsive
      http://www.ideepercomputeredinternet.com/2015/07/blogger-responsive-template.html
      come per esempio quelli Portfolio
      http://www.ideepercomputeredinternet.com/2015/07/blogger-responsive-template.html#Portfolio
      @#

      Elimina
  34. ciao, funziona su chrome, maxthon e firefox, in verticale nel banner laterale, mettendo 100% larghezza del marquee e delle immagini (se non si specifica l'altezza delle immagini le ridimesiona correttamente da solo). Peccato che sia un po' lento a caricarsi. Ma c'è un modo per distanziare un po' di più le immagini tra loro?

    RispondiElimina
    Risposte
    1. @# Prova a inserire delle Entità di spazio tra i tag delle immagini
       
      Per esempio
      .... target="_blank" >   < img heigth

      Elimina
    2. @# Nel commento le entità &#160; non si sono viste :)
      Forse adesso si vedranno (spero)
      .... target="_blank" > &#160;&#160;&#160; < img heigth

      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.