Pubblicato il 21/09/16 - aggiornato il  | 15 commenti :

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. 

pagina-non-trovata 

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

pagina-non-trovata-blogger

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

preferenze-ricerca-blogger-pagina-non-trovata

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


pagina-non-trovata-blogger-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.


15 commenti :

  1. Se voglio inserire un'immagine o logo sopra la scritta oops!! (tu mi sembra che hai inserito il logo del sito) come devo fare?
    Grazie

    RispondiElimina
    Risposte
    1. Quello che vedi è l'immagine dell'header che viene mostrato sempre sopra al riquadro da personalizzare. Se anche tu hai l'header vedrai quello nelle pagine non trovate. Inserire una seconda immagine mi sembra inutile
      @#

      Elimina
  2. Buongiorno Ernesto!
    Ho inserito un codice HTML nella textarea per la personalizzazione della pagina 404 ma non si vede nulla. Ho un template personalizzato, infatti non vedo nemmeno il messaggio di default "Spiacenti, la pagina del blog che cerchi non esiste". Ma non riesco a capire quale parte di codice devo ricercare nel template per sistemare le cose. Mi puoi aiutare, sebbene le mie indicazioni non siano precise, per favore?
    Grazie in ogni caso.
    Stefania.

    RispondiElimina
    Risposte
    1. Il sito è questo?
      https://unospedalepertharaka.blogspot.com/
      Se sì, ho provato a digitare un url sbagliato e c'è sempre il redirect alla Home invece che l'apertura di una pagina di errore. Probabilmente c'è questa impostazione nel modello che comunque è piuttosto buona
      @#

      Elimina
    2. Grazie per la gentilissima risposta.
      Il sito in questione è questo https://www.gliscrittoridellaportaaccanto.com/

      Elimina
    3. Ha un codice molto complicato in cui c'è anche la stringa error_page che è quella per la personalizzazione della pagina di errore. Probabilmente questo impedisce la personalizzazione della stessa
      @#

      Elimina
    4. Dovrei quindi rimuovere il pezzo di codice relativo alla stringa error_page per personalizzare la pagina d'errore? In alternativa, è possibile fare un redirect generico di tutti gli errori 404 semplicemente alla home?
      Scusa per le domande forse banali, ma sono autodidatta e certe cose ancora non le mastico come si deve ^_^
      Grazie ancora

      Elimina
    5. Non credo che servirà a qualcosa. Purtroppo non ti so aiutare
      @#

      Elimina
  3. Ho un'altra domanda relativa ai reindirizzamenti personalizzati. Nell'immagine che hai inserito in questo post vedo che sul blog in questione i reindirizzamenti sono 60, quindi immagino non ci sia un limite sul numero massimo di reindirizzamenti possibili. Come mai, allora, già un paio di volte quelli che avevo inserito si sono cancellati? E ovviamente li ho perduti. Non ricordando quali fossero, ho così perso anche la possibilità di "aggiustare" i miei link rotti.
    1) Secondo te come mai si sono cancellati?
    2) In questo caso, è possibile recuperare i redirect che avevo impostato?
    Grazie ^_^

    RispondiElimina
    Risposte
    1. Mi è successo che i reindirizzamenti di un blog siano scomparsi dopo che sono arrivato a 100. Presumo quindi che ci sia un massimo di 99 reindirizzamenti per Blogger
      @#

      Elimina
  4. Ciao, a me la search console dà pagina di errore ma la pagina si vede e sto cercando di risolvere il problema

    RispondiElimina
    Risposte
    1. La Search Console dà spesso notifica di errori che poi si rivelano inesistenti
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy