Se hai molta fantasia e ti appassiona la grafica sicuramente avrai avuto difficoltà nel scegliere l'intestazione perfetta tra tutte quelle che hai creato...
Con questa semplice modifica del template questo non sarà più un problema in quanto potrai caricare diverse immagini e, ogni volta che qualcuno si sposta da una pagina all'altra del tuo blog, vedrà l'header cambiare.
E' una modifica molto interessante, in quanto crea un effetto "dinamico" e di cambiamento ai navigatori che rimarrà sicuramente impresso.
Attenzione però a non caricare troppe immagini, rischieresti di rallentare di molto la velocità di apertura delle pagine.
Come modificare il template:
1- Vai su Design --> Modifica HTML
2- Fai un backup del template ed espandi i modelli widget
3- Cerca il tag <body>
4- Incolla appena dopo questo codice:
<script type='text/javascript'>
var HeaderImage= new Array()
HeaderImage[0]="URL-IMMAGINE-1"
HeaderImage[1]="URL-IMMAGINE-2"
HeaderImage[2]="URL-IMMAGINE-3"
HeaderImage[3]="URL-IMMAGINE-4"
HeaderImage[4]="URL-IMMAGINE-5"
var random=Math.round(4*Math.random());
document.write("<style>");
document.write("#header-wrapper {");
document.write(' background:url("' + HeaderImage[random] + '") no-repeat left TOP;');
document.write(" }");
document.write("</style>");
</script>Se non dovesse funzionare cambia #header-wrapper con #header.
Se vui inserire più di 5 immagini inserisci un'ulteriore riga inserendo il numero progressivo all'interno delle [ ] e cambia "4*Math.random" mettendo sempre un numero in meno rispetto al numero delle immagini:un'sempio con 8 immagini lo trovi qui sotto:
<script type='text/javascript'>
var HeaderImage= new Array()
HeaderImage[0]="URL-IMMAGINE-1"
HeaderImage[1]="URL-IMMAGINE-2"
HeaderImage[2]="URL-IMMAGINE-3"
HeaderImage[3]="URL-IMMAGINE-4"
HeaderImage[4]="URL-IMMAGINE-5"
HeaderImage[5]="URL-IMMAGINE-6"
HeaderImage[6]="URL-IMMAGINE-7"
HeaderImage[7]="URL-IMMAGINE-8"
var random=Math.round(7*Math.random());
document.write("<style>");
document.write("#header-wrapper {");
document.write(' background:url("' + HeaderImage[random] + '") no-repeat left TOP;');
document.write(" }");
document.write("</style>");
</script>6- Salva e la tua intestazione dovrebbe essere tutta un'altra cosa!
4 commenti:
nel mio blog non c'è < body > :|
Prova a cercarlo usando Ctrl+F.
E' uno dei tag che deve esserci per forza...
ciao io ho un forum http://realstreamingita.altervista.org/
e vorrei inserire nella parte in alto questa immagine come logo del forum solo che non so che codice inserire nel template e in quale soprattutto...
ti sarei molto grato se mi aiutassi.
attendo risposta ciao
Purtroppo non conoscendo altervista non so come esserti d'aiuto. Prova a cercare info in qualche forum dedicato...
Posta un commento