Slideshow automatico Nivo Slider per Blogger

Ora vediamo come inserire il plugin Nivo Slider su piattaforma Blogger. Inanzi tutto devo dire che ciò che andremo ad inserire è una JQuery Slideshow in javascript, che  mostra una sequenza di immagini passando da una all'altra in modo automatico, con effetti grafici particolari.

Principalmente serve per coloro che voglio inserire alcune Foto nel proprio Blog o sito internet, per renderlo un pò più grafico e bello, anche perchè l'occhio vuole la sua parte!


Il plugin Nivo Slider può essere personalizzato a piacere, ogni immagine in sequenza può essere arricchita con una didascalia di spiegazione o un link a qualche particolare articolo. Può essere usato anche come una presentazione grafica degli ultimi Post che sono stati inseriti nel proprio Blog, oppure degli Articoli più interessanti o rilevanti.

Detto questo, procediamo ora con l'inserimento vero e proprio.
Andiamo per prima cosa sul sito ufficiale di Nivo Slider, scarichiamo il pacchetto di file che ci serve, più precisamente questi:

• jQuery
• Nivo Slider script
• Nivo Slider CSS

Per hostare i file .css e .js possiamo usare Google site o DropBox. Per le immagini possiamo usufruire di Picasa oppure DropBox (molto comodo e adatto a qualsiasi File).
Accediamo ora al codice sorgente di Blogger, "modifica HTML...", cerchiamo </head> e subito prima incolliamo il seguente codice:

<link href='......./nivo-slider.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='......../jquery.nivo.slider.pack.js' type='text/javascript'/>
<script src='......./jquery.nivo.slider.js' type='text/javascript'/>

<script type='text/javascript'>
$(window).load(function() {
    $(&#39;#slider&#39;).nivoSlider({pauseTime:5000});
});
</script>

Il codice evidenziato in Rosso sono gli URL dei File, in Verde (5000) il tempo in millisecondi tra un'immagine e l'altra.
Cerchiamo poi  ]]></b:skin> e subito prima incolliamo il  seguente codice CSS:

#slider {
    position:relative;
    width:507px;
    height:280px;
    margin-left:190px;
   
}
#slider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
#slider a {
    border:0;
    display:block;
}
.nivo-controlNav {
    position:absolute;
    left:140px;
    bottom:-22px;

}
.nivo-controlNav a {
    display:block;
    width:22px;
    height:22px;
    background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrHOhCB2-jjtxAp97bXEkNc2PCires3M7s1Txymrh8Fh3qqHjeW6fA1s_2g9iCdLCk3RwAokuEGUh-2NBToYAzmd3CUpemUn7ec7yUKgl4jn26UI882tUxOQhOj-oy93buuTnUx43WITxm/s800/bullets.png') no-repeat;
    text-indent:-9999px;
    border:0;
    margin-right:3px;
    float:left;
}
.nivo-controlNav a.active {
    background-position:0 -22px;
}
.nivo-controlNav a.active {
    background-position:0 -22px;
}

.nivo-directionNav a {
    display:block;
    width:30px;
    height:30px;
    background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRP_pYfXYhhYpiICiX17C76kZtsQty03nvn0aLEy1aDOrV12vxJ1dqelM8z13N3Eus-BD7XfdFxsNtJdOqMn-Qj3BtpUVQ2lFFCnwu3sX2qzAzsPwAN5CEudvPvi5XtlkNZbjJgLE1EdxT/s800/arrows.png') no-repeat;
    text-indent:-9999px;
    border:0;
}
a.nivo-nextNav {
    background-position:-30px 0;
    right:15px;
}
a.nivo-prevNav {
    left:15px;
}

.nivo-caption {
    text-shadow:none;
    font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a {
    color:#efe9d1;
    text-decoration:underline;
}

Dove il gli URL in Rosso sono i percorsi delle immagini hostate (Bullet e Arrows). In Verde sono le dimensioni del plugin NIvo Slider, che possono essere modificate, ma è meglio se sono uguali a quelle delle immagini o Foto che avete intenzione di Inserire.
Non è ancora finita, perchè dobbiamo inserire un Widget Box nel Layout di Blogger, quindi: Layout, widget HTML/Javascript ed inseriamo il seguente codice:

<div id="slider">
   <a href="....../articolo.html"><img src="....../Articolo.jpg" alt="" title="#htmlcaption1" /></a>
<a href="......./articolo2.html"><img src="...../Articolo2.jpg" alt="" title="#htmlcaption2" /></a>
</div>

<div id="htmlcaption1" class="nivo-html-caption">
   <strong>Articolo</strong>
blablablabla.....
</div>
<div id="htmlcaption2" class="nivo-html-caption">
   <strong>Articolo2</strong>
Blablablabla
</div>

Ho inserito solo 2 immagini, con relative didascalie e link.
In Rosso è il percorso dei Link e in Verde delle immagini. Come potete vedere, il codice evidenziato in Blu riguarda le didascalie o breve descrizioni, dove il primo div con "htmlcaption1" è abbinato alla suo relativo div "htmlcaption1", e così per gli altri div.

Attenzione che se avete inserito nel vostro Blog un'altro script slideshow è possibile che questo vada in conflitto con il plugin Nivo, soprattutto se entrambi fanno uso delle medesime librerie come per esempio in questo Blog. Essendoci già uno slideshow per gli articoli recenti , Nivo Slider non funziona e non fà visualizzare le immagini inserite!
Se volete qualche altro sSlideshow simile a Nivo Slider, date un'occhiata a quest articolo: Alcuni Link per Jquery Slideshow.
Spero di essere stata utile!

Se ti è piaciuto l'articolo, iscriviti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog! Per maggiori informazioni sui feed, clicca qui!