Come mostrare a rotazione immagini o banner con link.

Come inserire dei banner c on link a pagine web che cambiano casualmente al ricaricare della pagina.

Uno dei problemi che i blogger devono affrontare quotidianamente è quello dello spazio del layout. Vorremmo mostrare un sacco di cose ma siamo sempre costretti a operare delle scelte. Mettiamo che volessimo inserire delle immagini che portino ai siti di alcuni blog amici o delle foto attinenti a dei post a cui teniamo molto. E' certamente possibile scegliere dei widget, magari degli slideshow. Ma se vogliamo operare una scelta più minimalista si può optare per un elemento pagina che mostri casualmente un certo numero di immagini ciascuna di queste collegata con una pagina web.

La particolarità di questa soluzione risiede del fatto che la foto mostrata viene cambiata quando si ricarica la pagina. Ho preparato un codice con quattro immagini ma possono essere aumentate indefinitamente con delle piccole modifiche.

Si va su Layout > Aggiungi un gadget > HTML/Javascript e si incolla in Sezioni del sito il codice

<script language="JavaScript">
images = new Array(4);
images[0] = "<a href = 'URL DEL COLLEGAMENTO' target="_blank" rel='nofollow' ><img src='URL DELLA IMMAGINE' border='0' height='200px' width='300px' ></a>";
images[1] = "<a href = 'URL DEL COLLEGAMENTO' target="_blank" rel='nofollow' ><img src='URL DELLA IMMAGINE' border='0' height='200px' width='300px' ></a>";
images[2] = "<a href = 'URL DEL COLLEGAMENTO' target="_blank" rel='nofollow' ><img src='URL DELLA IMMAGINE' border='0' height='200px' width='300px' ></a>";
images[3] = "<a href = 'URL DEL COLLEGAMENTO' target="_blank" rel='nofollow' ><img src='URL DELLA IMMAGINE' border='0' height='200px' width='300px' ></a>";
index = Math.floor(Math.random() * images.length);
document.write(images[index]);
</script>

Se si vuole inserire un'altra immagine occorre modificare new Array(4); in new Array(5); e inserire un'altra riga con la stessa sintassi in questo modo

images[3] = "<a href = 'URL DEL COLLEGAMENTO' target="_blank" rel='nofollow' ><img src='URL DELLA IMMAGINE' border='0' height='200px' width='300px' ></a>";
images[4] = "<a href = 'URL DEL COLLEGAMENTO' target="_blank" rel='nofollow' ><img src='URL DELLA IMMAGINE' border='0' height='200px' width='300px' ></a>";

e così via. Per ciascuna immagine va inserito il suo indirizzo dopo che si è caricata su Picasa. Va incollato anche l'URL della pagina a cui inviare il visitatore che ci clicca sopra. Il tag target="_blank" serve per aprire il link in un'altra scheda e può essere tolto così come il tag rel='nofollow' che è sconsigliato se si linkano pagine interne e che può essere utile solo per banner pubblicitari se non si vuole trasferire il nostro Page Rank. Le dimensioni delle immagini sono da scegliere a piacere.