1 aprile 2011 Ultimo aggiornamento:

Nivo Slider per Slideshow di immagini con descrizione e link.

Effetto Nivo Slider da installare su Blogger.
L'effetto Nivo Slider è stato presentato da Iole in un post forse un po' troppo criptico. Ho deciso di ripresentarlo in modo più analitico in modo che possa essere utilizzato anche da coloro che non sono particolarmente pratici di codici e di linguaggi di programmazione. Si tratta di una galleria di immagini che si susseguono con vari effetti di transizione. Si possono inserire dei collegamenti alle immagini, visualizzare delle descrizioni e inserire anche dei link in un anchor text della stessa descrizione. Ho messo in rete un esempio di come potrebbe essere questo slideshow

         Demo dell'effetto Nivo Slider per slideshow di immagini -

Le dimensioni delle immagini devono essere tutte uguali ma possono essere personalizzate a piacere modificando il file CSS di cui dirò in seguito.

effetto nivo slider
Nella parte bassa ci sono anche i pulsanti per navigare all'interno delle foto e, se si passa sopra con il mouse, appaiono le frecce per spostarsi alle immagini adiacenti. Per l'installazione di questo effetto bisogna andare su Design > Modifica HTML e salvare il modello completo. Cercare la riga </head> e, immediatamente sopra, incollare il seguente codice

