Pubblicato il 02/07/12 - aggiornato il  | 28 commenti :

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.


28 commenti :

  1. Spesso mi chiedo se hai capacità divinatorie o leggi nel pensiero. Proprio oggi cercavo una soluzione del genere. Grazie mille :)

    RispondiElimina
  2. hem...sarebbe possibile caricare tutte le immagini del blog su blogspot senza impostare nessun indirizzo?

    RispondiElimina
    Risposte
    1. @ivabellini
      E come fai? Per caricare immagini su un blog ci vuole una account Picasa che a sua volta è collegato a un account Blogger e a un account GMail.

      Elimina
  3. Ciao Ernesto torno con un altro dei miei quesiti.
    Come posso inserire la visualizzazione automatica del Google Translator (es vedi blog TheBlondeSalad.com)posta nella parte superiore del blog?

    Ho seguito tutte le consuetidini indicazioni dal sito ufficiale con gli spunti per la visualizzazione automatica (e con la stessa procedura che fino allo scorso anno mi ha permesso di mantenere tale tipo di visualizzazione del traduttore, ora invece qualsiasi opzione io scelga dal sito di configurazione ufficiale: https://translate.google.com/manager/add , almeno nel mio blog, si visualizza poi sempre con la finestrella orizzontale)
    se hai 2min potresti verificare anche tu in un blog di prova magari? non riesco a capire se sia solo un poblema mio.
    grazie infinite

    RispondiElimina
    Risposte
    1. @GaiaVincenzi
      Io non vedo nessuna barra di traduzione. Se mi ricordo dipende dal tipo di impostazioni che hai messo nel browser. Se vai su Opzioni e scegli non tradurre mai questo sito, dovrebbe sparire la barra di traduzione. Io non la vedo perché ho scelto Non tradurre mai dall'inglese.

      Elimina
    2. Devo dire però che è adesso è in italiano :P

      Elimina
  4. Ciao,
    vorrei fare una pagina wp con bottone iscrizione.
    Quello che mi servirebbe e' un "programmino" che possa inserire una lista di link personali e ha ogni refresh della pagina, i link inseriti ruotano.
    Aspetto tua risposta,grazie.
    Marco

    RispondiElimina
    Risposte
    1. @TheSpecial
      Non sono un così gran conoscitore di Wordpress tanto da poterti aiutare

      Elimina
  5. Buongiorno ernesto, questo widget è molto interessante ma non mi funziona. Ho provato in tutti i modi. E' cambiato qualcosa?

    piergiorgio

    RispondiElimina
    Risposte
    1. Non ti so dire perché la Demo mi sembra che vada bene :)
      @#

      Elimina
    2. Buon giorno, i problemi sono dovuti all'attributo target="_blank" che va messo in modo corretto con gli "apici singoli" : target='_blank'

      Elimina
    3. In Blogger bisogna ricordarsi di mettere sempre la vircoletta singola. Nel post non lo avevo ricordato. Grazie per la precisazione.
      @#

      Elimina
  6. è possibile utilizzare questo sistema per riproporre in modo casuale 3-4 prodotti amazon? o occorre utilizzare un altro metodo?

    RispondiElimina
    Risposte
    1. Puoi provare. Se si tratta di una immagine con un link funziona di sicuro. Se è un codice allora no
      @#

      Elimina
  7. La demo funziona, prova a controllare meglio il codice

    RispondiElimina
  8. Ciao Ernesto, ho provato a inserire il codice nella sidebar, usando il gadget HTML/JavaScript, però, una volta salvato, il blog sparisce e al suo posto vi è solo una delle immagini random. È possibile che la colpa sia del mio template?
    Grazie mille!

    RispondiElimina
    Risposte
    1. @# Propendo più per avere copiato male il codice o aver incollato male gli URL. Prova con questo codice inerito in una sidebar per vedere se ti funziona. Se non funziona allora è un problema del template o di un altro widget del tuo sito

      <script language="JavaScript">
      images = new Array(4);
      images[0] = "<a href = 'http://shadowboxeffect.blogspot.it/2012/04/demo-della-descrizione-delle-etichette.html' rel='nofollow' ><img src='https://lh3.googleusercontent.com/-pAlq-FAnp5w/T_FMiOMtMLI/AAAAAAAAY6A/oW-yQz06pzU/s300/leopardo.jpg' border='0'height='190px' width='280px' ></a>";
      images[1] = "<a href = 'http://shadowboxeffect.blogspot.it/2012/04/dimostrazione-di-come-inserire-un.html' rel='nofollow' ><img src='https://lh4.googleusercontent.com/-B60wExFPbN4/T_FMmeDFjVI/AAAAAAAAY6I/aV67JnqPLaQ/s300/medusa.jpg' border='0'height='190px' width='280px' ></a>";
      images[2] = "<a href = 'http://shadowboxeffect.blogspot.it/2012/04/demo-del-widget-della-nuvola-dei.html' rel='nofollow' ><img src='https://lh3.googleusercontent.com/-rx7jDMb3iew/T_FMqkSbVgI/AAAAAAAAY6Q/Ui7_4ZCtmqg/s300/albatro.jpg' border='0'height='190px' width='280px' ></a>";
      images[3] = "<a href = 'http://shadowboxeffect.blogspot.it/2012/04/demo-del-widget-della-nuvola-dei.html' rel='nofollow' ><img src='https://lh4.googleusercontent.com/-ZvVo39Ef9qw/T_FNvJzOGJI/AAAAAAAAY6k/VmWz3OWYS34/s300/elefante.jpg' border='0'height='190px' width='280px' ></a>";
      index = Math.floor(Math.random() * images.length);
      document.write(images[index]);
      </script>

      Elimina
    2. Purtroppo anche copia-incollando questo codice il problema persiste. Che tipologia di widget potrebbe entrare in conflitto con questo codice? Grazie comunque per la tua disponibilità!

      Elimina
    3. Onestamente non te lo so dire. Prova a cambiare tutte le occorrenze di images con immagini o con altra espressione qualsiasi per vedere se è un problema di nome già usato nel tuo modello
      @#

      Elimina
    4. Ho provato e il risultato è nuovamente lo stesso. Ho provato anche con lo script degli aforismi e anche in quel caso il risultato è una pagina bianca con una frase random. È un vero peccato non poter utilizzare questa funzione. Ti ringrazio lo stesso perchè sei stato davvero molto gentile ad aiutarmi.

      Elimina
    5. Nel tuo modello ci deve essere uno script che confligge con altri javascript con Array
      @#

      Elimina
    6. Mmm.. come stanarlo? Purtroppo il template non l'ho fatto io e, anche se un po' me ne intendo, non saprei proprio come trovare lo script incriminato. Qualche suggerimento? :)

      Elimina
    7. Mi spiace, non ho nessuna idea in proposito :(
      @#

      Elimina
    8. Non fa niente, non ti preoccupare. Ne farò a meno. Grazie comunque per avermi dedicato del tempo!

      Elimina
  9. Ciao, è possibile fare la stessa cosa ma facendo roteare i banner dopo un lasso di tempo prestabilito anzichè al reload della pagina? Grazie.

    RispondiElimina
    Risposte
    1. Non con questo semplice javascript. Ci vorrebbe anche l'aiuto della libreria jQuery
      @#

      Elimina

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