23 marzo 2011

69 commenti Condividi il post Facebook Twitter Google+

Come inserire uno slideshow nel blog

Vi piacerebbe inserire nel vostro blog uno slideshow come questo?
Allora vediamo insieme come fare!

Cosa vi serve

Innanzitutto dovete scaricare lo script Nivo Slider dal sito ufficiale.
Scaricato il file zip, non vi resta che estrarre i file che andranno poi caricati online per essere utilizzati nel blog.

I file da usare nel blog

Per inserire uno slideshow nel blog, caricate online i seguenti file:

  • jquery-1.4.3.min.js
  • jquery.nivo.slider.pack.js
  • nivo-slider.css
  • style.css: questo file va prima modificato secondo le vostre esigenze (colori, dimensioni, immagini, ecc)

Una volta caricati online, andate in Blogger - Design - Modifica HTML e incollate dopo la riga <head> il seguente codice:

<link rel="stylesheet" href="url nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="url style.css" type="text/css" media="screen" />
<script type="text/javascript" src="url jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="url jquery.nivo.slider.pack.js"></script>

Come funziona

Lo script è caratterizzato da una grande semplicità d'uso e presenta molteplici opzioni di personalizzazione. Per maggiori informazioni vi rimando alla pagina di utilizzo e quella dei demo.

Resto a disposizione per ogni dubbio o chiarimento.
Copyright © Iole - Non è consentito ripubblicare, anche solo in parte, i post di questo blog senza l'esplicito consenso dell'autrice.

