Come personalizzare la pagina non trovata in Blogger.

Come personalizzare l'aspetto della Pagina Non Trovata in Blogger per Errore 404 con l'aggiunta di pulsanti e link ai migliori contenuti del sito.

Quando si sbaglia a digitare un indirizzo c'è il cosiddetto Errore 404 di pagina non trovata. Se l'errore di digitazione riguarda il dominio allora si aprirà una pagina di cortesia del provider internet di cui stiamo utilizzando la connessione.

Quando l'errore di digitazione permette comunque di individuare il dominio allora si può parlare di Errore 404 propriamente detto e può dipendere oltre che dall'errore di battitura anche dalla eliminazione di un post da parte di un amministratore del sito. Gli errori di pagina non trovata che dipendono dal proprietario, come nel caso di link sbagliati inseriti nell'articolo, possono danneggiare l'autorevolezza di un sito ed è opportuno sanarli accedendo alla Search Console.

Gli errori di digitazione fatti dagli altri ovviamente non portano nocumento al nostro blog. Se si ha un sito su piattaforma Blogger verrà aperta una pagina vuota con Intestazione, Sidebar, Footer e con la scritta "Spiacenti. La pagina del blog che cerchi non esiste." inserita nella parte alta della pagina subito sotto all'Header con la stessa grafica usata per la pagina delle etichette.

Blogger ha inserito più di 4 anni fa la possibilità della personalizzazione dell'aspetto delle pagine di errore insieme alle altre funzionalità delle Preferenze di Ricerca. Come ho scritto nel post linkato i CSS della pagina non trovata sono gli stessi di quelli del messaggio della pagina delle etichette. Dobbiamo quindi utilizzare i tag condizionali per applicarli solo a determinate pagine. 

 

Con questo tutorial modificheremo l'aspetto dell'avviso della pagina non trovata

cambiandone il colore di sfondo e aggiungendo un testo che permetta al lettore di accedere immediatamente ai contenuti più rilevanti del nostro sito oltre ad aggiungere un pulsante per aprire la Homepage. Tale personalizzazione come vedremo sarà attiva anche per i dispositivi mobili.

Dopo aver salvato il template si va su Modello -> Modifica HTML e si cerca la riga </head> quindi, subito sopra a questa, si incolla questo codice

<!-- Pagina Personalizzata per Errore 404 - Inizio -->
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style>
/* Sfondo */
.status-msg-body {
background:linear-gradient(to bottom, #f9f7f1 12%, #ddd7b8 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#ddd7b8&#39;, endColorstr=&#39;#f9f7f1&#39;,GradientType=0);
}
/* Contenitore generale */
#errore-404 {
padding:20px;
}
/* CSS del primo testo */
.errore-404-1 {
color: #D84938;
text-shadow:   0  2px  0   #d53c2a,
                     0  4px  0   #c73827,
                     0  6px  0   #ab3021, 
                     0  8px  0   #8e281c,
                     0 10px  0   #722016,
                     0 12px  0   #551811,
              3px 8px 15px rgba(0,0,0,0.1),
              3px 8px  5px rgba(0,0,0,0.3);
font-size: 80px;
font-weight: bold;
}
/*CSS del secondo testo */
.errore-404-2 {
color: #008250;
text-shadow:   0  1px  0   #00603b,
                     0  2px  0   #004f31,
                     0  3px  0   #003e26, 
                     0  4px  0   #002d1c,
                     0 5px  0   #001c11,
                     0 6px  0   #000b07,
              1px 3px 5px rgba(0,0,0,0.1),
              1px 3px 5px rgba(0,0,0,0.3);
font-size: 40px;
font-weight: bold;
}
/* CSS del terzo testo */
.errore-404-3 {
padding:18px;
color:#191919;
text-align:center;
font-size:18px;
}
/* CSS del pulsante */
.errore-404-4 {
margin-top:20px;
padding:10px;
display:inline-block;
text-decoration:none;
font: bold 22px Georgia;
border:1px solid #DDDDDD;
border-radius:3px;
border-color: #AAAAAA;
}
</style>
</b:if>
<!-- Pagina Personalizzata per Errore 404 - Fine -->

Si salva il modello. Successivamente si va su Impostazioni -> Preferenze di Ricerca -> Errori e Reindirizzamenti -> Pagina personalizzata non trovata -> Modifica

Si aprirà un campo in cui si potranno incollare fino a 1000 caratteri di codice HTML. Ecco il codice che ho inserito in questo sito e che può servire come esempio

<div id="errore-404">
<div class="errore-404-1"> 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.
Forse il post è stato eliminato o l'URL non è stato digitato correttamente. </div>
<div class="errore-404-4"><a href='http://www.ideepercomputeredinternet.com'>Vai alla Homepage del blog</a></div>
</div>
<div class="errore-404-3">
Puoi anche sfogliare questi elenchi di post:
<ol>
<li><a href="http://www.ideepercomputeredinternet.com/2016/03/elenco-di-1700-post-di-guide-e-tutorial.html">1800 Tutorial per la piattaforma Blogger</a></li>
<li><a href="http://www.ideepercomputeredinternet.com/2015/09/blogger-widget-raccolta.html" >600 widget per Blogger</a></li>
<li><a href="http://www.ideepercomputeredinternet.com/2011/03/i-migliori-menu-per-blogger.html">70 menù per Blogger</a></li>
<li><a href="http://www.ideepercomputeredinternet.com/2010/11/38-siti-in-cui-creare-fotomontaggi.html">38 web app per fotomontaggi</a></li>
<li><a title="Tutorial per WhatsApp" href="http://www.ideepercomputeredinternet.com/search/label/whatsapp">Tutorial per WhatsApp</a></li>
<li><a href="http://www.ideepercomputeredinternet.com/search/label/wordpress">Tutorial per Wordpress</a></li>
</ol>
</div>

Si va poi su Salva modifiche per rendere effettiva la personalizzazione. In tale codice sono state inserite le classi di stile incollate nel modello con il primo codice. Dal tag <ol> al tag </ol> ho anche aggiunto un elenco di link utili al lettore che ha aperto una pagina di errore. 

PERSONALIZZAZIONI DELLA PAGINA NON TROVATA

Nel primo codice ho inserito uno sfondo con il gradiente. Si parte dal colore #ddd7b8 per la parte bassa fino ad arrivare al colore #f9f7f1  più chiaro per la parte alta. Anche nel primo e nel secondo testo oltre ai codici dei colori si possono personalizzare le dimensioni dei caratteri e anche i colori e l'intensità della ombreggiatura. Così come nel terzo testo e nel codice del bottone in cui si può personalizzare anche lo stile del bordo, la famiglia di font e l'arrotondamento del pulsante.

PAGINA NON TROVATA NELLA VERSIONE MOBILE

I casi di pagina non trovata nel mobile sono più rari perché si opera molto più sui link e meno con la digitazione. La personalizzazione però è funzionante anche per smartphone e tablet.