Se vuoi personalizzare la pagina di errore 404 di Blogger con il tema
Anartisis e renderla più carina ti propongo questa versione numero 2, rispetto
all’articolo che avevo pubblicato in passato.
Esempio Personalizzazione
Errore, pagina NON trovata.
Ti invitiamo ad andare in home page:
e cercare il contenuto in altra maniera.
Error, Page Not found.
We invite you to go to the homepage:
and search for the content in a different way.
—-> FINE ESEMPIO.
Codice Esempio
Spiegazioen codice
Qui di seguito trovi la spiegazione passo passo del codice HTML e CSS che ho
fornito qui sopra per personalizzare la pagina 404 di Blogger.
Parte 1: CSS
Il codice CSS è racchiuso all’interno dei tag
<style> e serve per
stilizzare la pagina 404. Vediamo ogni riga:
-
.error_page .status-msg-wrap {padding-top: 30px!important;
background:none!important;}
Questo selettore stila l’elemento con classe status-msg-wrap all’interno di
un elemento con classe error_page. Aggiunge un padding (spaziatura interna)
di 30 pixel in cima e rimuove qualsiasi sfondo. La proprietà !important è
usata per dare priorità a queste regole rispetto ad altre. -
.error_page .status-msg-wrap:before {background:none!important;}
Questo selettore rimuove qualsiasi sfondo impostato sull’elemento
:before di status-msg-wrap. -
.error_page_lpcus {text-align: center; font-size:200%; font-weight:bold;
line-height: 1em;}
Questo selettore stila gli elementi con classe error_page_lpcus.
Centra il testo, imposta una dimensione del font al 200% della dimensione di
default, impostare il peso del font a “bold” e imposta l’altezza della linea
a 1 em (uguale all’altezza del font). -
#blog-pager {display:none;}
Questo selettore nasconde l’elemento con l’id blog-pager.
Parte 2: HTML
Il codice HTML struttura il contenuto della pagina 404. Vediamolo in
dettaglio.
-
<div style=”text-align: center;”>
Questo div contiene tutto il contenuto della pagina 404 e lo centra
orizzontalmente. -
<p class=”error_page_lpcus”><b>Errore, pagina NON
trovata.</b></p>
Questo paragrafo mostra un messaggio di
errore in italiano, stilizzato con la classe error_page_lpcus. -
<p>Ti invitiamo ad andare in home page:</p>
Questo è un
paragrafo che invita l’utente a visitare la homepage. -
<p><a
href=”https://grafica.divento.it/”><b>https://grafica.divento.it/</b></a></p>
Questo
è un paragrafo contenente un link alla homepage, con il testo in
grassetto. -
<p>Oppure qui puoi vedere la <a
href=”https://grafica.divento.it/p/lista-articoli.html”><b>Lista
di tutti gli Articoli</b></a>.</p>
Questo è un
paragrafo con un link alla lista degli articoli. -
<p>e qui la <a
href=”https://grafica.divento.it/p/lista-etichette.html”><b>Lista
di tutti gli Argomenti</b></a> trattati nel sito.</p>
Questo
è un paragrafo con un link alla lista degli argomenti trattati. -
<div class=”separator” style=”clear: both; text-align: center;”>
Questo
è un div utilizzato come separatore, contenente un’immagine centrata. -
<img border=”0″ data-original-height=”456″ data-original-width=”370″
src=”https://blogger.googleusercontent.com/img/[…]/404-page-not-found.jpg”
/>
Questo è un’immagine di errore 404. - <br />
Un tag per aggiungere una linea vuota.
Il resto del codice ripete il messaggio di errore e i link, ma questa volta in
inglese, per offrire una versione internazionale della pagina.
Questo codice HTML e CSS crea una pagina 404 personalizzata, con messaggi di
errore e link utili per aiutare l’utente a trovare il contenuto desiderato,
prendi spunto e crea la tua pagina personalizzata.
Buon Codice.