Pubblicato il 10/06/11 - aggiornato il  | 7 commenti :

Come personalizzare l'effetto Nivo Slider per Blogger.

Ho appena letto un commento su come si possa personalizzare l'Effetto Nivo Slider che ha riscosso tanto successo tra i lettori di questo blog. Non sto a illustrare nuovamente la procedura per installare questo slideshow con collegamenti inseriti nelle immagini che puntano a singole pagine del blog. Per i dettagli relativi consultate quindi il precedente articolo che ho dedicato a

L'autore dello script ha pubblicato in rete tutta una serie di istruzioni per rendere ancora più personale lo slideshow. Nel post in cui l'ho presentato non le avevo inserite per brevità di esposizione ma visto che mi è stato chiesto ecco come procedere per ulteriori personalizzazioni. La differenza sostanziale sta solo nell'ultimo codice inserito prima della riga </body>. Possiamo sostituirlo con quest'altro

<!-- Nivo Slider  Inizio-->
<script type='text/javascript'>
$(window).load(function() {
    $(&#39;#slider&#39;).nivoSlider({
       effect:&#39;random&#39;, // Specificare effetto
       animSpeed:500, // Velocità dello slide 
       pauseTime:5000, // Tempo di permanenza dello slide 
      startSlide:3, // Inizio della riproduzione (0 se si vuole iniziare dalla prima immagine)
});
});
</script>
<noscript><a href='http://goo.gl/i3lI5' target='_blank'><span style='font-size: x-small;'>Nivo Slider</span></a></noscript>
<!-- Nivo Slider Fine -->

e quindi salvare il modello. Ho inserito solo quattro parametri ma se ne possono aggiungere anche altri presi dalla documentazione dell'autore

  1. In effect si può specificare il tipo di effetto scelto tra: sliceDown, sliceDownLeft, sliceUp, sliceUpLeft, sliceUpDown, sliceUpDownLeft, fold, fade, random, slideInRight, slideInLeft, boxRandom, boxRain, oxRainReverse, boxRainGrow e boxRainGrowReverse
  2. Con animspeed si configura la velocità di transizione dello slide
  3. pauseTime serve per determinare il tempo di permanenza di ogni singola immagine
  4. startslide indica da che immagine deve iniziare la riproduzione degli slide. Per iniziare dalla prima occorre inserire 0, per cominciare dalla seconda bisogna mettere 1, per la terza 2 e così via. 

Ecco una Demo di Nivo Slider con questi parametri.



7 commenti :

  1. Ciao Ernesto avrei bisogno di un aiuto da parte tua. Io uso firefox di default, e Nivo slider funziona benissimo. Con gli altri browser però, come chrome o safari, funziona ugualmente, ma è tutto spostato sulla destra. La stessa cosa mi accade con la barra del menù sopra lo slider. Sai come posso risolvere il problema e poter visualizzare allo stesso modo il blog in tutti i browser?
    Ti lascio l'indirizzo del blog: www.molotovcoketail.com

    Ti ringrazio in anticipo e aspetto una tua risposta.

    RispondiElimina
  2. @Giampy
    Questi problemi di una diversa visualizzazione di widget con i vari browser è molto comune e purtroppo non c'è una soluzione praticabile. Al massimo si può provare a eliminare o spostare qualche altro gadget che potrebbe disturbare. Ma si possono fare solo dei test.

    RispondiElimina
  3. si puo anche personalizzare il font? Perchè nel mio blog è troppo piccolo, parlo ovviamente del font del titolo
    Grazie

    RispondiElimina
    Risposte
    1. @# E' possibile con un po' di esperienza con i codici. Scarica questo file
      https://sites.google.com/site/scriptperilblog/slideshow/style.css
      incollandone l'URL nel browser e cliccando su Invio. Apri il file con Notepad++ e cerca questo blocco di codice
      body {
      font:14px/1.6 Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif;
      color:#2d3536;
      Al posto di 14px puoi mettere 16px o 18px
      Devi salvare il file, caricarlo su Google Sites o Dropbox, trovarne il link diretto e sostituirlo nel codice del precedente articolo.

      Elimina
  4. Ciao, e per personalizzare invece il font e la dimenzione dello stesso all'interno della descrizione???

    RispondiElimina
    Risposte
    1. @# Il post a cui fare riferimento è questo
      http://www.ideepercomputeredinternet.com/2011/04/slideshow-di-immagini-con-descrizione-e.html
      e il codice dei CSS lo puoi visualizzare scaricando questo file
      https://sites.google.com/site/scriptperilblog/slideshow/style.css
      Dovresti al suo interno modificare il blocco di codice
      .nivo-caption {
      text-shadow:none;
      font-family: Helvetica, Arial, sans-serif;
      }
      .nivo-caption a {
      color:#efe9d1;
      text-decoration:underline;
      e eventualmente inserire una riga per la dimensione tipo questa
      font-size:14px !important;

      Elimina
  5. Ciao, per modificare il colore dei pallini diapositiva quando sono selezionati come si fa?
    E per cambiare il colore e l'opacità dello sfondo del banner descrizione?
    Grazie

    RispondiElimina

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