Rotating banner come widget


imageDopo 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:
Condividi su Facebook Condividi su Twitter Pubblica su 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!

26 commenti:

c4os ha detto...

Mitico Tenebrae intanto complimenti per l'utilissimo blog!! ti contatto perche' ho un problema e non so piu dove sbattere la testa ç_ç
L'area del titolo di ogni post che faccio, che e' chiaramente cliccabile col mouse per aprire la pagina dedicata al post, invece di occupare solo le parole usate per il titolo, mi occupa tutta la striscia fino alla fine del limite del mio body. Non so se son riuscito a farti capire... Esempio faccio un post chiamato HELP. Normalmente si clicca su HELP e viene caricata la pagina relativa al post, invece a me oltre che sulla parola HELP, il campo cliccabile e' esteso a tutta la riga!! Non so piu' dove andare a guardare nel layout per capire dove sta il problema... ah ovviamente e' un blogger, se ti serve il mio css dimmelo...

Tenebrae ha detto...

ho visto, non mi sembra che l'effetto sia poi tanto male, anzi... dovresti mandarmi il template per poterci dare un'occhiata

c4os ha detto...

ti mailo ^^

Andrea Walter ha detto...

Ciao! l'unica domanda che mi pongo è se si poteva usare una espressione di questo genere nel codice del rotating banner anzichè cambiare il template:

banner[0] = '<a href="http://andreawalter.blogspot.com/" target="_blank"><img src="indirizzo immagine" height="272" width="978" border="0"> ';

chiaramente href si riferisce al link clickabile il target può prevedere varie opzioni oltre il blank..
Questa linea l'ho provata solo caricando il rotating banner come file esterno e in questo caso funziona (la uso attualmente per il mio blog), ho provato però a scrivere il codice in un widget ma non capisco cosa sbaglio.., ti riporto per completezza tutto il codice così mi dici se si può scrivere in un widget o se c'è qualche espressione da modificare per renderla widget compatibile:

// usar asi
// <script src="http://www.andreawalter.blogspot.com/blogfiles/rotating.js"></script>
//* andreawalter.blogspot.com ...
rot = new Array(6);
rot[0] = '<a href="http://andreawalter.blogspot.com/" target="_blank"><img src="indirizzo immagine" height="272" width="978" border="0"> ';
rot[1] = '<a href="http://andreawalter.blogspot.com/" target="_blank"><img src="indirizzo immagine" height="272" width="978" border="0"> ';
rot[2] = '<a href="http://andreawalter.blogspot.com/" target="_blank"><img src="indirizzo immagine" height="272" width="978" border="0"> ';
rot[3] = '<a href="http://andreawalter.blogspot.com/" target="_blank"><img src="indirizzo immagine" height="272" width="978" border="0"> ';
rot[4] = '<a href="http://andreawalter.blogspot.com/" target="_blank"><img src="indirizzo immagine" height="272" width="978" border="0"> ';
rot[5] = '<a href="http://andreawalter.blogspot.com/" target="_blank"><img src="indirizzo immagine" height="272" width="978" border="0"> ';
index = Math.floor(Math.random() * rot.length);
document.write(rot[index]);

Andrea Walter ha detto...

una nota: chiramente dove scrivo indirizzo immagine va inserito il link dell'immagine..
e il new array in parentesi contiene il numero totale di immagini.
dimmi se si può applicare a un widget
Ciao

Angelo ha detto...

Sempre è un piacere leggere questo blog, ogni volta se ne scopre una nuova! Grande Tenebrae, a presto!

Boby ha detto...
Questo commento è stato eliminato dall'autore.
Boby ha detto...

@ andrea walter: credo tu sbagli con le virgolette, va prima " e poi '

ho sviluppato questo codice da quello che avevo
http://img409.imageshack.us/img409/2541/immaginedw2.png
è semplice e non occorre modificare il template


P.S.: prima non mi riusciva a pubblicare il commento, ho tentato tante volte

Tenebrae ha detto...

in quel pezzo di script bella l'idea del ++ invece che l'incremento manuale dell'indice... però per usarlo come widget bisogna che si trovi necessariamente in un elemento posto nell'header, non può per esempio essere messo in una colonna laterale... ottimo per chi ha un template adatto

