Pubblicato il 09/02/11 - aggiornato il  | 19 commenti :

Come alternare degli header diversi in modo casuale nei blog su Blogger.

Come alternare le Immagini della Intestazione in Blogger
La scelta dell'header è una di quelle che caratterizzano maggiormente il blog. Si tratta infatti del biglietto da visita del sito, la cosa che salta subito agli occhi e che può fare la fortuna di un blog. Alcuni sono indecisi su che header scegliere ed è proprio a queste persone che si rivolge questo articolo. Illustrerò infatti come sia possibile visualizzare header diversi in modo casuale. Per rendervi conto di cosa stia parlando andate nel mio Blog di Prova. Se ricaricate la pagina, vedrete di volta in volta una diversa intestazione.
Si tratta del modello Simple, o Semplice detto in italiano, ma la personalizzazione credo che sia facilmente estendibile a quasi tutti i modelli ufficiali e non. Dobbiamo andare su Design > Modifica HTML e cercare il foglio di stile che sovrintende all'aspetto dell'header. Nel modello Semplice è
.header-outer {
  background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
  _background-image: none;
}

La classe è generica ed è determinata da .header-outer. In altri modelli potrebbe essere per esempio questa #header. Dobbiamo caricare su un hosting gratuito come Picasa, Skydrive o DropBox le immagini degli header che vogliamo visualizzare in modo casuale. Dopo averne acquisito l'URL di una di esse, la inseriremo come background nel CSS in questo modo
.header-outer {
  background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx29qbJBtYgQwYG8JFLb5_nA6H_w40p9D8IOuK9EThyX8uRpkx7_QBb97wn9X4AXFnrrUroT0PraQXeyOtokmtZ6jAuJ5UQmopdk0QfgJgDUEbu4Inx6ZfVTtmGoHO2xyKfuy115-G9sj9/") no-repeat left bottom;   _background-image: none;
}
dove è stata aggiunta la riga in rosso con l'URL della immagine evidenziato di viola. Se si salva il modello e si apre il blog, si vedrà l'immagine nella intestazione
immagine header casuale
Adesso cerchiamo la riga </head> e, immediatamente sopra, incolliamo questo codice
<!--HEADER CASUALE INIZIO-->
<script type="text/javascript">
var banner= new Array()
banner[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGHXOz1eGSuuFaLiL12EH0oYVERc9Id0Y69iyj-5p148tjq5RIgl_l15q0rOLB9hXev4Sd6Q4OfwG-cCDXA36WLPbx_ucWqg8-rVwBFrU0dHg00zvNCRUFIy5F4q7G5YT3nlx4NxqQNdwM/"
banner[1]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1Qvhcmve8kRwkAuOM3wLrNLFJdSBbaz8_DKqk3td5gHuvNB3-qWdjw9h_QVO9-AzjXGBGgBJP8RTn06Ip7LhKWEJjMiegoi6Ky9uVgmv3T6w0WPpGSMCsYGwWnRqx2OvDFATe9q0Y-Bmc/"
banner[2]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_khuNX8JxvzatxuJWbi7mM0mBIakOzygFtJ5g0EqMH35zkhLHO5VoHSrreqHwUWsOXY51ZKAJtdyxanmcbEsZ8tkQARxpIqYpZxoE2xm00onvFLhYrsUmaTIkTD-ecpnNzwNLYAPD75mP/"
banner[3]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0Toj8rnmf-xrUk5dusEKyhMOdNPCRAoNOlw3EerqTswXBv6cpVB068mkZVlJU9UWtCzV3UUwJQCbtrGd_5vF94e0FJAe8u6gcUQb0Kju6iSzQi-aVktkzUL9UBzUKddQsooLJ8wxhdYwp/"
banner[4]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0JLhAAwlVROiHaSYqGIvumWTDkSeI0ni7WyaLLeJ88YOqG2kUjtovt63oG4qt0ejrDZgngCmR2O3G7qtIIOBelo3n_A99fEyCtTg5uCpyMgRqPX9turfCCX90LT1VD1ThI4UJBsnx6NmW/"
var random=Math.round(4*Math.random());
document.write("<style>");
document.write(".header-outer {");
document.write(' background:url("' + banner[random] + '") no-repeat left top;');
document.write(" }");
document.write("</style>");
</script>
<!--HEADER CASUALE FINE - www.ideepercomputeredinternet.com-->
Sono presenti gli URL di cinque banner, evidenziati di viola, che saranno visualizzati alternativamente. Tali indirizzi dovranno essere sostituiti da quelli che avete acquisito dal servizio utilizzato allo scopo. Se ne possono inserire anche un numero diverso da cinque, eliminando delle righe o aggiungendone altre utilizzando la stessa sintassi e modificando il numero (4). Se la classe della vostra intestazione ha un CSS diverso, sostituite .header-outer con l'espressione presente nel vostro template. Salvate il modello e i visitatori del vostro blog avranno la sorpresa di visualizzare header sempre diversi.
Osservazione finale: il modello di Blogger è in linguaggio XML quindi, alcune parti di questo codice, subiranno delle modifiche dopo che si è salvato (" diventerà &quot;), la cosa è normale e non provocherà alcun problema.


19 commenti :

  1. IL PEGGIO ha detto...
    Ciao! Grazie mille per questo post. Ho un problema, tuttavia, perché da sotto rimangono sempre il titolo e la descrizione che avevo impostato. Ho provato a renderli trasparenti, ma si vedono sempre, di colore nero, SOPRA le foto.
    Tra l'altro volevo chiederti se bisognasse cambiare qualcosa nella parte dove si impostano titolo e descrizione (fotografia dietro o al posto del titolo ecc).
    Insomma di ruotare mi ruotano i banner, ma sopra ci appaiono il vecchio titolo e la descrizione. Che faccio? grazie

    RispondiElimina
  2. @Andrea
    Segui le indicazioni di questo post
    http://www.ideepercomputeredinternet.com/2011/02/come-inserire-un-widget-html-al-posto.html
    per togliere l'intestazione e lasciare solo il widget che hai inserito. Ogni modello fa storia a sè, è difficile dare delle indicazioni universali. Comunque ricordati sempre di salvare il template prima di procedere. Ciao

    RispondiElimina
  3. grazie parsifal ma in questo modo posso soltanto mettere un widget al posso dell'header. Questo articolo parla di immagini a rotazione nell'header.
    Vorrei che ad ogni refresh l'header cambiasse, sia pure un widget...
    p.s. il modello è quello classico.

    RispondiElimina
  4. @Andrea
    Prova ad andare su Elementi pagina > Intestazione > Modifica e metti la spunta a "Immagine al posto di Titolo e descrizione". Dovrebbe sparire.

    RispondiElimina
  5. sono andrea. Ho risolto in un altro modo, creando un nuovo widget e usando dello script. Per quanto riguarda la questione nell'header, se avessi fatto come hai detto (mettere "al posto di") avrei avuto solo quell'immagine ma non la rotazione. Seguendo questo articolo, quello sotto il quale ho postato, quel problema rimane. Vabbé rimane cmq l'html. Grazie lo stesso

    RispondiElimina
  6. E' strano questo comportamento del template, però con Blogger non si si può stupire di nulla ^:^

    RispondiElimina
  7. Ciao Ernesto, ultimamente sto davvero facendo impazzire la tua testa! xD
    Volevo sapere se c'è un modo per differenziare immagine dell'header nelle pagine statiche...

    RispondiElimina
  8. @Francesco
    Potresti provare a usare i tag condizionali
    http://www.ideepercomputeredinternet.com/2010/11/come-mostrare-o-non-mostrare-widget-in.html
    e inserire un header con le pagine statiche e uno quando non ci sono le pagine statiche. La difficoltà sta nel fatto che i tag condizionali non possono essere inseriti nella sezione b:skin ma solo prima di < /head >
    Dovresti quindi estrarre il CSS dell'header, metterlo tra due tag < style > e < /style > quindi inserire i tag condizionali e incollarlo prima di < /head >
    P.S. Non so se funzionerà ...

    RispondiElimina
  9. Ciao ernesto c'è un modo per cambiare in maniera causale l'immagine dello sfondo del blog? io non ho l'header ho un immagine inderita come sfondo del blog in cui è presente il titolo...

    RispondiElimina
    Risposte
    1. @StefanoVinci
      Concettualmente potrebbe essere possibile utilizzando questo stesso procedimento ma modificando il codice che dipenderebbe anche dai CSS presenti sul tuo template.

      Elimina
  10. modificarlo in che modo? qual'è il codice che definisce lo sfondo del blog? bisognerebbe sostituire .header-outer giusto?

    RispondiElimina
    Risposte
    1. @StefanoVinci
      Esattamente. Al posto di .header-outer dovresti mettere la classe che determina l'aspetto di tutto il blog. Potresti anche provare a creare uno sfondo in questo modo
      .content {
      background: url(url-immagine);
      }
      e poi provare a vedere se funziona con .content

      Elimina
  11. Ciao, grazie per le preziose indicazioni ma le immagini random nel mio blog (e anche nel vostro di prova) non solo non si sostituiscono all'header, come già detto sopra, ma vengono inserite tutte a sinistra, e non centrali.
    C'è un modo per centrarle? Grazie!

    RispondiElimina
    Risposte
    1. @ Skygazer
      Centrare l'header con questo metodo mi sembra complesso. Basterebbe che scegliessi immagini della stessa misura del layout del blog. Ti posto l'URL dell'articolo per centrare l'header, forse può aiutarti
      http://www.ideepercomputeredinternet.com/2011/04/come-centrare-l-dell-o-header-in.html

      Elimina
  12. Ciao Ernesto, pur avendo seguito tutta la procedura la mia header non si aggiorna al ricaricarsi della pagina. Da cosa può dipendere? Il mio modello è live su blog-semplice.

    RispondiElimina
    Risposte
    1. Hai controllato che nel tuo modello ci sia la classe .header-outer ? se lo hai fatto non saprei dirti da cosa dipende
      @#

      Elimina
  13. Grazie mille per questo post .
    Ce una problema le immagini si carica lento rispeto al sito e prima si nota un sfondo bianco poi compare immagini come si puo sistemare questa cosa.
    Grazie buona giornata.

    RispondiElimina
    Risposte
    1. Il JavaScript applicato agli header è necessariamente più lento a caricarsi soprattutto se le immagini sono pesanti
      @#

      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