Rotating Banner, ovvero un'immagine sempre diversa nell'header del blog


imageSe avete letto il post sugli oltre 1000 header presenti su Free Web Page Headers, è probabile che vi siate messi lì davanti a pensare: "metto questo?", "metto quest'altro?". Anche la mia ragazza l'ha fatto. Bene, perchè scegliere? Usateli tutti! Tramite una piccola modifica al codice html del template, è possibile far sì che l'header cambi ogni volta che caricate una pagina del blog, scegliendolo a caso tra un elenco che avete voi stessi fornito.

Prima di entrare nel dettaglio, vi ricordo che per pubblicare l'header potete usare Skydrive o Imageshack, e vi suggerisco di fare il backup del template.

Questo articolo è stato richiesto da Andrea: sebbene lui abbia trovato una soluzione al problema, non ha ottenuto esattamente l'effetto che voleva. Gli ho proposto una soluzione veloce via mail e stasera mettendomi con calma a studiare il problema espongo questa soluzione più metodica.

Avvertenze e modalità d'uso

  • L'intervento che sto per descrivere è particolarmente adatto ai template che nell'header hanno solo l'immagine  (come appunto il blog di Andrea) e non titolo e descrizione. E' comunque possibile utilizzarlo nei template con titolo/descrizione, ma questi vi verranno sotto l'immagine e inoltre dovrete togliere l'immagine dall'header (se l'avete inserita da Layout->Elementi pagina) sennò verranno visualizzate entrambe.
  • Sto studiando la soluzione migliore per i template con titolo/descrizione, e appena sarò soddisfatto dei risultati lo pubblicherò. Avrei voluto pubblicare entrambi i metodi in questo post ma non ho ancora ottenuto l'effetto che volevo (sono un perfezionista per queste cose).
  • Controllate che il vostro blog abbia la larghezza adatta ad ospitare l'immagine. Se per esempio l'immagine è di 800 x 200, il template deve avere una larghezza di 800 o più (bisogna modificare l'#outer-wrapper di solito, maggiori informazioni le trovate qui). 

Modifichiamo il template

Andiamo in Layout->Elementi pagina e cerchiamo la seguente porzione di codice:

<b:includable id='description'>
  <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
  </div>
</b:includable>
<b:includable id='main'>

Per individuarla, premete CTRL+F e cercate la stringa <b:includable id='description'>.

Subito sotto la porzione di codice incollate le seguenti righe:

<div style='padding-bottom:3px; padding-top:3px;text-align:center;'>
<a href='indirizzo del vostro blog'>
<script type='text/javascript'>
var banner= new Array()

banner[0]=&quot;<img src='immagine1'/>&quot;
banner[1]=&quot;<img src='immagine2'/>&quot;
banner[2]=&quot;<img src='immagine3'/>&quot;
banner[3]=&quot;<img src='immagine4'/>&quot;

var random=Math.round((banner.length-1)*Math.random());

document.write(banner[random]);
</script></a>
</div>

sostituendo:

  • indirizzo del vostro blog con l'indirizzo del vostro blog, nel mio caso http://creareblog.blogspot.com
  • immagine1, immagine2, ecc con l'indirizzo delle vostre immagini

Dovrete inserire una riga di questo tipo:

   banner[0]=&quot;<img src='immagine1'/>&quot;

per ogni immagine che vorrete visualizzare, ricordandovi di modificare il numero che ho evidenziato in rosso, seguendo la progressione come nell'esempio sopra.

Finito.

Per realizzare questo post ho raccolto informazioni da diversi siti, in particolare:

ai quali si potrà fare riferimento per approfondimenti.

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!

17 commenti:

Andrea Walter ha detto...

Grazie per il post! è molto bello avere il rotating banner nel blog!

viviana ha detto...

Ciao tenebrae (ma non ti posso chiamare con un nome meno oscuro????)
Per una volta non ti chiedo aiuto, ma vorrei essere io a darti qualcosa: passa sul mio blog a ritirare il tuo premio ;)

Andrea Walter ha detto...

leggendo il tuo blog mi sto proprio appasionando all'argomento e oggi mi sono comprato un libro sul css!

Tenebrae ha detto...

andrea, credo sia uno delle cose più belle che un autore di blog possa leggere... ma non credere che io sia un esperto di css o grafica web, anzi... sto imparando anch'io, in realtà questo blog nasce proprio dalle ricerche in rete che avevo cominciato per creare tutt'altro blog, ma visto che l'argomento mi aveva appassionato e vedendo le difficoltà a cui in genere va incontro chi si avvicina a questo mondo (in fondo io sono pur sempre un programmatore, qualche marcia in più per capire queste cose ce l'ho) ho deciso di provare ad aiutare a capirci di più anche agli altri... e alla fine ho abbandonato l'idea dell'altro blog ed è nato questo :)

