Pubblicato il 25/05/11e aggiornato il

Slideshow Orizzontale degli Ultimi Articoli con Miniature: Widget per Blogger.

La ricerca di slideshow orizzontali per gli Ultimi Post su Blogger è sempre stata ai primissimi posti tra gli utenti di questa piattaforma. Dopo aver visto un gadget presente su Arona Immobiliare ad opera di Giorgiogal e dopo aver consultato il lavoro di Antonio Lupetti su News Ticker with Horizontal Scrolling basato sul framework MooTools, sono in grado di presentare un gadget orizzontale scorrevole che mostra miniature e titoli degli ultimi post pubblicati. Ho, come mia abitudine, inserito online una

E' sempre visibile con Chrome, Firefox e Opera mentre con Internet Explorer dipende da quanti e quali altri script sono presenti nel modello. In quello che ho usato come test ce ne sono di troppi per i gusti di IE ma questo non toglie che non possa essere visibile nel vostro template. Il widget mostra gli ultimi 12 articoli con miniature in due schermate di sei che si susseguono in modo automatico con effetto slide.

slideshow ultimi post per blogger

L'installazione è molto semplice. Si va su Design > Aggiungi un gadget > HTML/Javascript e si incolla il

Le personalizzazioni più interessanti le ho evidenziate di un diverso colore. Ne faccio un breve elenco

  1. La prima riga <div align="center"> e l'ultima </div> servono per centrare tutto il widget e anche il titolo. Possono essere tolte se non servono
  2. Lo sfondo del titolo è dato da questa immagine 6x38 che può essere sostituita da un'altra così come il colore di background del titolo #AC1615
  3. La larghezza del widget è stata calcolata per sei miniature e quindi è di 650 pixel. Se se ne mettono di più strette o più larghe e in numero diverso, questo dato può mutare così come quello dell'altezza del contenitore del widget 140 pixel
  4. La riga <h1>Ultimi post di Idee per Computer ed internet</h1> serve per visualizzare il titolo del widget. Se non si vuole mostrare, basta non inserire niente tra <h1> e </h1>
  5. Questa immagine che ha l'URL https://lh3.googleusercontent.com/_nT13UtBmmiU/Td0M2XRwEgI/AAAAAAAATTM/mNBKscKBY0A/thumbnail.jpg
    rappresenta una miniatura casuale che sarà mostrata nei post che non hanno nessuna immagine. Se ne possono inserire fino a tre tutte diverse, di dimensioni identiche a quelle delle miniature 
  6. thumbwidth = 100; thumbheight = 75; rappresentano la larghezza e l'altezza delle miniature
  7. showPostDate = false; per non mostrare la data, se invece si vuole vedere, occorre sostituire false con true
  8. numposts = 6; è il numero di articoli che si vogliono visualizzare contemporaneamente.
  9. Come vedete ci sono due script sostanzialmente identici che devono avere gli stessi parametri. La differenza sta nell'elemento di partenza. Il primo ha startfrom = 7; mentre il secondo startfrom = 1; Il primo parametro deve variare a seconda del numero degli elementi che si visualizzano. In questo caso, visto che ne abbiamo scelti 6, il secondo script partirà dal numero 7.
  10. summaryPost=25 è il numero massimo dei caratteri del titolo del post che si possono visualizzare nel widget
  11. Infine si dovrà inserire l'URL dei feed del nostro blog in formato XML. In sostanza si aggiunge /atom.xml alla homepage del blog

Dopo aver salvato l'elemento si posiziona a piacere nel blog.





