Ricerca personalizzata

05 febbraio 2013

Banner in Rotazione per Blogger

In questo articolo vorrei spiegare come inserire un Banner in rotazione, che può essere di vari formati, per piattaforma Blogger.

Ora navigando per il Web ho trovato parecchie soluzioni, le ho tutte testate, ma la maggior parte su blogger non funzionano.

Questa che vi propongo fà al caso nostro e funziona!

E' molto semplice, il codice da inserire è poco e si possono aggiungere parecchie immagini con i rispettivi Link.

Il motivo per cui diventa molto utile un Banner con la rotazione è che un possessore di un Blog vorrebbe far visualizzare un sacco di immagini ma lo spazio del layout è risicato, soprattutto se il Blog in questione dà molta importanza al reparto grafico! Per esempio un Blog che parla di Giochi, Musica o Film.

Ora vediamo come procedere:
Andate in "Modello", poi "Modifica HTML", cercate <body> e sostituitelo con <body onload='setTimeout(&apos;ruota()&apos;, 10000)'> poi salvate.

Antate ora in "Layout", cliccate su "Aggiungi un gadget" e scegliete "HTML/JavaScript". Incollate nello spazio apposito il seguente codice:

<script language="javascript">
<!--
var cur = 0;
var img = new Array;
var coll = new Array();

img[0] = new Image();
img[0].src = "http://latuaImmagine1.jpg";
coll[0] = "http://www.iltuoLink1.it";

img[1] = new Image();
img[1].src = "http://latuaImmagine2.jpg";
coll[1] = "http://iltuoLink2.it";

function ruota()
{
    cur++;
    if (cur >= img.length)
        cur = 0;
    document.images["banner"].src = img[cur].src;
    setTimeout("ruota()", 10000);
}

function click()
{
    window.open(coll[cur]);
}
-->
</script>
<a href='javascript:click()'>
<img alt='Sponsor' border='0' height='60' name='banner' src='http://latuaImmagine1.jpg' width='468'/>
</a>


Potete aggiungere più immagini inserendo porzioni di codice come questo sotto, che comprende sia l'URL dell'immagine che l'URL del Link:

img[2] = new Image();
img[2].src = "http://latuaImmagine3.jpg";
coll[2] = "http://iltuoLink3.it";

height='60' e width='468' determinano le dimensioni del banner che volete inserire, ovvio che le immagini che compongono il banner devo essere grandi uguali.

setTimeout("ruota()", 10000);   Determina il tempo tra un'immagine ed un'altra! 10000 è uguale a 10 secondi.

Un ultimo appunto, per hostare le immagini potete usare Picasa o Dropbox, è un programma veramente utile!

Fonte del codice: Sviluppo Software e Dintorni
Spero di esservi stata d'aiuto!
Se ti è piaciuto l'articolo, iscriviti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog! Per maggiori informazioni sui feed, clicca qui!


1 commenti:

cooksappe ha detto...

ruoto!

Posta un commento

Scrivi le tue opinioni!

Related Posts with Thumbnails
 
Share
ShareSidebar