Migliorare l'aspetto di una pagina con errore 404 su Blogger

Sicuramente avete avuto modo di visualizzare l'errore 404 cercando qualcosa su Google. Esso appare quando un visitatore finisce su una pagina rotta o che non esiste più. Una pagina 404 non è d'aiuto per nessuno, anzi da' l'idea di un sito mal gestito. Su Blogger non appare una pagina d'errore tutta bianca ma un piccolo riquadro con sfondo grigio che presenta la seguente dicitura: "Spiacenti. La pagina del blog che cerchi non esiste." Nel caso in cui cancellate molto raramente i post pubblicati, l'errore 404 in questo caso ha poca importanza ma se pensate ce ne possano essere molti oppure semplicemente odiate quella scritta vi consiglio di mostrare una schermata diversa da quella predefinita per renderla non solo più utile ma anche più coinvolgente.

Questa è la classica schermata che appare sui blog che non hanno apportato delle modifiche:

Se volete cambiarla dovete andare su Impostazioni > Preferenze di ricerca > Pagina personalizzata non trovata ed inserire per esempio questo codice:

<form method='get'>
<div id='search'>
<div class='search'>
<input id='s' name='q' onblur='if (this.value == &#39;&#39;) {this.value = &#39;Search the site&#39;;}' onfocus='if (this.value == &#39;Search the site&#39;) {this.value = &#39;&#39;;}' type='text' value='Inserisci una parola...'/>
<input id='button' style='vertical-align: top;' type='submit' value='Cerca!'/>
</div></div>
</form>

Ed il risultato sarà una casella di ricerca interna (se in passato avete modificato il css di una casella di ricerca vi si vedrà tutta distorta):

In alternativa sempre da Impostazioni > Preferenze di ricerca > Pagina personalizzata non trovata potete mostrare un testo personalizzato, una immagine e addirittura entrambi. In questo campo vuoto potete inserire tutto il codice HTML che volete. Per esempio eccovi un codice che potreste usare e personalizzare (in particolare sostituire il link della homepage con quello del vostro blog):

<div id="errore-404">
<div class="errore-404-1"><img src="http://3.bp.blogspot.com/-8e1o_yCjapg/U_yyZF-Hh4I/AAAAAAAAYmc/xoGp-kfA_C4/s1600/attenzione.png" style="vertical-align:middle;"/> OOPS!</div>
<div class="errore-404-2">Pagina non trovata</div>
<div class="errore-404-3">
Sembra che la pagina che stai cercando non esista su questo sito.<br/>
E' possibile che il post sia stato eliminato o che l'URL non sia stato digitato correttamente. </div>
<div class="errore-404-4"><a href='http://scuolissima.com'>Vai alla Homepage del blog</a></div>
</div>

Il risultato sarà il seguente:

Il testo potete personalizzarle in tutto e per tutto, potete aggiungere uno stile, cambiare il font, aggiungere il grassetto, variarne le dimensioni ecc. Anche l'immagine potete sostituirla con qualcosa di più gradevole.

Inoltre è possibile anche inserire un redirect dalla pagina non trovata alla homepage.