Pubblicato il 24/03/12e aggiornato il

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

pagina-non-trovata-personalizzazione

Un esempio di codice potrebbe essere questo

<div id="errore-404">
<div class="errore-404-1"><img src="https://lh5.googleusercontent.com/-bOZdyNgHfaA/T22M2g59YDI/AAAAAAAAXFs/Ysrbh3eJZz4/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
pagina-blogger-non-trovata
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
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.





20 commenti :

  1. Ecco, Ernesto, se clicchi sulla tua demo della pagina personalizzata non trovata compare proprio la schermata standard che ti dicevo, e non la pagina creata. Ma come mai?

    RispondiElimina
  2. Molto bello! E proprio grazie al tuo post ho scoperto che il mio blog in caso di link errato non conduce alla pagina 404 ma semplicemente visualizza il blog per intero senza post... come mai? Ho provato ad attivare "Errori e Reindirizzamenti" ma non funziona lo stesso...
    Un tempo visualizzava la classica pagina base 404 di blogger ma adesso nulla...

    RispondiElimina
  3. @GiulianaMosetti
    @NicoNico
    Quando apro la pagina di demo la vedo personalizzata. Non saprei perché a voi non appare. Provate con un altro browser
    http://verypretty-blog.blogspot.com/2012/03/pagina-non-trovata-demo.html

    RispondiElimina
    Risposte
    1. Mistero risolto.
      Quando cerchi la pagina con Google Chrome e Firefox compare, mentre se la cerchi con Explorer appare la schermata standard in inglese. A questo punto vale comunque la pena creare la pagina, per lo meno per gli utenti che utilizzano quel tipo di browsers.
      Comunque la pagina che hai creato è molto carina, grazie :)
      Giuliana

      Elimina
    2. No io non prendo neppure in considerazione IE, uso sempre gli altri browser, ma il mio problema non riguarda il tuo lavoro, perchè infatti vedo perfettamente la pagina 404 personalizzata del tuo sito. Il problema riguarda il mio blog che come dicevo non è in grado di visualizzare a prescindere alcuna pagina di errore, neppure la classica di blogger e non capisco il perchè... se digito un link errato mi rimanda sempre sul blog con l'unica differenza che non visualizza alcun post, ma tutto il resto si...

      Elimina
    3. @NicoNico
      Si tratta di un bug specifico del tuo blog, puoi rivolgerti al forum con la speranza che qualche dipendente Google legga il tuo contributo. Comunque a occhio non mi sembra un grande problema. Anzi in questo modo non importa neppure che tu faccia il redirect per eventuali post eliminati

      Elimina
    4. Si in effetti non serve alcun redirect e la cosa non è poi male :P

      Elimina
  4. Volendo è anche possibile inserire il motore di ricerca creato con AdSense? Nel caso fosse possibile si può usare lo stesso codice di quello che già si sta usando oppure si deve crearne uno nuovo?

    RispondiElimina
  5. Anche io, come Nico, non vedo il messaggio di errore, come non vedo il box delle etichette. Credo dipenda dal fatto che nel CSS ho impostato:

    .status-msg-wrap {visibility:hidden;display:none;}

    Ora per come è impostato il mio blog, mi sta bene non visualizzare il box delle etichette, ma, se possibile, vorrei poter visualizzare il messaggio di errore. Si può fare oppure si è costretti a scegliere tra vedere entrambi i box o non vederne nessuno?

    RispondiElimina
  6. @vinnie--
    Non te lo so dire, bisognerebbe provare. Il vecchio codice se funzionante dovrebbe andare bene
    @Chiara-
    Allo stato la pagina personalizzata ha lo stesso css del messaggio delle etichette quindi se non mostri uno non si vede neppure l'altro

    RispondiElimina
  7. appena impostata la pagina personalizzata , perfetta ho preferito non cambiare niente a parte l'indirizzo della home pagina che è il mio, grazie ancora una volta con le tue spiegazioni è tutto semplicissimo!

    RispondiElimina
  8. @Catrina
    Vedo che l'hai lasciata proprio identica. Secondo me hai fatto bene a lasciare la parte alta con tutto il menù come del resto avevo proposto anche io

    RispondiElimina
    Risposte
    1. grazie del tuo parere , ci tengo visto che sto imparando grazie a i tuoi consigli!

      Elimina
  9. Ciao, ho provato ad inserirla più volte, ma dopo un giorno me la cancella e mi rimette lo stato non impostato, non c'è un modo per inserirla nell'html, in modo che ciò non capiti?
    Ps. anche se non è inerente, alla pagina non trovato, la stessa cosa accade per la descrizione, scompare e si disattiva allo stesso modo.

    RispondiElimina
    Risposte
    1. Fai presente i problemi al forum di Blogger. E' probabile che ci sia un disservizio comune anche ad altri utenti. Chiedi delucidazioni

      Elimina
  10. Ciao, sto personalizzando la pagina errore 404 ed ho seguito questa guida.
    Ho tolto il testo 3D ed ho personalizzato i vari contenuti, tolto i il colore di sfondo ma vedo dei margini destro e sinistro che non riesco a togliere.
    Sapresti dirmi come fare?
    Grazie infinite!

    RispondiElimina
    Risposte
    1. La personalizzazione della pagina non trovata significa in sostanza rendere più grande il rettangolo grigio che viene visualizzato per esempio nelle pagine delle etichette e in cui c'è scritto "Visualizzazione dei post con etichetta .... Mostra tutti i post". Lo sfondo del rettangolo è grigio. Forse ti riferisci ai margini di questo rettangolo che viene ingrandito e in cui vengono inseriti immagini e testo. I margini li puoi allargare o diminuire ma non togliere. Spero di essere stato chiaro. @#

      Elimina
    2. Sei stato chiarissimo!
      Credo però di non essermi spiegata bene ... a me fa vedere solo il margine di destra e quello inferiore di quel rettangolo. Pensavo si potessero togliere dato che non si vedono nemmeno gli altri!
      sewbymarissa.blogspot.it/2013/07/0 questo è l'esempio ...

      Elimina
    3. Non ti so dire esattamente perché si vedano solo quei margini. Prova a togliere dai CSS #errore-404 tutte le righe con border @#

      Elimina
  11. Ciao. Io vorrei sapere se e come posso chiudere l'intero blog di blogger, ma lasciando una sola pagina di saluti creata ad hoc. Grazie.

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.