Ci sono blog che impiegano molto tempo a caricarsi perché sono pieni di immagini pesanti e di widget. In questo caso può essere carino inserire una immagine che mostra al navigatore lo stato di caricamento della pagina che è stata aperta. In rete ci sono almeno un paio di siti che offrono gratuitamente delle immagini a questo scopo.
Ajaxload.info consente di selezionare l'immagine animata che più ci piace da un menù verticale
Si possono selezionare anche il colore di sfondo e quello in primo piano (background e foreground). Si clicca su Generate It per creare l'immagine personalizzata quindi su Download It per scaricarla.
Loadinfo.net funziona con lo stesso meccanismo ma dà immagini più particolari e suggestive. Se ne può configurare anche la dimensione
Si possono scegliere anche i colori di sfondo e in primo piano. Si clicca su Generate per creare l'icona, quindi su si scarica con il destro del mouse come una qualsiasi immagine.
Dopo esserci procurati l'immagine che vogliamo visualizzare nella parte alta del blog quando si sta caricando e averla caricata su un hosting tipo Picasa, SkyDrive o ImageShack, passiamo ai passaggi successivi. Andiamo su Design > Modifica HTML e cerchiamo la riga </head>. Immediatamente sopra incolliamo questo codice
<!--Caricamento Blog Inizio-->
<script type='text/javascript'>
window.onload = ideepercomputer;
function ideepercomputer() {
document.getElementById("ideepercomputer").style.display="none";
}
</script>
<!--Fine Caricamento blog - www.ideepercomputeredinternet.com-->
quindi cerchiamo la riga <body>, se abbiamo un modello vecchio o scaricato da internet, mentre cerchiamo la riga
<body expr:class= …
se abbiamo un modello creato con il Designer Modelli. In ogni caso la riga sarà appena sotto a quella </head> già individuata. Incolliamo questo nuovo codice
<!--Immagine di caricamento-->
<div id='ideepercomputer' style='background:#ffffff;padding:4px;margin-top:10px;margin-bottom:10px;font-family:Arial,helvetica,Trebuchet MS,sans-serif;font-size:14px;text-align:center;'>La pagina si sta caricando...<br/>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNvfALHTwoiGyt6h3jSNTLbMZrzqOid-yZ4Mhx_MCHH2B2s6GHofLP_ptMFjTEPM0MIeq5TQjGm4ZNGggESaZgrOjFpcKNyW2z0PikFbUSiMRbaFM5lTE9sjUN7djzuHyoSzRF9ZNr5QU/'/></div>
<!--Immagine di caricamento - www.ideepercomputeredinternet.com-->
dove i dati in rosso possono essere personalizzati. Sono importanti soprattutto il colore di background, che deve essere uguale a quello del blog, e l'URL della immagine animata che avete scaricato da uno dei servizi illustrati in precedenza. Si può anche cambiare la frase che viene visualizzata
Fino a quando la pagina non si sarà completamente caricata, sarà visibile l'icona animata che indica lo stato del download. Per osservare questo effetto dal vivo andate in questa pagina di demo.
ciao ernesto. Allora io di sfondo ho un immagine, non una tinta unita, quindi volevo sapere se è possibile impostare il secondo codice in modo che non ci sia un colore di sfondo, ma sia trasparente.
RispondiElimina@kevinmaggi
Eliminaprova a togliere
background:#ffffff;
Si funziona grazie mille ernesto!! ;)
Elimina