Se vuoi personalizzare la pagina di errore 404 di Blogger con il tema Anartisis e renderla più carina ti propongo questa versione numer...
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://sitiweb-tutorial.divento.it/"><b>https://sitiweb-tutorial.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://sitiweb-tutorial.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://sitiweb-tutorial.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.webp"
/>
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.
Nessun commento