Pubblicato il 09/03/15e aggiornato il

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.

pagina-errore-404-blogger
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.

demo-pagina-non-trovata-404

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 -




6 commenti :

  1. Ciao Ernesto, come posso inserire i commenti recenti, aggiornati ad ogni post nuovo?
    Grazie e buona giornata.

    RispondiElimina
    Risposte
    1. I widget dei commenti recenti si basano sull'URL del feed dei commenti e si aggiornano automaticamente. Qualche volta ci impiegano dei minuti, più raramente qualche ora ma l'aggiornamento è assicurato
      @#

      Elimina
  2. Ottima soluzione grazie! Il metodo classico con me non funzionava mentre così adesso ho una pagina 404.

    Ma per inserire uno sfondo utilizzando un'immagine come si fa?! Ed è possibile anche inserire altri elementi all'interno della pagina immagino.

    RispondiElimina
    Risposte
    1. Puoi mettere tutti gli elementi che ti pare però devi avere una certa conoscenza di HTML e CSS. Magari scaricati questo ebook gratuito se non ce l'hai
      http://www.ideepercomputeredinternet.com/2012/09/guida-html-ebook.html
      Per mettere una immagine devi incollare questo codice
      <img src="URL_IMMAGINE" />
      al posto delle scritte in blu. Dovresti anche settare le dimensioni
      @#

      Elimina
    2. Ottimo, grazie ancora. Vediamo cosa combino ahahahahahahaha.

      Elimina

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.