andrea puoi prendere quello come riferimento se lo trovi più adatto alle tue esigenze

c4os ha detto...

Tenebrae solo un piccolo appunto, ho appena messo lo script per l'header ma per farlo funzionare ho dovuto cambiare questa riga

document.write("#header {");

con questa

document.write("#header-wrapper {");

col mio template minima

c4os ha detto...

non riesco a mettere l'header cliccabile T.T
se metto questo codice

#header a {
position: absolute;
top: 0;
left: 0;
width: 660px;
height: 160px;

mi va a marengo l'immagine, che appare in alto a sinistra sovrapposta al body.....

Andrea Walter ha detto...

Ciao ragazzi! non vorrei allargare troppo l'argomento, ma ho tagliato un po' la testa al toro e ho appena creato l'header con rotating banner in flash per un sito professionale di fotografia! facendo click sul header si ritorna sempre alla home page!

http://www.enfocofotografia.blogspot.com/

devo dire che provo grande soddifazione! ciao

c4os ha detto...

io continuo ad avere l'header non cliccabile t.t
hai usato il tuo script?

c4os ha detto...

Ok alla fine ce l'ho fatta facendo un merge di questo post con l'altro del rotating banner da template...
Il problema con l'altro era far sparire la scritta (che ho trovato qua) e automaticamente ho da template il rotate banner cliccabile e niente widget tra i piedi...

Tenebrae ha detto...

@andrea: c'è qualche problema con l'oggetto swf, controlla come lo hai embeddato, con firefox mi chiede di scaricare il file

@caos: contento che tu abbia risolto

Andrea Walter ha detto...

@tenebrae: grazie per la segnalazione! ho corretto il codice, avevo usato iframe , ora ho messo embed e va tutto anche su firefox!

Tenebrae ha detto...

@andrea: perfetto :)

Evelina ha detto...

Ciao Tenebrae, magari tu mi puoi aiutare: non riesco assolutamente (e in nessun modo) a modificare l'header del mio nuovo template!!

Sono ancora una principiante e ... un aiutino servirebbe!

Grazie

http://fantavenus.blogspot.com/

kito ha detto...

ciao, a me funziona tutto, soltanto che le immagini si vedono circa la metà in altezza!! le immagino sono tutte circa 700-750 x 200-230 px.. Cosa devo modificare??

Tenebrae ha detto...

@kito: prova a controllare che nell'header non ci sia l'opzione di dimensionamento automatico dell'immagine (lo vedi da layout->elementi pagina, cliccando su modifica nell'header)

Den ha detto...

Invece per fare apparire una scritta sempre diversa ogni volta che si apre il blog come si può fare?
P.S. Naturalmente la scritta non la voglio usare come header, ma come widget.

Tenebrae ha detto...

@den: mi segno la cosa e presto ti farò sapere :)

abdeilah ha detto...

ganzo visitate il mio blog www.aribi11.blogspot.com

Gabriele Gualco ha detto...

Ciao Tenebrae sono riuscito a farlo, benissimo perchè nel blog le foto sono importanti, ma visto il tipo di header che avevo fatto, con due elementi in più, uno sopra uno sotto, ho dovuto modificare top left in center.. tutto bene ma su i. explorer funziona peggio che su tutti gli altri browser.. cosa si può fare per finirla con sti problemi con explorer? tutte le volte che aggiorno fa qualcosa di strano solo lui.. Gabriele

Tenebrae ha detto...

@gabriele: credimi che siamo nella stessa barca, ogni volta che modifico qualcosa mi accorgo dopo che su internet explorer non funziona... ma neanche le cose standard! risolvere il problema? smettendo di usarlo :)

chenmeinv0 ha detto...

ugg sale
cheap ray ban sunglasses
nike roshe run pas cher
clarisonic mia 3
cheap oakley sunglasses
knicks jerseys
moncler sale
michael kors handbags
longchamp bags
louis vuitton outlet online
2016.11.10xukaimin


Prima di lasciare un commento, leggete qui

Posta un commento