69 commenti

  1. Interessantissimo, il tuo slide è stupendo!!!

    RispondiElimina
  2. Interessante ... che tu sappia si possono inserire le foto personali?
    Queste poi vengono adattate automaticamente alla grandezza della slide o la ingrandisce?
    Grazie

    RispondiElimina
  3. @AbcHobby.it: wow sei sempre la prima a commentare ^_^
    @marissa: nello slideshow puoi inserire qualsiasi foto basta che hanno tutte le stesse dimensioni. Poi, in base alle dimensioni delle foto, devi personalizzare il file style.css

    RispondiElimina
  4. Bellissimo!!!
    Stavo proprio cercando qualcosa del genere da inserire nel mio blog!
    Grazie!!!
    Ciao

    RispondiElimina
  5. ciao Iole, so che la cosa che ti richiedo è moooooooooooooolto impegnativa: secondo me dovresti fare un creatore di widget ( quelli nuovi ) per le letterine, così ognuno si sceglie colore, scrittura, testo, "bollino ", immagini ( forse è un pò troppo... )
    se questo ti richiede più lavoro che realizzare tantissime letterine lascia stare, comunque 6 mitica!
    ps: per favore mi rispondi nel prossimo post che scrivi???? lo sò che pretendo troppo da te, prendi la mia idea come un consiglio, non una cosa da fare subito!!!!
    sei the best!
    ely

    RispondiElimina
  6. @CSJ: questo slideshow è perfetto in un blog di fotografia come il tuo.
    @ely.ghera.99: ti ringrazio per il consiglio. Sinceramente quando ho pubblicato il post dei widget non pensavo che la letterina avesse avuto così tanto successo e che avessi ricevuto tante richieste.
    Ci stavo pensando anch'io a realizzare dei widget personalizzabili ma non è semplice. Ma non mi arrendo facilmente, quindi chissà molto presto vedrai nuovi widget personalizzabili.

    RispondiElimina
  7. come sempre belle idee... brava!!

    RispondiElimina
  8. Scusa ma non ho capito come devo caricare on line quei file.Potresti spiegare meglio, per favore , non ho capito molto bene il procedimento .
    Grazie stsai
    Erika

    RispondiElimina
  9. @Alessandra: grazie!
    @Erika: per funzionare lo slideshow ha bisogno dei due file javascript (js) e dei due fogli di stili (css). Tali file vanno caricati online su un qualsiasi hosting (io utilizzo digiland).
    Una volta caricati online, possiamo aggiungere i link nel nostro blog con il codice presente nel mio post.

    RispondiElimina
  10. Ciao, i tuoi lavori sono semplicemente meravigliosi!
    Ieri ho aggiunto la tua carinissima letterina nel mio blog, sono molto contenta!
    E ti ringrazio di cuore per essere passata a trovarmi :)
    Ti auguro un buon week end pieno di creatività.
    Un abbraccio e a presto.

    RispondiElimina
  11. Bello Iole cara ma come al solito, sarò limitata non ho capito un accidente.
    A parte il teorico di scarica file ecc.ecc. ma poi preparare quello che hai messo tu....pasqua, calendaria, benvenuta primavera...ecc. sono già predisposte nel tuo codice????
    Abbia pazienza mia cara e grazie sei fortissima e...dove lo trovi il tempo????
    Un abbraccio

    Edvige

    RispondiElimina
  12. Ciao Iole, ti volevo solo dire che ti ho linkato nel post "ringraziamenti" ciao ale

    RispondiElimina
  13. @Edvige: ti posso assicurare che è più facile a farsi che a dirsi.
    Come al solito, se vuoi che te ne realizzi uno personalizzato (con i tuoi post più popolari o con i tuoi post preferiti o con i tuoi blog amici) basta chiedere.
    Il mio slideshow l'ho realizzato creando le immagini per ognuno dei post più popolari pubblicati di recente e personalizzando poi il file style.css
    @Alessandra: sono io che devo dire grazie a te!

    RispondiElimina
  14. Ciao Iole! Come al solito sei sempre unica e originale nel tuo genere!!! Ho letto cosa devo fare,ma non so dove posso cambiare le immagini! Inoltre,come fai a mettere il link alle foto,e quando ci clicchi sopra ti portano al link inserito??? Grazie mille per questo widget!!! =)

    RispondiElimina
  15. Fantastica Iole....sempre unica nel suo genere!!! =) Ho letto come si dovrebbe procedere,ma da dove posso scegliere le immagini??? Inoltre come faccio ad allegare ad un immagine un link,in modo tale che quando ci si clicca sopra,si raggiunge il link prima indicato???
    Grazie mille per lo splendido widget!!! Sei grande =) !!!

    RispondiElimina
  16. @Simone: trovi tutte le istruzioni dettagliate sulla pagina di utilizzo dello slideshow.

    Ti riassumo comunque cosa bisogna fare:
    - creare le immagini e caricarle online
    - personalizzare il foglio di stile style.css
    - creare lo slideshow con il seguente codice:
    <div id="slider">
    <a href="indirizzo pagina 1"><img src="indirizzo immagine 1" alt="" /></a>
    <a href="indirizzo pagina 2"><img src="indirizzo immagine 2" alt="" /></a>
    <a href="indirizzo pagina 3"><img src="indirizzo immagine 3" alt="" /></a>
    ...
    </div>

    Sulla pagina di utilizzo dello slideshow trovi altre opzioni per personalizzare lo slideshow (ad esempio come impostare gli effetti, le descrizioni delle immagini, ecc).

    RispondiElimina
  17. Ciao Iole,io non ho molta esperienza con queste cose xD ma per caricare quei file online come faccio?

    Grazie dell'aiuto :)

    RispondiElimina
  18. @Valeria: puoi caricare i file su digiland o su qualche altro servizio di hosting.

    RispondiElimina
  19. Ehm, ma come faccio?
    Scusami se ti infastidisco.

    RispondiElimina
  20. @Valeria: non so come aiutarti. Digiland è molto semplice ed intuitivo, quali problemi hai?
    Inoltre sulla pagina di utilizzo dello slideshow trovi tutti i dettagli per realizzare lo slideshow.

    RispondiElimina
  21. ciauu, mi sento un po' imbranata perchè non ho capito nadaaaa.
    come si fa??? xD

    RispondiElimina
  22. @missfeliciti99 e tutti: sulla pagina di utilizzo dello slideshow è spiegato tutto in modo chiaro e semplice che ho pensato non servisse una spiegazione dettagliata.
    Viste le numerose richieste, in futuro pubblicherò un post con tutte le istruzioni per realizzare il proprio slideshow.
    Al momento ho diverse richieste in sospeso, quindi dovrete attendere.

    RispondiElimina
  23. ciao volevo mettere lo slideshow nel blog ma non ho capito come caricare i file on line...quale programma devo usare? mi puoi spiegare meglio grazie ale

    RispondiElimina
  24. @Alessandra: come ho già detto in precedenza in futuro pubblicherò un post con una spiegazione dettagliata visto che in tanti non avete capito come fare. Eppure è semplicissimo e la spiegazione sulla pagina di utilizzo è molto chiara.

    @tutti/e: Al momento ho diverse richieste d'aiuto che aspettano una risposta, alcune delle quali da parte di lettori che sono stati generosi con me con donazioni e regali. Purtroppo il tempo a disposizione per aiutare tutti è davvero poco perché sono molto impegnata a lavoro. Vi chiedo di avere pazienza.

    RispondiElimina
  25. Ciao Iole ,con sincera ammirazione i più
    entusiastici complimenti per il
    tuo bellissimo lavoro,6 UNICA !
    Una stretta di mano, una pacca sulla spalla, un sorriso smagliante e poche ma sincere parole per dirti: Complimenti !!!
    Ti ho messa nel mio blog (LINK)http://www.merylu.fan-club.it/Baci e BUONA DOMENICA DELLE PALME !

    RispondiElimina
  26. @Merily: grazie per avermi linkata. Ho aggiunto il tuo link nell'elenco dei blog che mi linkano e nella sidebar.

    RispondiElimina
  27. scusami sono un' imbranata nn so cm fare non è che me lo spieghi???
    vorrei mettere le letterine e il calendario sul mio blog ma non ci riesco!!! dimmi in poche parole come devo fare!!!

    RispondiElimina
  28. @MISSMISSNOME: inserire uno slideshow come il mio nel proprio blog non è complicato, basta seguire le semplici istruzioni riportate nel sito ufficiale.
    Per le letterine, il calendario e qualsiasi altro mio widget basta copiare il codice che compare sotto ciascun widget ed incollarlo in un gadget di tipo html/javascript della sidebar.
    Spero di essere stata chiara. Se hai difficoltà ad aggiungere al tuo blog qualcuno dei miei widget, lascia un commento nel post dal quale stai prelevando il codice così posso essere più precisa ed aiutarti a risolvere il "problema".

    RispondiElimina
  29. Ciao =) ho caricato i file solo una cosa non ho capito: come si fa a personalizzare il foglio di style.css ?? Perchè me lo apre con blocco note .... e un'altra cosa non trovo il file jquery-1.4.3.min.js al suo posto ho estratto il file jquery.nivo.slider fa lo stesso ??

    RispondiElimina
  30. @Marty@Angel@Devil: per personalizzare il foglio di style.css puoi utilizzare il blocco note o qualsiasi altro editor di testo.
    Per il file jquery-1.4.3.min.js, ho provato ora a scaricare il pacchetto dal sito ufficiale e nel file .zip del download trovi il file nella cartella nivo-slider\demo\scripts. Il file ora si chiama jquery-1.6.1.min.js

    RispondiElimina
  31. Il file l'ho trovato ^^ volevo sapere una cosa per modificare il file css, lo apro con il blocco note ma i link delle immagini che carico sui siti di hosting dove li devo incollare ?? Non vorrei fare un disastro ^^ e per mettere i testi e fare in modo che quando si clicca su un immagine ti si apra una pagina web ?? Ho letto i commenti precedenti ma non ho capito molto con i codici sono un pò imbranata.
    Un'ultima domanda: non è possibile vedere un'anteprima di come verrà lo slideshow prima di metterlo sul blog e scegliere la grandezza giusta ??

    RispondiElimina
  32. @Marty@Angel@Devil: in effetti nel post sono stata molto sintetica, non ho scritto in dettaglio come fare per modificare il css o inserire le immagini nel blog.
    Pensavo che le istruzioni riportate nel sito ufficiale fossero abbastanza chiare.
    Comunque apprezzo tantissimo il tuo impegno (a differenza di molti che si arrendono subito alla prima difficoltà), quindi ti aiuto volentieri a realizzare il tuo slideshow.
    Mandami via email i link dei file che hai caricato online (.js e .css), i link delle immagini e i link delle pagine che vuoi aprire cliccando su ciascuna immagine. Così ti invio un file .html che sarà l'anteprima del tuo slideshow.
    Poi ti spiegherò passo passo come inserirlo nel blog.

    RispondiElimina
  33. Ciao Iole scusami se disturbo volevo chiederti se potevi farmelo un pò personalizzato perchè visto che io ho un sito di ricette e ne vorrei mettere uno che girando escono le ricette e vorrei fare che le ricette cambiasseo ogni giorno se si deve aggiornare ogni volta che devono cambiare le ricette me lo potresti fare tu e poi le altre volte lo faccio io? grazie 1000 in anticipo e scusami del disturbo :-(
    Fammi sapere se si può fare e se puoi scusami ancora!!! =) a presto!

    RispondiElimina
  34. @vinchef: se hai già caricato online i vari file necessari, mandami via email i link dei file e delle immagini come ha fatto Marty@Angel@Devil. Ti manderò appena possibile il codice per il tuo slideshow personalizzato. Dando un'occhiata al codice vedrai che non è così complicato modificarlo.
    In questi giorni sono impegnata con la realizzazione di due siti web e di un template per un blog, se non ricevi subito una risposta abbi pazienza.

    RispondiElimina
  35. Ciao Iole scusa se ti disturbo,
    come ti ho spiegato nell'email se metto il widget nella sidebar si vede però l'animazione è "disturbata" e le immagini non sono "cliccabili", mentre se lo metto nell'html sotto l'head mi da questo errore: The reference to entity "st" must end with the ';' delimiter. Ho cercato questo "st" nel codice ma non lo trovo. Ho provato anche a modificare qualche cosa ma niente. Che faccio ??

    RispondiElimina
  36. @Marty@Angel@Devil: di preciso dove hai incollato il codice che ti ho inviato? In un gadget di tipo html/javascript o nel template del blog?

    RispondiElimina
  37. Allora prima nel gadget di tipo html/javascript ma dovo aver trovato i problemo l'ho tolto dal gadget e l'ho messo nle template del blog ma non si salva

    RispondiElimina
  38. @Marty@Angel@Devil: ho provato ad inserire nel template del mio blog di prova il codice che ti ho inviato via email e come mi hai segnalato compare l'errore ... "st" must end with the ';' delimiter ....
    In pratrica l'errore che ti compare inserendo quel codice nel template (mentre non compare incollandolo in un gadget di tipo html/javascript) è dovuto alla presenza del carattere & presente nel link dei lettori.
    Trova quindi &st e sostituiscilo con &amp;st e poi dimmi se lo slideshow continua a vedersi "disturbato".

    RispondiElimina
  39. Ciao ^^
    Mi sono letta tutto il codice lettera per lettera ma questo &st prprio non lo trovo ....

    RispondiElimina
  40. @Marty@Angel@Devil: compare nell'indirizzo relativo all'immagine "Diventa lettore fisso".
    Ti incollo parte del link:

    www.google.com/friendconnect/settings/edit?smpl=true&st= ...

    RispondiElimina
  41. Ok sono riuscita a modificarlo ^^ ho provato a metterlo prima su modifica html, dopo l'ho tolto da li e l'ho messo su un gadget html/javascript ma riscontro sempre gli stessi problemi di prima =(

    RispondiElimina
  42. @Marty@Angel@Devil: allora significa che lo script dello slideshow va in conflitto con qualche altro script presente nel blog. Nel mio blog di prova funziona perfettamente e non è disturbato come da te.

    RispondiElimina
  43. Il problema è che non ho idea di quale sia lo script che va in conflitto con lo slideshow ....

    RispondiElimina
  44. @Marty@Angel@Devil: se vuoi possiamo fare un ultimo tentativo.
    Carico i file degli script sul mio dominio a pagamento, ti creo il file per lo slideshow e ti mando il codice da inserire in un gadget di tipo html/javascript (nel mio blog ho fatto così).
    Ci lavorerò questa sera.

    RispondiElimina
  45. Utilissimissimo il tuo blog..davvero ricco

    ora vediamo se riesco a metterti in difficoltà :)

    avrei l'esigenza di inserire nel mio blog una serie di poche foto in slideshow, ma le voglio accompagnare con del testo che cambia al mutare delle singole foto...un pò come alcuni templates di wordpress...

    dici che si può fare o chiedo troppo???

    grazie per tutto quello che fai

    andrea

    RispondiElimina
  46. @Marty@Angel@Devil: ti ho inviato il codice via email. Provalo e fammi sapere!
    @Il Peperoncino Sportivo: quello che mi chiedi si può fare!
    Nella pagina di utilizzo è spiegato abbastanza bene come far apparire sopra l'immagine una descrizione (in inglese caption).
    E' possibile aggiungere una descrizione semplice oppure una in html aggiungendo la proprietà title.
    Ti riporto parte della spiegazione presa dal sito ufficiale:
    "To add a caption to an image you simply need to add a title attribute to the image. To add an HTML Caption simply set the title attribute to the ID of a element that contains your caption (prefixed with a hash). Note that the HTML element that contains your caption must have the CSS class nivo-html-caption applied and must be outside of the slider div."

    RispondiElimina
  47. Ciao IoLe ^^

    Seguo il tuo blog da poco ma già mi sono innamorata dei tuoi gawget ^^
    Non ho capito come si caricano i file su Blogger...
    Me lo potresti spiegare perfavore?

    RispondiElimina
  48. @.Alice.Bellixima.: inserire i miei widget nel blog è facilissimo, ti spiego volentieri come fare.
    In ogni post contenente un widget, non devi fare altro che scegliere ad esempio l'immagine di sfondo che più ti piace, il testo da visualizzare, il colore del testo, la posizione del widget nel blog, ecc. Infine non dovrai fare altro che selezionare il codice che ti compare in un box di testo e incollarlo in un gadget di tipo html/javascript della sidebar del tuo blog.
    Provaci e fammi sapere.

    RispondiElimina
  49. Ciao Iole!Questo sito è semplicemente fantastico!Volevo saper se questo slideshop si può inserire anche nei fan club,se sì potresti spiegarlmelo passo passo perchè non sono un genio della tecnologia...non ci ho capito niente!!!Grazie mille!!

    RispondiElimina
  50. Ciao Iole!Questo blog è semplicemente fantastico!Tante idee utilissime e grandiose!!!Volevo sapere se questo slideshop si potrebbe inserire anche in un fan club!Se si per favore potresti spiagarmi passo passo,più precisamente ciò che devo fare perchè non ho capito molto -.-'??
    Grazie!!

    RispondiElimina
  51. @Elmastar: penso che il codice per lo slideshow possa essere inserito anche in un fan club.
    Per le istruzioni passo passo ti consiglio di leggere il sito ufficiale, i passi da fare sono molto semplici e le istruzioni sono molto chiare.

    RispondiElimina
  52. Hey Iole.....non ho capito molo bene come si pubblicano quei programmi su internet ma soprattutto come cambiare i codici html in modo che venga fuori l'immagine che decido io....O.o
    hihihi nn ho capito molto benexD

    RispondiElimina
  53. @MysticGiuly: eppure sul sito ufficiale le istruzioni sono così chiare.
    Comunque se proprio non hai capito come si realizza uno slideshow, non metterlo nel blog ma trova qualche altro widget.

    RispondiElimina
  54. Ciao, io sono nuovo e leggendo il tuo post e anche i commenti, devo dire che per me è arabo... comunque ho scaricato tutto quello che hai consigliato, ora mi metto a lavoro.
    Spero di contattarti per dire che è andato tutto a posto.
    Grazie e a presto.
    Salvatore

    RispondiElimina
  55. Siccome non ci riesco ... se ti do le dimensioni e le immagini che devi mettere , me lo faresti ? Grazie di tutto e se ti va visita il blog in cui lo devo inserire : wwwfantasticworldofstardoll.blogspot.com

    RispondiElimina
  56. @nicepop95: al momento ho tante richieste in sospeso e poco tempo a disposizione quindi, oltre ai widget e gli script che realizzo e che metto gratuitamente a disposizione di tutti, mi occupo solo delle richieste di chi mi ha già fatto una donazione spontanea, anche piccola. Le loro richieste hanno la precedenza assoluta.

    RispondiElimina
  57. Salve Iole , avrei bisogno di un aiuto. . . Vorrei inserire uno slideshow nel blog ma non ho capito niente del post xD Mi potresti aiutare,magari se ti metto come amministratrice . Avrei bisogno anche di un template. . Spero che tu mi possa aiutare :* Baci Jasmine

    RispondiElimina
  58. @JaZzzMine: come ho già scritto ai tanti che prima di te mi hanno chiesto maggiori spiegazioni... penso che nella pagina di utilizzo dello script ci siano delle istruzioni ben dettagliate. Basta solo un po' di impegno e si riesce facilmente a creare il proprio slideshow.
    Riguardo al template, ho già tantissime richieste in sospeso. In questo momento non posso proprio aiutarti.

    RispondiElimina
  59. buona sera iole
    grazie dei tuoi consigli ma per favore facci vedere gli esempi visivi passo passo su come modificare,salvare,iserire,il nivo slider nel sito
    ho rpovato a leggere un po nel sito ufficiale ma sinceramente
    non lo vedo spiegae bene
    grazie iole
    ciao marco

    RispondiElimina
  60. buona sera iole grazie dei consigli
    che ci dai online sono utili e interessanti
    sono interessato come gli altri a questo nivo slider ma purtroppo anche nel sito ufficiale non ci si riesce a capire piu di tanto
    dovrebbe essere spiegato bene passo passo ogni fase
    per es ci dovrebbe essere un esempio visivo su come modificare e il css scaricato dove mettere url delle foto ecc..
    poi una volta salvato dove va inserito?all'interno di una pagina del sito e se si dove?oppure va solamente fatto leggere nel mio caso uso file zilla
    e kompozer per creare le mie pag del sito
    nel mio sito ho inserito uno slide
    creato con un programma inrete gratuitamente ma ne vorrei creare uno per conto mio con nivo o altro programma che potresti consigliare
    scaricato il file apriamo il css lo modifichiamo(ci puoi inserire un es nel tuo blog?)poi 2 salviamo e?dobbiamo copiare e incollare in un punto preciso nella pag che vogliamo?dentro una tabella opp
    grazie iole
    marco

    RispondiElimina
  61. @marco: mi dispiace ma in questo momento ho tante richieste in sospeso e poco tempo a disposizione quindi mi risulta difficile pubblicare un post con le istruzioni passo passo per inserire questo slideshow nel blog.
    In rete comunque si trovano tanti script per slideshow; secondo me Nivo Slider è il più semplice da utilizzare e dagli effetti spettacolari.
    Prova a cercarne qualcuno più semplice di questo.

    RispondiElimina
  62. Ciao Iole,
    ma le immagini vanno nel file style.css o in un gadget html/java?! Per favore rispondimi! Grazie!!

    RispondiElimina
  63. @Markus: le immagini da visualizzare nello slideshow vanno in un gadget di tipo html/javascript mentre le immagini per la navigazione (per intenderci le freccette che compaiono a destra e a sinistra e i pallini che compaiono sotto allo slideshow) vanno nel file css.

    RispondiElimina
  64. Ciao Iole.....ecco, questo è molto carino. Lo cercavo con un effetto scorrimento diapositiva tra le immagini cosa che purtroppo Nevo non ha). Inoltre ultimamente gli effetti di transizione di Nevo mi danno problemi in chrome.....bah..... ^_^ grazie di tutto!

    RispondiElimina
  65. @LeChatNoir: quando ho pubblicato il post avevo trovato nella documentazione Nivo quali erano tutti gli effetti di transizione disponibili ma ora non li trovo più. Quelli che vedi nel mio post sono effetti casuali.

    RispondiElimina
  66. @ Iole sisi, ti ringrazio iole, ho recuperato la documentazione ma non c'è l' effetto di cui ti parlavo :(
    L' ho trovata una slide carina su un sito. te l' ho già linkato via mail, magari tu che ci capisci un botto in più riesci a trovare una valida alternativa a nivo che purtroppo sta dando i numeri

    RispondiElimina
  67. Uffi non riesco proprio a farlo :( accidenti sono un'incapace

    RispondiElimina
  68. @LeChatNoir: spero di riuscire a realizzare presto per te lo slideshow che mi hai richiesto.
    @Miriam Rizzo: quando ho scritto questo post, lo script per lo slideshow era molto più semplice da personalizzare ed intuitivo. Ora le cose sono cambiate un po'.
    Se vuoi posso aiutarti io a realizzare uno slideshow personalizzato, contattami via email.

    RispondiElimina

Licenza Creative Commons This blog by Iole is licensed under a Attribution-NonCommercial-NoDerivs 3.0 Unported License.
Copyright © 2008- iolecal.blogspot.it|Design by Iole|Privacy Policy