50 commenti :

  1. l'ho messo sul blog di cinema si possono visualizzare più di 12 post?? e si può aumentare la larghezza del thumb se uno ha spazio?? es: da 100x75 a più grande e in che proporzione??
    denghiù ;-))

    RispondiElimina
  2. ho sempre il solito problema delle immagini stirate in orizzontale... non capisco cosa sia...

    RispondiElimina
  3. ho lasciato il widget sul blog alla fine dei post così puoi vedere cosa si combina: http://sonyericssongen.blogspot.com/

    è assurda sta cosa...

    RispondiElimina
  4. @SE-Gen
    Ci deve essere qualche stile che si sovrappone. Prova per curiosità a metterlo nella sidebar diminuendo del 60% tutte le dimensioni

    @Tex Willer
    Si possono mettere anche più di 12 immagini ma solo numeri pari e si può aumentare la dimensione delle miniature.
    Se metti per esempio 16 post devi inserire questi parametri
    numposts = 8;
    startfrom = 9; nel primo codice
    e lasciare
    startfrom = 1;
    nel secondo
    Se cambi le dimensioni fai un po' di calcoli per arrivare alla larghezza totale, poi puoi sempre andare un po' a tentativi.

    RispondiElimina
  5. anche lasciando le stesse dimensioni puoi vedere che nella sidebar il problema non cambia... e lo stesso problema avviene pure nelle immagini di alcuni bottoni della Wiybia bar che ho messo in basso... è una piaga e colpisce tutti gli elementi con lo stesso script credo... ho provato ad eliminare la sidebar posta in alto ma non cambia, ho eliminato la barra di wiybia ma nulla... non ho idea di cosa sia... mi arrendo mi sa...

    RispondiElimina
  6. Ciao e grazie per tuo impegno continuo a soddisfare le nostre esigenze. Credo che nel fine settimana mi dedicherò a questo slideshow orizzontale. Devo lavorare con calma e mi serve almeno un'oretta (sono un po' lenta per queste cose), volevo chiederti se c'è la possibilità di rallentare un po' la velocità di scorrimento dei post.
    Grazie
    Veggie

    RispondiElimina
  7. @Veggie
    Ci sarà senz'altro ma bisognerebbe consultare la documentazione e modificare i javascript che ho già caricato

    RispondiElimina
  8. Segnalo che il widget va in conflitto con Wibiya...

    RispondiElimina
  9. dunque dici che è Wibia? E che problemi ti da?

    RispondiElimina
  10. Salve..ottimo widget!!E subito provato!!!Nel mio blog di prova funziona perfettamente..in quello invece che uso non funziona...appare solo il rettangolo...come mai??

    RispondiElimina
  11. Adattato al mio blog e... perfetto! Molte grazie.

    RispondiElimina
  12. widget assai utile
    ma come si rallenta il timing dello slide show?
    ho visto che nella versione verticale c'è un
    limitspy=4
    intervalspy=4000

    forse anche nell'orizzontale un comando del genere può funzionare?

    grazie

    RispondiElimina
  13. @BeatoTrader
    In questo javascript
    https://sites.google.com/site/scriptperilblog/widget-1/newsticker.js
    ci sono i parametri

    speed: 1500, delay: 5000,

    che possono essere modificati e quindi ricaricato il JS su Google Sites o DropBox

    RispondiElimina
  14. grazie ernesto T
    ma non ci ho capito un H...;-)

    cosa devo fare esattamente?

    grazie

    RispondiElimina
  15. @BeatoTrader
    Mi chiedi di farti una lezione in un commento :)
    1)Salva il modello
    2)Incolla questo indirizzo nel browser e premi Invio
    https://sites.google.com/site/scriptperilblog/widget-1/newsticker.js
    3)Il file scaricato lo devi aprire con Notepad++
    http://www.ideepercomputeredinternet.com/2009/12/notepad-per-modificare-modelli.html
    4)Cerchi le righe che ti ho indicato nel precedente commento e che sono all'inizio
    5)Modifichi i valori della velocità (speed)
    6)Salvi il file
    7)Carichi il file su Google Sites
    http://www.ideepercomputeredinternet.com/2010/05/come-caricare-file-javascript-e-css-su.html
    o su DropBox
    http://www.ideepercomputeredinternet.com/2010/11/dropbox-per-condividere-file-con-piu.html
    8)Ne acquisisci l'URL e lo sostituisci nel codice ceh hai inserito nel modello

    RispondiElimina
  16. perdonami
    sei stato gentilissimo
    più tardi provo e poi ti dico

    In cambio sono a tua disposizione nel mio campo: sono l'autore di uno dei primi Blog a livello nazionale di finanza ed economia
    Se hai bisogno chiedimi...:-)
    http://www.ilgrandebluff.info/

    ma come mai in un widget così bello
    non è presente questa opzione assai utile?

    grazie
    ciao

    RispondiElimina
  17. @Beatotrader
    Posso provare a estrarla dal javascript e a inserirla nel codice. Magari quando ho un po' di tempo :)

    RispondiElimina
  18. Ernesto il tuo post è davvero carino ...
    e questo widget sul mio blog mi piace molto però ho un problemino ... non mi scorre la slideshow ...
    vorrei poterti inviare il codice da me modificato ... sarei felice se potessi controllare se c'è e dov'è l'errore ... però qui non mi è permesso ... come posso fare ?
    Informazione non so se utile: io uso firefox ...
    grazie in anticipo ...
    Moon

    RispondiElimina
  19. @Moon
    Per principio in linea di massima non posso mettermi a analizzare il codice dei lettori; capisci bene che avrei una sacco di richieste che non ho il tempo di soddisfare. Nei prossimi giorni farò un nuovo articolo con 5 miniature cercando di essere ancora più chiaro. Se non ti scorre non hai inserito bene i parametri
    startfrom = x; o forse non hai modificato le larghezze in modo coerente.

    RispondiElimina
  20. @Moon
    Il numero delle miniature lo ha cambiato? Perché se passi da sei a otto devi mettere startfrom = 9; (esempio). La larghezza delle miniature moltiplicata per il loro numero è compatibile con quella totale del widget? ( width:650px;)
    Se hai cambiato questo dato lo hai fatto anche in tutte le altre righe in cui compare?

    RispondiElimina
  21. ho lasciato i tuoi valori ...
    io ho modificato solo il colore di sfondo
    con il nero #oooooo

    RispondiElimina
  22. @Moon
    Allora non hai inserito correttamente il nome del tuo sito. Devi sostituire in due posti
    http://www.ideepercomputeredinternet.com/atom.xml
    con
    http://solamentemestessa.blogspot.com/atom.xml
    Se non ti funziona ugualmente allora c'è una incompatibilità nei modelli

    RispondiElimina
  23. allora sarà così sicuramente perché ho controllato ed è tutto ok
    Grazie lo stesso ...
    a presto

    RispondiElimina
  24. Salve, ho un blog di cucina, dove un'amica mi ha creato uno slideshow verticale con i link ai siti delle immagini, ora devo aggiungere altre immagini, sono riuscita, ma non riesco a linkarle ai siti.......come si fa???? GRAZIE

    RispondiElimina
  25. @Cannella
    Si usa in linea di massima questa sintassi

    <a href="Indirizzo del post"><img src="Indirizzo della immagine" alt="Nome Immagine"></a>

    Puoi aggiungere i collegamenti alle immagini nello slideshow.

    RispondiElimina
  26. Ciao Ernesto,

    più o meno da una settimana ho cambiato il dominio del blog ed il widget mi si è sminchiato (ovvero non viene mostrato più nulla a parte una "f" in fondo a sinistra). da cosa piò dipenndere? devo modificare il feed?


    Grazie

    Pier

    RispondiElimina
  27. @Jago ..
    Se hai letto gli articoli che ho dedicato al cambio di dominio avrai letto che alcuni widget smettono di funzionare. Qualche volta si può risolvere semplicemente aspettando, altre volte reinstallando il widget. Con i domini personalizzati funzionano peggio gli script caricati su Google Sites. Prova quindi a caricare i file
    https://sites.google.com/site/scriptperilblog/widget-1/mootools.svn.js
    https://sites.google.com/site/scriptperilblog/widget-1/horizontal-widget.js
    https://sites.google.com/site/scriptperilblog/widget-1/newsticker.js
    su DropBox.
    Non è però detto al 100% che ricominci a funzionare.

    RispondiElimina
  28. Ho provato ad inserirlo e funziona bene con google chrome e mozzilla, mentre, con internet eplorer, non si visualizza. Consigli?

    RispondiElimina
  29. @Federica
    Prova a caricare su DropBox tutti i javascript, cioè
    https://sites.google.com/site/scriptperilblog/widget-1/mootools.svn.js
    https://sites.google.com/site/scriptperilblog/widget-1/horizontal-widget.js
    https://sites.google.com/site/scriptperilblog/widget-1/newsticker.js
    quindi sostituisci gli URL nel codice

    RispondiElimina
  30. Fatto, grazie. Così si visualizza, ma rimane fermo senza scorrere...

    RispondiElimina
  31. @Federica
    Benvenuta tra i frustrati di IE! Lo sai le volte che mi è capitato di avere widget che funzionano con tutti i browser ma non con IE ...

    RispondiElimina
  32. Lo so, lo so...a dire la verità io uso google chrome e mi auguro che sempre più persone facciano come me. Ma resta il fatto che la maggior parte dei visitatori del mio blog usa i.e..Provo a spostare qualche parametro, chissà che il miracolo avvenga...

    RispondiElimina
  33. le mie domande sono :come come si po rallentare lo scorrimento e di aumentare numero di posti visualizzati cosa si deve modificare ?

    RispondiElimina
  34. @colorbis ...
    Per aumentare il numero dei post bisogna modificare le righe
    numposts = 6 e
    startfrom = 7;
    però bisogna ricalibrare la larghezza del widget e eventualmente la dimensione delle miniature.
    Per la velocità non ci sono comandi

    RispondiElimina
  35. ciao a tutti,
    per caso c'è un widgwt orizzontale per mostrare i posto più letti(invece che gli ultimi post), tipo quello che propone blogger? (solo che quello di blogger funziona solo in verticale)...

    RispondiElimina
    Risposte
    1. @Pennywise
      Se mi capita ci faccio un post

      Elimina
  36. Ciao ernesto ,
    solo oggi ho scoperto questo tuo utilissimo widget ....ho modificato nei punti da te menzionati,l'ho messo in un gadget HTML del mio blog ...fin qui tutto ok ....unico mistero è: posizionandolo in basso (vedi mio blog) funziona,cioè scorre, al contrario posizionandolo in alto non si muove :(
    perchè?

    grazie in anticipo!!

    RispondiElimina
    Risposte
    1. @ Pixia61
      Il posizionamento subito sotto l'header è molto problematico perché i widget sono soggetti agli stessi CSS dei menù delle pagine statiche per esempio, Prova a posizionarlo subito sopra l'area del post.

      Elimina
    2. Mille grazie Ernesto , ci proverò!!

      Baciotti by Pixia!! :)

      Elimina
  37. Ciao Ernesto

    Volevo chiederti se è possibile inserire questo widget orizzontale con i post di una categoria anzichè gli ultimi post.

    Grazie

    saluti

    RispondiElimina
    Risposte
    1. @GiuseppeBerardi
      No, questo widget sfrutta il file in formato Atom XML e non i feed quindi è problematico fare quello che dici

      Elimina
    2. Capisco.... io volevo inserire un widget simile per una determinata categoria. Per caso sai dove posso trovare qualcosa di simile?

      Grazie per la risposta

      Saluti

      Elimina
    3. @GiuseppeBerardi
      Prova questo
      http://www.ideepercomputeredinternet.com/2011/08/widget-di-uno-slideshow-orizzontale-con.html

      Elimina
  38. Ciao Parsifal. :)

    Noto che il widget presentato e che ho inserito da me già da molto tempo, in questi giorni funziona solo in Firefox, mentre in Chrome e IE no. Da cosa può dipendere?

    Grazie mille. :D

    LeNny (@SfrenzyChannel)

    RispondiElimina
    Risposte
    1. @# In questi ultimi giorni ho ricevuto molti commenti come il tuo. Forse sta cambiando qualcosa nel codice di Blogger. Prova a rendere compatibile il tuo sito con IE e Chrome se non lo hai già fatto
      http://www.ideepercomputeredinternet.com/2012/10/cross-browser-internet-explorer-ie9-blogger.html

      Elimina
    2. Grazie, già fatto. :)
      Quando hai tempo dai un'occhiata al codice.

      Ciao. :)

      Elimina
    3. @Parsifal:

      È più di un'ora che sto provando a modificare il codice per la compatibilità ma non cambia nulla... Il widget funziona a dovere solo su Firefox, su tutti gli altri browser no.

      Hai altre idee dove poter smanettare sul codice? Grazie. :)

      Ciao.

      Elimina
    4. @# Sì. Ho visto che con Chrome non funziona. Sinceramente non ho idea perché abbia smesso di funzionare. Il codice mi era stato segnalato e quindi non conosco neppure il modo per poterlo riarrangiare

      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.