Rotating banner come widget

Dopo il mio post sul rotating banner per avere un'immagine sempre diversa nell'header del blog ogni volta che veniva visualizzato, Boby mi aveva chiesto se fosse stato possibile aggiungere la modifica al blog come widget piuttosto che modificando il template.

Mentre finalmente nella mia lista delle cose da fare ero arrivato proprio a questa, Andrea mi ha contattato per un problema che aveva avuto proprio implementando il rotating banner come widget.

Ed ecco quindi questo post per entrambi.

 

Rotating banner come widget

Innanzitutto, per l'header dovete scegliere delle immagini della stessa grandezza. Potete trovare moltissime immagini per l'header leggendo questo mio post (dove parlo pure di uno strumento per ridimensionarle, se dovesse servire), o potete utilizzare quelle che volete, e dovete pubblicare online con un servizio come Skydrive o Imageshack. L'importante è che le immagini abbiano delle dimensioni che si adattino all'header.

Dopo averlo fatto, andate in Layout->Elementi pagina e aggiungete un nuovo elemento di tipo HTML/JavaScript, e incollate il seguente codice (dopo averlo personalizzato):

<script type="text/javascript">
var banner= new Array()
banner[0]="indirizzo immagine"
banner[1]="indirizzo immagine"
banner[2]="indirizzo immagine"
var random=Math.floor((banner.length - 1) *Math.random());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat top left;');
document.write(" }");
document.write("</style>");
</script>

Va aggiunta una riga evidenziata in blu per ogni immagine che intendete visualizzare, cambiando ogni indirizzo immagine con l'indirizzo delle immagini che volete pubblicare e incrementando di volta in volta il numero in rosso. Quindi, se usate due immagini diverse, il codice diventa:

banner[0]="indirizzo della prima 'immagine"
banner[1]="indirizzo della seconda immagine"

E così via. Salvate, e visualizzate il blog per vedere ogni volta un'header diverso.

Il codice è stato personalizzato da questo post segnalato da Andrea.

Visualizzare solo l'immagine senza titolo e renderla cliccabile

Molti preferiscono visualizzare solo un'immagine nell'header senza titolo nè descrizione, ma il problema col precedente codice è che l'immagine viene caricata come sfondo e quindi non è cliccabile, e non essendoci il titolo non c'è modo di ritornare alla pagina principale del blog.

Non ho trovato in rete soluzioni con cui confrontarmi e ne propongo quindi una mia. Occorre però modificare il template, quindi è bene farne prima il backup. Nel mio caso per le prove sto usando il template Minima, presente tra quelli predefiniti di Blogger.

1) Andate in Impostazioni->Generale ed eliminate la descrizione del blog, lasciando solo il titolo.

2) In Layout->Modifica HTML, spuntate la casella "Espandi i modelli widget" e cercate la seguente porzione di codice nel template:

  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:title/>
  <b:else/>
    <a expr:href='data:blog.homepageUrl'><data:title/></a>
  </b:if>

E cambiate la riga evidenziata in rosso in questo modo:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <a expr:href='data:blog.homepageUrl'><data:title/></a>
<b:else/>
  <a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>

Con questa modifica, il titolo sarà sempre cliccabile, mentre normalmente quando siamo nella pagina principale del blog non lo è.

3) Cercate la seguente porzione di codice (potrebbe cambiare a seconda del template usato):

#header a {
  color:$pagetitlecolor;
  text-decoration:none;
  }

che definisce l'aspetto dei link che si trovano nella sezione dell'header, e aggiungete le righe in rosso:

#header a {
    position: absolute;
    top: 0;
    left: 0;
    width: 800px;
    height: 200px; 
    color:$pagetitlecolor;
    text-decoration:none;
  }

width e height dovranno essere adattate alle dimensioni delle immagini che volete usare, in questo caso sto prevedendo immagini di 800x200 pixel. Col codice CSS di sopra, stiamo definendo (in modo assoluto) la posizione e la dimensione che avranno i link presenti dentro l'header del blog.

4) Subito sotto la porzione di codice modificata, incollate le seguenti righe:

#header a h1
{
    display: none;
}

Con questo codice stiamo dicendo che i link e il testo con formato h1 (quello del titolo del blog, di solito) non vengono visualizzati.

5) Salvate le modifiche effettuate e visualizzate il blog. Passando col mouse sopra l'immagine dell'header, vedrete che sarà cliccabile. In realtà quello che clicchiamo è il titolo, che però non è visibile. Per il visitatore non farà alcuna differenza.

Per qualsiasi chiarimento o se le modifiche non dovessero andare bene per il vostro blog, lasciatemi un commento.

L'immagine che ho usato per illustrare il post è stata prelevata da Girotondodiparole.

Condividi su Facebook, Twitter o Google Buzz:

Per ricevere direttamente in posta i nuovi articoli, inserisci il tuo indirizzo email:

oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Per maggiori informazioni sui feed, clicca qui!