<!-- Nivo Slider Inizio -->
<link href='https://sites.google.com/site/scriptperilblog/slideshow/nivo-slider.css' media='screen' rel='stylesheet' type='text/css'/>
<link href='https://sites.google.com/site/scriptperilblog/slideshow/style.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='https://sites.google.com/site/scriptperilblog/slideshow/jquery-1.4.3.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/scriptperilblog/slideshow/jquery.nivo.slider.pack.js' type='text/javascript'/>
<!-- Nivo Slider Fine - www.ideepercomputeredinternet.com -->
Adesso va cercata la riga </body> e, immediatamente sopra, va incollato quest'altro codice
<!-- Nivo Slider Chiamata Inizio-->
<script type='text/javascript'>
$(window).load(function() {
    $(&#39;#slider&#39;).nivoSlider();
});
</script>
<noscript><a href='http://goo.gl/i3lI5' target='_blank'><span style='font-size: x-small;'>Nivo Slider</span></a></noscript>
<!-- Nivo Slider Chiamata Fine -->

Salvate il modello. E' giunto il momento di creare lo slideshow vero e proprio. Prima di iniziare devono essere già state preparate le immagini della stessa misura che devono anche essere state caricate su Picasa o hosting analogo. Per ridimensionarle può essere usato l'ottimo tool online Pixlr. Il codice da postare in un elemento HTML o in una pagina statica sarà simile a quello che ho pubblicato su Google Documenti
Personalizzazioni e osservazioni
La riga iniziale e quella finale, evidenziate di rosso, servono solo per centrare lo slideshow nell'elemento pagina e possono essere eliminate se non c'è questa esigenza. Con il CSS che è stato caricato, le immagini debbono avere le dimensioni di 618x246 pixel. Sono forse un po' larghe per alcuni layout. Se si vogliono inserire immagini di altre dimensioni, si deve scaricare il file evidenziato di rosso nel primo codice. Detto file è stato anche caricato su DropBox e può essere scaricato da qui.  Va modificata questa parte del codice

#slider {
    position:relative;
    width:618px;
    height:246px;
    margin-left:190px;
    background:url(https://lh6.googleusercontent.com/_nT13UtBmmiU/TZV9FRtL91I/AAAAAAAASp8/WvnO9BfM23g/loading.gif) no-repeat 50% 50%;
}


in relazione alle dimensioni delle immagini. Possono anche essere fatte tutte le modifiche che si ritiene opportune per esempio riguardo alle icone di navigazione o in relazione a altri parametri. Il codice dello slideshow inizia con il tag <div id="slider"> e finisce con il tag </div>, entrambi evidenziati di blu. Le immagini dello slideshow possono essere inserite con queste differenti modalità:

Immagine senza descrizione e senza link
<img src="URL_IMMAGINE" alt="NOME_IMMAGINE" />
Immagine con descrizione senza link
<img src="URL_IMMAGINE" alt="NOME_IMMAGINE" title="DESCRIZIONE VISUALIZZATA IN BASSO" />
Immagine con link a una pagina
<a href="URL_COLLEGAMENTO"><img src="URL_IMMAGINE" alt="NOME_IMMAGINE" /></a> 
Immagine con link e descrizione
<a href="URL_COLLEGAMENTO"><img src="URL_IMMAGINE" alt="NOME_IMMAGINE" title="DESCRIZIONE"/></a>
Immagine e descrizione con link interno
<img src="URL_IMMAGINE" alt="NOME_IMMAGINE" title="#descrizioneX" /> 
Dopo aver inserito tutte le immagini deve essere inserito quest'altro codice
 <div id="descrizioneX" class="nivo-html-caption">
 
Descrizione dell'immagine X
</div>
  

Al posto di Descrizione dell'immagine X può essere inserito un codice HTML con grassetto (tag strong), corsivo (tag em) e anche link (tag a href=…)  a una data pagina. Ogni immagine così inserita dovrà avere la sua corrispondente descrizione numerata. Per una ulteriore personalizzazione di questo slideshow per quello che riguarda gli effetti di transizione, l'opacità, la velocità e altre opzioni vi rimando alle istruzioni di Nivo Slider
Aggiornamento: Consultate anche il post su Ulteriori personalizzazioni di Nivo Slider -




66 commenti :

  1. tu dici che con questo effetto il blog si aprirebbe più velocemente? Però quanto mi dispiacerebbe rinunciare a piecemaker :(

    RispondiElimina
  2. @Soffio di Dea
    E' certamente più veloce di Piecemaker però è meno suggestivo. Sono scelte personali.

    RispondiElimina
  3. Sì hai ragione... magari potrei metterlo nella pagina statica dove ho le anteprime di nail art... però ci credi? Dopo la fatica fatta non ce la faccio a riprendere l'html e modificarlo ancora -.-'

    RispondiElimina
  4. Ci credo. Io ho sempre lo stesso modello da tre anni :D

    RispondiElimina
  5. @Ernesto T. ciao ernesto
    volevo sapere come mai una volta che faccio tutto bene
    ed tutto funziona ,, l'unica cosa che dopo che salvo non riesco modificare il sfondo della pagina
    che diventa bianco con dei cuadrati in automatico e dopo di che non si puo modificare anche andando nel desinger modelli?? grazie in anticipo eco lo sfondo come diventa altretanto anche le scritte dei gadget e le descrizioni del posthttp://megavideomegaupload.blogspot.com/

    RispondiElimina
  6. Ciao, a me non funziona, continuano a comparirmi le immagini una sotto l'alta

    RispondiElimina
  7. @Paolo Lorenzi
    Può dipendere dal fatto che nel tuo modello sia già presente del javascript che vada a interferire con quello di questo slideshow

    RispondiElimina
  8. Risolto, ho fatto pulizia ma ho dovuto spostare i js sul mio dropbox. Grazie mille!

    RispondiElimina
  9. @Ernesto T.ciao ernesto stavo aspeta anche io una risposta se riesci tene sarei grato ;-) grazie mille

    RispondiElimina
  10. @denny Non ti avevo risposto perché purtroppo non è che sia in grado di spiegare tutto.. magari! Il comportamento che hai descritto non me lo spiego. C'è probabilmente una interferenza con altri script ma in questi casi bisogna fare dei test per vedere qual'è, se si riesce a trovarlo, e sperare in bene :D

    RispondiElimina
  11. @Ernesto T. grazie ernesto
    kmq ci ho tentato anche in altri 2 blog
    di quali uno nuovo e senza post e senza modifiche
    ma purtroppo il risultato e lo stesso!
    non si può cambiare lo sfondo ;-(((
    ma andando nello sito del http://nivo.dev7studios.com/#usage
    come si vede anche li il sfondo e tale,,, kmq grzie mille ernesto

    RispondiElimina
  12. @Ernesto T. Ciao ernesto
    analizando il codice css. su dropbox
    ho trovato il link https://lh6.googleusercontent.com/_nT13UtBmmiU/TZV82BwYiYI/AAAAAAAASpw/TG4clF7EWaM/background.png
    questo e il colore dello sfondo
    ora penso che basta cambiarlo ed il problema dovrà essere risolto.
    appena ci provo ti scrivo :-)

    RispondiElimina
  13. @denny
    Credo tu possa anche semplicemente toglierlo se non ti piace

    RispondiElimina
  14. @Ernesto T. ciao ernesto
    buona pasqua,,
    volevo chiederti se possibile modificare qualcosa nel codice caricato su dropbox per centrare il widget
    e se si può quale parte si deve modificare! io riesco a centrarlo su chrome, ma non su firefox e su explorer che sta spostato verso destra una volta che metto il codice div"center" togliendo questo codice va spostato più verso sinistra ma non al centro. grazie in anticipo

    RispondiElimina
  15. Perchè se lo inserisco con il dominio personalizzato non funziona, mentre se lo faccio con l'host gratuito di blogger funziona?

    RispondiElimina
  16. @Giampy guarda io lo messo su google sites e funziona

    RispondiElimina
  17. ciao ernesto il codice e da aggiornare x,che oltre che non puo essere centrato su i 3 borswer
    ma per di più non funziona con explorer 9
    guarda il mio da qualsiasi borswer
    con il codice nuovo
    http://mondotorrent.blogspot.com/
    saluti denn

    RispondiElimina
  18. @denny Il problema dei widget che non funzionano con IE è una cosa arcinota e non è che si possa far molto. Dipende anche dai blog e dagli altri script presenti nel modello.

    @Giampy
    Se si passa a dominio personalizzato, i file CSS e JS caricati su Google possono smettere di funzionare. La scelta è probabilmente di Google che non vuol diventare un deposito per file caricati su domini altrui.
    Si può risolvere caricando i 4 script su DropBox e acquisendone gli URL. Io non lo posso fare perché altrimenti avrei la banda sovraccarica. Se non sai cosa sia DropBox leggi qua
    http://www.ideepercomputeredinternet.com/2010/11/dropbox-per-condividere-file-con-piu.html

    RispondiElimina
  19. @Ernesto T. grazie mille per l'info, l'unico mio problema ora è che non sono particolarmente ferrato. Se potessi spiegarmi velocemente come attuare questo procedimento mi faresti un grandissimo favore. Quali sono i 4 script e come acquisisco gli URL?

    RispondiElimina
  20. @Giampy
    Gli script e i CSS sono questi
    https://sites.google.com/site/scriptperilblog/slideshow/nivo-slider.css
    https://sites.google.com/site/scriptperilblog/slideshow/style.css
    https://sites.google.com/site/scriptperilblog/slideshow/jquery-1.4.3.min.js
    https://sites.google.com/site/scriptperilblog/slideshow/jquery.nivo.slider.pack.js
    Li puoi caricare su Google Sites e acquisirne l'URL con questo procedimento
    http://www.ideepercomputeredinternet.com/2010/05/come-caricare-file-javascript-e-css-su.html
    Ciao

    RispondiElimina
  21. @Ernesto T. grazie mille ernesto ho seguito le tue indicazioni e tutto sembra funzionare, l'unico inconveniente è che quando effettuo il logout da google e accedo al blog come un qualsiasi utente tutte le mie modifiche si annullano e compaiono nuovamente le immagini una sotto l'altra. non so più come fare, questo slider mi sta facendo impazzire.

    RispondiElimina
  22. Ok ho risolto, era un problema di google, caricando gli script su dropbox sembra funzionare tutto bene.

    Avrei solo un ultima domanda, è possibile visualizzare lo slider solo sulla home del blog e non su tutte le pagine?

    RispondiElimina
  23. @Giampy Devi usare i tag condizionali. Procedi in questo modo. Dai un nome al widget HTML/Javascript per poterlo trovare facilmente. Poi vai su Design > Modifica HTML e espandi i modelli widget. Clicchi su F3 e inserisci il nome del widget. Dovrai inserire questa riga
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    dopo la riga
    <b:includable id='main'>
    e quest'altra riga
    </b:if>
    prima di
    </b:includable>
    Per ulteriori informazioni, leggi questo post
    http://www.ideepercomputeredinternet.com/2010/11/come-mostrare-o-non-mostrare-widget-in.html

    RispondiElimina
  24. ernesto quando metto i tuoi codici sopra head e body, mi cambia automaticamente il font del blog e il colore di metà sfondo!!!
    come faccio??
    e poi cosa serve scaricare il CSS e come si può modificare e inserire correttamente nel blog?

    RispondiElimina
  25. @Corvo Michele
    C'è un conflitto tra questi jacascript JQuery e quelli già presenti nel tuo modello. I CSS si possono modificare con Notepad++
    http://www.ideepercomputeredinternet.com/2009/12/notepad-per-modificare-modelli.html
    e caricare su Google Sites
    http://www.ideepercomputeredinternet.com/2009/11/google-sites-aggiunge-nuovi-modelli-per.html
    o DropBox
    http://www.ideepercomputeredinternet.com/2010/11/dropbox-per-condividere-file-con-piu.html

    RispondiElimina
  26. Ciao Ernesto,
    dimmi se puoi aiutarmi. Ho un paio di problemi con Nivo Slider, il primo riguarda la velocità delle slide, provo ad applicare il css ma sembra che non rallentino, potresti spiegarmi come fare?
    E il secondo, forse più importante, è che ho spostato più in alto le sfere che segnano lo scorrere delle pagine, solo che ho dimenticato come ho fatto e ora non riesco più ad abbassarle, stanno proprio sulla descrizione delle slide.

    ti lascio il link del blog così vedi da te il problema.

    www.molotovcoketail.com

    aspetto una tua risposta
    grazie e a presto

    RispondiElimina
  27. @Giampy
    Per la velocità, nel codice a fondo pagina, dopo queste linee
    $(window).load(function() { $('#slider').nivoSlider(); va inserita quest'altra
    animSpeed:500, // Slide transition speed
    in cui 500 è la velocità e può essere modificata. Puoi modificare anche gli altri parametri consultando questa pagina
    http://nivo.dev7studios.com/#usage
    Se non ti ricordi tu come hai fatto, come puoi pensare che lo sappia io? Ricarica il CSS originale :)
    Comunque probabilmente hai modificato dei valori in questi due blocchi
    .nivo-controlNav {
    position:absolute;
    left:260px;
    bottom:-42px;
    }
    .nivo-controlNav a {
    display:block;
    width:22px;
    height:22px;
    background:url(https://lh3.googleusercontent.com/_nT13UtBmmiU/TZV86u-zWvI/AAAAAAAASp0/rVTUZN9kZ-s/bullets.png) no-repeat;
    text-indent:-9999px;
    border:0;
    margin-right:3px;
    float:left;
    Forse
    bottom:-42px;
    Ciao

    RispondiElimina
  28. Ok grazie Ernesto. Ma il codice per la velocità va applicato direttamente nel modifica html giusto?
    E giusto un'altra cosa, poi non ti scoccio più. vorrei spostare di poco sulla destra lo slider, come faccio?

    RispondiElimina
  29. @Giampy
    Sì va inserito il parametro nell'HTML. Guarda anche il nuovo post che ho linkato nell'aggiornamento. Per spostare lo slideshow a sinistra. Devi aprire il file CSS come detto nel post. Cerchi la parte in cui c'è il blocco di codice

    #slider {

    sotto troverai la riga

    margin-left:190px;

    basterà diminuire il valore del margine a sinistra. Poi dovrai ricaricare il file su DropBox.

    RispondiElimina
  30. grazie Ernesto sei stato gentilissimo. :)

    RispondiElimina
  31. Senza che mi picchi Ernesto misà che devo abbusare un'ulteriore volta dei tuoi consigli. Tutti i link del mio blog sono sotolineati da dei puntini, e mi sono accorto che levando la prima stringa di nivo slider dall'html, quella che va all'inizio del codice html, immediatamente sompra il tag head, i puntini scompaiono.

    Come posso fare a non rinuciare allo slider e nascondere le sottolineature?

    www.molotovcoketail.com

    RispondiElimina
  32. e perdonami anche per aver scritto abusare con due b.

    RispondiElimina
  33. Bellissimo il post, e bellissimo questo slider!!!
    ... è possibile non far visualizzare le frecce di navigazione delle immagini?
    Ciao
    CSJ

    RispondiElimina
  34. @Giampi
    E' una cosa un po' strana. Però prova a scaricare questo file
    https://sites.google.com/site/scriptperilblog/slideshow/style.css
    Aprilo con NOtepad++
    http://www.ideepercomputeredinternet.com/2009/12/notepad-per-modificare-modelli.html
    trova questa riga
    border-bottom:1px dotted #826a4d;
    e eliminala semplicemente. Salva il file e caricalo su Google Sites o DropBox acquisendone il link da sostituire nel codice. Ecco le istruzioni
    http://www.ideepercomputeredinternet.com/2009/06/come-caricare-gli-script-su-google.html
    http://www.ideepercomputeredinternet.com/2010/11/dropbox-per-condividere-file-con-piu.html

    @csj
    Segui le istruzioni che ho appena dato a Giampi. La modifica che devi fare riguarda l'eliminazione di questa riga
    background:url(https://lh3.googleusercontent.com/_nT13UtBmmiU/TZV8vcqsLYI/AAAAAAAASps/BnVugl06Nx0/arrows.png) no-repeat;
    o, meglio ancora, prova a mettere
    display:none; al posto o prima di
    display:block;
    sotto il codice
    .nivo-directionNav a {

    RispondiElimina
  35. Ce l'ho fatta. Grazie Ernesto.

    RispondiElimina
  36. scusa ernesto ma io non riesco a togliere lo sfondo a quadrettini; o meglio l'ho tolto ma ora è bianco come posso risolvere?
    ho provato a cancellare la riga nel file css, ho provato anche a mettere background: none ma niente da fare sempre bianco
    per favore rispondi presto ciao

    RispondiElimina
  37. Ma come fai a dar retta a tutti con tutta questa pazienza !
    Domanda: quale codice serve per gestire non le foto ma gli ultimi post con Nivo slider in oriszzontale, e per intenderci nello stile
    come nell'articolo preso da: http://www.weblifeonline.net/2011/01/widget-ultimi-articoli-animati-per-blog.html

    RispondiElimina
  38. ...e dimenticavo per intenderci d+ come anche ho realizzato (però in verticale) nel blog: http://bastaprecaricomunemazara.blogspot.com/

    ciao!

    RispondiElimina
  39. @Daniele M.
    La personalizzazione del codice del widget che mi hai indicato si trova qui
    http://www.abu-farhan.com/2009/07/recent-posts-for-blogger-with-thumbnail-and-simple-spy/
    Per gli Ultimi post con Effetto Nivo Slider in orizzontale

    Le foto con Nivo Slider le puoi gestire così
    http://www.ideepercomputeredinternet.com/2011/04/slideshow-di-immagini-con-descrizione-e.html
    Gli Ultimi post con Nivo Slider è un widget che non ho ancora pubblicato perché dà problemi con IE. Se sei interessato puoi andare qui
    http://www.abu-farhan.com/2011/07/automatic-content-slider-for-blogger-using-nivo-slider-part-1/
    o qui
    http://www.abu-farhan.com/2011/07/automatic-content-slider-for-blogger-using-nivo-slider-part-2/

    RispondiElimina
  40. Salve ernesto, io dopo aver inserito i codici html ho un problema con il testo. In pratica ora c'è una sorta di effetto ombra bianca dietro il testo. (www.fontanellemolisane.blogspot.com)
    come posso aver il testo formattato normalmente?
    grazie

    RispondiElimina
  41. @fontanelle molisane
    Francamente a me sembra un bel lavoro. Non mi sembra che si sia da mettere mano a niente.

    RispondiElimina
  42. Aggiungo che io uso Chrome e con questo browser è perfetto. Con altri browser non ho testato.

    RispondiElimina
  43. Salve signor Ernesto
    le scrivo nuovamente perchè ho 2 problemi ( http://ritmonuevoitaly.blogspot.com/ ) :

    1 . con Google Chrome non c'è continuità tra lo scorrere delle immagini, sono tutte intervallate da un frame bianco di breve durata

    2. ho provato ad agire modificando il file style.css ma non riesco a spostare ne ad eliminare il colore che segue Nivo Slider sullo sfondo ( problema già riscontrato da altri nei commenti )

    La ringrazio per la sua pazienza e disponibilità

    RispondiElimina
    Risposte
    1. @Ritmo Nuevo
      Mi poni un quesito che è al di sopra delle mie modeste capacità, prova a rivolgerti all'autore dell'effetto (ammesso che abbia tempo e voglia di rispondere). Quando si ha a che fare con un modello personalizzato bisogna mettere in conto che altre personalizzazioni sono sempre complicate.

      Elimina
  44. Grazie mille =)
    se riesco a venirne a capo non esiterò a condividere qui sui commenti

    RispondiElimina
  45. è con grande piacere che la informo di aver risolto il problema.

    ricapitolando dopo aver caricato delle immagini su DropBox il problema che mi si presenta è il seguente

    SOLO con Chrome vedo dei flash bianchi tra il passaggio da un'immagine all'altra

    le ho provate di tutti i colori... alla fine è bastato caricare le immagini da un'altra parte ( sul sito di blogger ) per far funzionare tutto alla perfezione

    personalmente SCONSIGLIEREI di caricare immagini per Nivo Slider su DropBox

    Spero possa essere utile a qualcunaltro.

    Piero

    RispondiElimina
  46. ciao Ernesto, ho provato ad inserire questo stupendo gadget in un post ma non funziona. che tu sappia c'è un modo per farlo funzionare nel post o va solo nelle pagine statiche e/o elementi html? grazie!

    RispondiElimina
    Risposte
    1. @sarab+-+-
      In linea generale alcuni widget funzionano anche nei post mentre altri invece no. Oltre che provare si può fare ben poco.

      Elimina
    2. ok, peccato! grazie mille per la pronta risposta :)

      Elimina
  47. Ciao Ernesto nel demo la immagine è più piccola della descrizione viene così con questo codice o viene della misura uguale?
    grazie

    RispondiElimina
  48. Scusami tanto se ti rompo ma ho un dilemma...! ho installato una modello con uno slider mi piace molto ma non sono riuscita a mettere i collegamenti a post. il template che ho scielto è questo http://btemplates.com/2012/blogger-template-organicblog/
    Mi piacerebbe tenermi questo slider però ci sono state delle incompatibilità con altri slider per post recenti e poi non so come mettere i collecamenti a post, pensi che sia possibile aggiungere il collegamento con questo slider? o provo a mettere questo? e che ho paura di fare danni mi sembra un pò complicato per me questa procedura e ho già aggiunto le foto in questo slider. il blog che sto cercando di fare è questo qua http://himecosmetics.blogspot.com non è che potresti dare dei consigli? grazie mille
    Kiki

    RispondiElimina
    Risposte
    1. @HimeKiki
      A dir la verità quando ho pubblicato la Demo lo slideshow era perfetto: Adesso non si vede bene l'ultima parte della immagine che doveva contenere anche la freccia direzionale che invece non si vede. Forse ho messo troppe Demo in quel blog che si danno noia tra loro. Per vedere se funziona in un template bisogna testare, non c'è altro sistema.
      Quando si decide di scaricare un modello da internet, meno modifiche si fanno è meglio è perché in genere non funzionano, quindi ti consiglio di lasciare quello che hai.

      Elimina
  49. Grazie della rapida risposta Ernesto. Mi terro questo qua. Ti sembra che si possa mettere il collegamento ad un post con questo tipo slider?

    RispondiElimina
    Risposte
    1. @HimeKiki
      Certo. Vai nel modello e cerca il codice con class='fp-slides-items' e
      class='fp-thumbnail'
      Vedrai del codice con
      href='#'
      Al posto del cancelletto inserisci l'URL del post che vuoi collegare. Tra il segno di maggiore e minore inserisci il suo titolo. Es: L'odore e colore sono l'intelligenza del fiori

      Elimina
  50. di nuovo io. scusa il disturbo :-) ultimamente ho provato questo gadget in un blog di prova, e funzionava perfettamente. quando poi però sono andata a copiarlo nel blog ufficiale (importando l'intero template) non funzionava più. secondo te quale potrebbe essere il problema? importando l'intero template non dovrebbero "migrare" tutte le sue caratteristiche? ho pensato ad un qualche bug, ma non so se ci sono strumenti per trovare i bug nel blog. ho cercato nei webmaster tools di blogger e nel forum ma niente :(

    RispondiElimina
    Risposte
    1. @ sara b
      Scommetto che usi un dominio personalizzato? In questo caso gli script e i CSS caricati su Google Sites non funzionano, lo fanno solo nei blog gratuiti come è quello tuo di prova. Devi quindi scaricare i file js e CSS

      https://sites.google.com/site/scriptperilblog/slideshow/nivo-slider.css
      https://sites.google.com/site/scriptperilblog/slideshow/style.css
      https://sites.google.com/site/scriptperilblog/slideshow/jquery.nivo.slider.pack.js

      e caricarli su Dropbox, su Google Code o su un tuo hosting di proprietà. Lo script JQuery

      https://sites.google.com/site/scriptperilblog/slideshow/jquery-1.4.3.min.js

      puoi invece sostituirlo con questo

      https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

      che è anche aggiornato all'ultima versione

      Elimina
    2. sei il mio nuovo idolo. sappilo :) grazieeeee

      Elimina
    3. @ sara b
      Allora vuol dire che ti funziona immagino :)

      Elimina
  51. Ho provato tutti gli slideshow da te segnalati, purtroppo non me funziona uno anche se non ho altri widget con jquery. Ho provato ha modificarli, caricare i file js su dropbox ma niente da fare. Il mio preferito è Nivo ma non sono riuscito a farlo funzionare. Ho cercato altre versioni di Nivo su siti stranieri e mi sono imbattuto su questo link: http://www.lordhtml.com/2012/10/jquery-image-nivo-slider-for-blogger.html. La cosa strana è va installato semplicemente con Add Gadget>>HTML/Javascript, funzionerebbe bene se non mi crea uno strano effetto che a sinistra del widget crea una fascia colorata molto lunga oltre il widget stesso. Sai mica se è utilizzabile e corregibile?

    RispondiElimina
  52. Già ho poco tempo per occuparmi dei miei widget che non posso pensare anche a quelli pubblicati da altri :D
    Si tratta sempre comunque di personalizzazioni che presentano moltissimi problemi di compatibilità con i vari modelli. L'inestetismo che hai notato potrebbe essere uno di quelli R @

    RispondiElimina
  53. Funziona ma mi viene decentrato.
    Ho provato a togliere div align="center", a cambiare margin-left:190px sui codici CSS, ma non ha fatto una mossa, da dove posso gestire il posizionamento dello slideshow?
    Anche "in verticale" la distanza fra i pallini diapositiva e il primo post sotto è minimo, sta molto brutto, devo assolutamente ampliarlo, come si fa?

    Se volessi aggiungere un slideshow ad un solo articolo posso usare questo tipo di slideshow? Ne posso avere più di uno in uno stesso blog, uno main in cima presente sempre ed altri diversi in dimensioni ed immagini integrati negli articoli?
    Grazie

    RispondiElimina
    Risposte
    1. Hai talmente tante domande che ti rimando al sito dell'autore
      http://dev7studios.com/plugins/nivo-slider
      dove puoi consultare anche la documentazione
      http://docs.dev7studios.com/
      @#

      Elimina
    2. Grazie, ma consultandolo non c'ho capito un tubo XD.
      Non riesco proprro a trovare l'info che indica come riposizionare lo slideshow, sai aiutarmi? Uso blogger
      Grazie

      Elimina
  54. ciao Ernesto io ho provato ma mi compaiono le immagini una sotto l'altra cosa potrebbe essere? non ho conflitti di javascript

    RispondiElimina
  55. ah premetto che io uso dreamweaverCS6

    RispondiElimina
    Risposte
    1. Il post è di 5 anni fa e da allora è probabile che qualcosa sia cambiato. Se usi Dreamweaver è probabile che tu non sia su piattaforma Blogger e quella è un'altra ragione. Un'altra ancora sono i file caricati su Google Sites
      https://sites.google.com/site/scriptperilblog/slideshow/style.css
      https://sites.google.com/site/scriptperilblog/slideshow/jquery.nivo.slider.pack.js
      che funzionano solo su siti nomeblog.blogspot.com
      Se hai tempo potresti provare a scaricarli e a caricarli su un altro hosting. Infone pure la Demo pare che non funzioni più :(
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti al post.