Come creare una pagina non trovata personalizzata per errore 404.

Come creare in Blogger una pagina personalizzata per Pagina non trovata con Errore 404

Quando non si trova una pagina in un sito si dice che c'è un errore 404 dove il numero indica appunto il codice dell'errore. Da pochissimo in Blogger sono state introdotte le Preferenze di Ricerca che ci consentono di personalizzare la pagina e il messaggio che appare al lettore quando non trova un post perché eliminato o perché l'URL digitato non è corretto.

Di default lo sfondo di questo messaggio avrà il colore #eeeeee che è un grigio molto chiaro. Al momento non ho trovato il modo di modificarlo. Si tratta dello stesso colore del box che appare, quando si clicca su una etichetta, nella pagina che mostra tutti gli articoli con un dato tag.

Questo testo standard qualcuno di voi potrebbe anche averlo tolto seguendo le istruzioni del post su come eliminare il messaggio di visualizzazione degli ultimi post.

Andate su Modello > Backup/Ripristino e salvate il modello completo. Ritornate su Modello > Modifica HTML > Procedi e espandete i modelli widget. Cercate la riga seguente

<b:include data='top' name='status-message'/>

Se non fosse presente incollatela sopra a questo codice (Modello Semplice)

<b:if cond='data:blog.pageType == &quot;index&quot;'>
        <b:loop values='data:posts' var='post'>
          <b:include data='post' name='mobile-index-post'/>
        </b:loop>

Salvate il template. Se invece fosse presente non fate nulla e passate allo step successivo. Andate cioè su Impostazioni > Preferenze di Ricerca > Errori e Reindirizzamenti > Reindirizzamenti personalizzati > Modifica. Si possono incollare fino a 10.000 caratteri in HTML

Un esempio di codice potrebbe essere questo

<div id="errore-404">
<div class="errore-404-1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEseTpSrv9as_OpJHcSOYL95P6Qqh9doWgcG9GPl5ja2tQo_LvCvOg-UP_o14uFOQDgSzuqGZst36TYC7qPRaw6KNwBFVgls2KV085S7MtciHWG345sMcBoaFy4cVyJdEhQkvaBeqTEvs/s256/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://verypretty-blog.blogspot.com'>Vai alla Homepage del blog</a></div>
</div>

dove è stata inserito un collegamento alla homepage del blog, una immagine, del testo e cinque classi di stile differenti per i diversi elementi della pagina non trovata personalizzata. Il testo in blu può essere sostituito da un altro a nostra scelta. L'aspetto della pagina personalizzata sarà questo

Per determinare gli stili dobbiamo inserire i relativi CSS nel modello. Andiamo quindi su Modello > Modifica HTML > Procedi e cerchiamo la riga ]]></b:skin>. Subito sopra incolliamo questo codice

/* Pagina Personalizzata per Errore 404
----------------------------------------------- */
/* 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: 100px;
font-weight: bold;
}
/*CSS del secondo testo */
.errore-404-2 {
color: #008250;
text-shadow:   0  2px  0   #00603b,
                     0  4px  0   #004f31,
                     0  6px  0   #003e26, 
                     0  8px  0   #002d1c,
                     0 10px  0   #001c11,
                     0 12px  0   #000b07,
              3px 8px 15px rgba(0,0,0,0.1),
              3px 8px  5px rgba(0,0,0,0.3);
font-size: 50px;
font-weight: bold;
}
/* CSS del terzo testo */ .errore-404-3 {
padding:20px;
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 24px Trebuchet MS;
border:1px solid #DDDDDD;
border-radius:3px;
border-color: #AAAAAA;
}

Dove possono essere personalizzati i colori delle varie scritte e le dimensioni dei caratteri oltre al bordo del pulsante secondo le regole degli stili dei bordi. Ho anche inserito un effetto tridimensionale che potete utilizzare anche per colori diversi consultando il post su come creare un testo in 3D.

Ora si cerca la riga </head> e, subito sopra, si incolla questo codice 

<!-- Personalizzazione Pagina non trovata -->
 <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style type='text/css'>
.column-right-outer, .column-left-outer, .footer-outer, .feed-links, #blog-pager, #sidebar-wrapper, #footer-wrapper { /* Inserire le classi di tutti gli elementi da nascondere nella pagina di errore 404 */ display: none;
}
.fauxcolumn-right-outer .fauxcolumn-inner, .fauxcolumn-left-outer .fauxcolumn-inner {
border-left: 0px;
border-right: 0px;
}
#main, #main-wrapper {
width: 890px; /* Larghezza totale del blog */margin-left: -25px;
}
</style>
</b:if>

dove deve essere inserita la larghezza del blog e gli elementi che non vogliamo mostrare nella pagina personalizzata. Vengono nascosti tramite il tag display:none e le vari classi possono essere tolte o aggiunte a piacere. L'importante è che siano separate da delle virgole. Nella mia demo ho lasciato l'intestazione del blog, se si volesse togliere anche quella basta aggiungere .header-inner alle altri classi colorate di viola. Per conoscere il CSS relativo a un elemento del blog si può usare Firebug. Finalmente si salva il modello. Ho postato in rete una demo di una

• Pagina personalizzata non trovata - 

Nei prossimi giorni vedremo altre applicazioni pratiche di altre funzioni delle Preferenze di Ricerca.


Aggiornamento: Si può anche modificare il colore dello sfondo del box della Pagina Non Trovata Personalizzata. Occorre andare su Modello > Modifica HTML > Procedi, cercare la riga </head> e incollare subito sopra questo codice

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style type='text/css'>
.status-msg-body {
background-color:#FFFFFF;
}
</style>
</b:if>

dove si può scegliere il colore che più ci aggrada.