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

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.