Creare una pagina di errore 404 non trovato per Blogger.

Come personalizzare una pagina non trovata per errore 404 per Blogger visualizzata a tutta pagina con link alla Homepage del sito.

Abbiamo già visto come si possa creare una pagina di errore 404 personalizzando il rettangolino grigio che appare quando si digita un URL del dominio che sia inesistente e che mostra la scritta "Spiacenti. La pagina del blog che cerchi non esiste".  Le pagine di errore 404 cioè per pagina non trovata che avevo presentato finora consisteva nell'inserire un apposito CSS su Impostazione > Preferenze di ricerca > Errori e reindirizzamenti > Pagina personalizzata non trovata.  

In sostanza viene visualizzato solo in modo più grande il rettangolo a cui può essere aggiunta una immagine o una scritta. Si può partire però da un altro presupposto e tramite il javascript mostrare un annuncio a tutta pagina con l'informazione che la pagina non esiste e con il link per tornare alla homepage del sito. Si tratta di una modalità molto pulita e di facile installazione. Inoltre possono essere completamente personalizzati tutti i colori presenti nell'avviso agendo sui codici dei colori. Nella demo ho usato dei colori primari non intonati gli uni agli altri proprio per lasciare la più ampia autonomia in questo senso.

Dopo aver salvato il template si va su Modello > Modifica HTML e digitando Ctrl+F si cerca la riga </body> quindi subito sopra a questa si incolla il seguente codice 

<!-- Pagina Errore 404 Inizio -->
<style type="text/css">
#pagina-errore {background-color:#e8e8e8;position:fixed !important; position:absolute; text-align:center; top:0; right:0; bottom:0; left:0; z-index:99999;}
#errore-interno {margin:11% auto;}
#errore-interno .banner-404 {width:500px; height:225px; background:#a81224; color:#fff; font-size:64px; font-weight:bold; line-height:225px; border-radius:10px; margin:0 auto 50px;position:relative;}
#errore-interno .banner-404::after {content:&quot; &quot;; width:0; height:0; bottom:-8px; border-color:#a81224 transparent transparent;border-style:solid;border-width:9px 9px 0; position:absolute; left:47%;}
#errore-interno h1 {text-transform:uppercase; font-size:24px; color:#00f; font-weight:bold;}
#errore-interno p {line-height:0.8em; font-size:20px; color:#f00; font-weight:bold;}
#errore-interno p a{color:#0ff;} /* Colore link */ #errore-interno p a:hover{color:#0f0;} /* Colore link al passaggio del cursore */</style>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<div id='pagina-errore'>
<div id='errore-interno'>
<div class='banner-404'>
 ERRORE 404</div>
<h1>
La pagina che cerchi non esiste
</h1>
<p>
Il post è stato cancellato oppure hai digitato un URL sbagliato
</p>
<p>
Torna a -<a expr:href='data:blog.homepageUrl'>
<data:blog.title/>
</a>
</p>
</div>
</div>
</b:if>
<!-- Pagina Errore 404 Fine -->

Si salva il modello. Il link alla homepage del blog con relativo testo di ancoraggio vengono creati automaticamente con i tag di Blogger. Le dimensioni delle scritte e i colori di background e del testo sono stati colorati di rosso mentre le scritte dell'avviso sono colorate di blu.

Per testare il funzionamento di questa personalizzazione, dopo aver salvato il template, digitate nella barra del browser un indirizzo del tipo nomeblog.blogspot.com/pagina-inesistente.html dove la prima parte deve essere il dominio del vostro sito e la seconda parte un stringa a piacere. 

Fonte | Amor Sevillista -