Ricerca personalizzata
ADVPlace
Un network di Affiliazione per chi vuole monetizzare il proprio traffico...
Affiliation Partner
Un programma di Affiliazione italiano, che potrebbe essere una buona alternativa ad AdSense........
Sprintrade
Un network di affiliazione valido con centinaia di Campagne che pagano per click, lead e vendita........
AddyOn
Un servizio utile che permette di vendere o comprare spazi pubblicitari online......

25 aprile 2011

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('http://lh3.ggpht.com/_JU-SZo3BNOA/TUmjbfdIljI/AAAAAAAABAs/TNji091dvFI/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('http://lh3.ggpht.com/_JU-SZo3BNOA/TUmjbYhAahI/AAAAAAAABAo/rQSJK3T_F-0/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!


3 commenti:

Daniele M. ha detto...

URL del blog:Browser utilizzato: provabastaprecari.blogspot.com

Vorrei creare un
Slideshow automatico Nivo Slider per Blogger.

Seguendo la tua guida
mi dà l'errore
bX-gglifa
quando modifico e salvo modello in html
con i due inserimenti di codice.

Ottica Tullino ha detto...

grazie alle vostre dettagliate spiegazioni siete riusciti a far installare questo bellissimo slide a uno che non capisce niente di cod. html css script ecc.
grazie vi ho aggiunto subito ai preferiti

Luigi Nargiso ha detto...
Questo commento è stato eliminato dall'autore.

Posta un commento

Scrivi le tue opinioni!

Related Posts with Thumbnails
 
Share
ShareSidebar