ma ti dico sinceramente che sto imparando io di più da chi mi legge, perchè mi proponete sempre cose molto particolari, che diventano motivi per imparare qualcosa di nuovo

ok basta... rimani sempre nei paraggi mi raccomando!

Anonimo ha detto...

Il tuo blog è bellissimo ed utilissimo.
Mi diresti come fare per l'header rotante su myblog?
Grazie mille in anticipo.
Paty

Tenebrae ha detto...

Mi dispiace, non conosco myblog, mai usato... magari col tempo se ci saranno più domande su myblog, potrei cominciare ad approfondirlo, ma al momento no :(

ZiaBoby ha detto...

io utilizzo un altro codice, però questo è di gran lunga migliore, permette anche il collegamento, cosa che mi è impossibile fare con quello che sto utilizzando adesso.

Tenebrae ha detto...

Grazie boby, il tuo commento è stato apprezzatissimo, visto che prima di pubblicare un post provo tutte le possibili varianti esistenti e inesistenti di un codice... e commenti del genere sono la ricompensa per lo sforzo :)

ZiaBoby ha detto...

ma questo codice può essere inserito solo nella template e non come widget?

Tenebrae ha detto...

teoricamente può essere inserito come widget, dovrei provare

c4os ha detto...

attendo trepidante il metodo per il template titolo+descrizione..
o magari un sistema per cambiare quella parte di codice del template ottenendo un header solo per immagini..

Anonimo ha detto...

sono sisifo
ti sto lasciando un pò di commenti a secondo degli argomenti interessanti k trovo.posso chiedere una cosa.sul mio template di blogger sand dollar pensi che posso inserire accanto al titolo una header?o devo aspettare con impazienza il tuo prossimo post.
ciao grazie del commento.(Purtroppo ci sono diversi lavori inutili....dipende tanto anke da chi ti sta intorno...)

Unknown ha detto...

conosci un codice html per lo sfondo rotante?

La Cantastorie ha detto...

ciao!!!
avrei un problemino, ma prima di tutto vorrei ringraziarti perchè sei la risorsa n°1 per un blogger!
detto questo proverò a spiegarti il mio problema.
ho modificato il codice HTML come hai suggerito ma purtroppo il Roating Banner sembra non voler proprio collaborare...
questo è l'indirizzo del mio blog:
http://lacantastorie.com
spero tu possa darmi una mano
grazie mille per tutto :)

La Cantastorie ha detto...

pardon mi sono accorta che il link al mio blog l'ho digitato in modo errato (per una volta che non ho fatto il copia incolla U.U) cmq ecco il link preciso
http://lacantastorie.blogspot.com
grazieeee

Sarah Tognetti ha detto...

Ciao Tenebrae
sei la mia unica speranza. Ho provato a fare un sacco di modifiche, provato a cambiare il modello da minima a minim left e altri. Ho provato a copiare ed incollare lo stesso codice html di un altro dei miei blog, ma niente da fare, in questo nuovo blog non riesco a caricare un'immagine nell'header, cioè un'immagine al posto del titolo del blog! Cosa faccio prego la madonna? Ti prego rispondimi, altrimenti non oso neanche a scriverci su questo blog perchè prima di postare devo modificarlo e renderlo anche a 3 colonne e ho paura di perdere tutto! Se vuoi ti do anche le mie password per entrare direttamente nel codice e vedere cosa c'è scritto, ad esempio ho notato che questa porzione di codice "b:includable id='description..." non esiste! Aiuto! Sarah
ShabbyChicInteriors.blogspot.com
P.S. Ho aggiunto il tuo mini banner al mio blog...quello che va!

CS ha detto...

Ciao Tenebrae, perdonami se lascio questo mio commento, non proprio attinente con il tema del post. Vorrei cambiare la veste grafica del mio Header; per essere preciso vorrei NASCONDERE e non eliminare il titolo e la descrizione del blog, inserendo al suo posto una immagine (con titolo e descrizione blog). Vorrei nasconderlo, ma renderlo comunque visibile a Google e ad altri motori di ricerca per far si di non perdere posizioni. Navigando nel web ho notato che per Wordpress questa modifica si può fare inserendo
L’attributo “visibility: hidden;” in header h1 e in header description. Mi chiedo se facendo questa modifica in blogger vado incontro a qualche penalità e se è possibile farlo.
Ti prego, chiarisci questo mio dubbio.
Ciao .


Prima di lasciare un commento, leggete qui

Posta un commento

Nota. Solo i membri di questo blog possono postare un commento.