La pagina di errore 404 è una speciale pagina web che avverte il visitatore che l’URL del sito o della pagina cercata non esiste.
Generalmente questa pagina viene impostata di default dall’hosting su cui poggia il sito, in altri casi l’hosting non ha una pagina di default per l’errore 404 e perciò il visitatore visualizzerà una pagina definita dal proprio browser.
Esistono diversi modi per personalizzare la pagina 404, l’importante è usare il più adatto:
COME CREARE UNA PAGE NO FOUND PERSONALIZZATA
Quando non si trova una pagina in un sito i browser restituiscono l’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. Il messaggio standard è: Spiacenti. La pagina del blog che cerchi non esiste.
Se non compare nel vostro Blog, è probabile che per errore l'avete disabilitato.
Ora vi mostro come ripristinarlo. Andate su Modello > Backup/Ripristino e salvate il modello completo. Ritornate su Modello > Modifica HTML > Procedi e espandete i modelli widget.
Cercate la seguente riga:
<b:if cond='data:blog.pageType == "index"'>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='mobile-index-post'/>
</b:loop>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='mobile-index-post'/>
</b:loop>
Salvate il template.
⇉ Se volete cambiare modello, ci sono template HTML gratuite che potrebbero rendere la vostra pagina di errore originale.
Basta scaricare i pacchetti e copiare i codici! I più esperti possono anche modificare il testo o aggiungere dei link di rimando alla Home Page! In Blogger potete anche utilizzare il widget 404 personalizzato di Strumenti per i Webmaster per aggiungere al sito una casella di ricerca e altre opzioni di ricerca. Tuttavia è importante ricordare che non basta creare una pagina che visualizza un messaggio 404. È necessario restituire anche il codice di risposta HTTP 404 o 410 corretto.
Per aggiungere il widget 404 alla tua pagina 404 personalizzata, copia il seguente codice e incollalo nella pagina tra i tag <body> e </body>. Ricordati di sostituire l'URL http://www.example.com con l'URL del tuo sito.
Se il codice di ripristino è presente non fate nulla e passate allo step successivo.
Andate su Impostazioni > Preferenze di Ricerca > Errori e Reindirizzamenti > Reindirizzamenti personalizzati > Modifica. Si possono incollare fino a 10.000 caratteri in HTML:
Una volta che avete abilitato l'avviso dovete incollargli dentro lo spazio vuoto questo codice:
<div style="font-size:24px;color:#003366; font-weight:bold;">Pagina non trovata! Adesso verrai trasferito nella homepage dove potrai eseguire una ricerca nel blog. </div><script type = "text/javascript">Cliccate su Salva modifiche.
Becreative_redirect = setTimeout(function() {
location.pathname= "/"
}, 3000);
</script>
Poi aprite una nuova pagina del browser e scrivete nella barra degli indirizzi l'url del vostro blog seguito da delle lettere casuali, proprio in questo modo:
www.esempio.blogspot.com/dibsd
Il risultato sarà un riquadro con all'interno una frase che avvisa che la pagina cercata non è più disponibile e che a breve si verrà spostati nella pagina iniziale del blog dove si potrà eseguire ricerche più accurate.
Il codice inserito precedentemente può essere modificato, in questo modo potete variare la dimensione e il colore della frase, modificare il testo e la durata del tempo della scritta prima di mettere in funzione il redirect.
Nel codice il tempo che è impostato a 3000 millisecondi significa 3 secondi, variatelo in modo proporzionale alla lunghezza del testo impostato.
Se invece della pagina iniziale volete reindirizzare una persona in un post ben preciso, come potrebbe essere l'indice, il regolamento o la pagina di contatto, dovete inserire quest'altro codice:
<div style="font-size:24px;color:#003366; font-weight:bold;">Stai per essere trasferito sulla nuova pagina.</div><script type = "text/javascript">
BeCreative!_redirect = setTimeout(function() {
location.pathname= "/2013/09/titolo-del-post.html"
}, 3000);
</script>
Mi raccomando sostituite la parte di codice che corrisponde a quello del vostro post o della vostra pagina.
Generalmente tutti i pannelli di controllo dei servizi hosting permettono di creare pagine di errore personalizzate. Potete utilzzare questo hack per tutti i tipi di siti, html, php, ecc., anche su WordPress.
Se il vostro server lo consente potete creare un file 404.shtml da aggiungere alla cartella principale del tema, per Blogger usate Reindirizzamenti personalizzati, e al suo interno scrivere il seguente codice:
Fortunatamente WordPress vi viene incontro mettendovi a disposizione vari strumenti per rispondere a questa esigenza.
Un altro originale esempio di pagina personalizzata:
Il codice da copiare è questo:
Se il vostro server lo consente potete creare un file 404.shtml da aggiungere alla cartella principale del tema, per Blogger usate Reindirizzamenti personalizzati, e al suo interno scrivere il seguente codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>MyWeb2.it | La pagina non esiste, errore (404)</title> <style type="text/css"> body { background-color: #efefef; color: #333; font-family: Georgia,Palatino,'Book Antiqua',serif;padding:0;margin:0;text-align:center; } p {font-style:italic;} div.dialog { width: 490px; margin: 4em auto 0 auto; } img { border:none; } </style></head><body> <!-- This file lives in public/404.html --> <div class="dialog"> <a href="/"><img src="http://www.myweb2.it/wp-content/uploads/404.png" / width="490" height="200"></a> <p>La pagina che stai cercando non esiste più....</p> </div></body></html>
Un altro originale esempio di pagina personalizzata:
<div id="errore-404">
<div class="errore-404-1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnDwsFz5RFBfTZYglR5fFx-wLq_JccRINygXSxl6l_dbxYIBjnJhSUO94sk73TahAxXtYxTddFrwPhe7l-TPQ9duoucxeQb1MZbhiPttL35JkbDfibJ6UQUomdoXCRdUmIe9zbdlKSers/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://lullaby-alchima.blogspot.com'>Vai alla Homepage del blog</a></div>
</div>
<div class="errore-404-1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnDwsFz5RFBfTZYglR5fFx-wLq_JccRINygXSxl6l_dbxYIBjnJhSUO94sk73TahAxXtYxTddFrwPhe7l-TPQ9duoucxeQb1MZbhiPttL35JkbDfibJ6UQUomdoXCRdUmIe9zbdlKSers/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://lullaby-alchima.blogspot.com'>Vai alla Homepage del blog</a></div>
</div>
dove è stato inserito un collegamento alla homepage del blog ( dovete sostituire l'indirizzo con quello della vostra homepage!), un'immagine, il 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.
Per determinare gli stili dobbiamo inserire i relativi CSS nel modello.
Andiamo quindi su Modello > Modifica HTML > Procedi e cerchiamo la riga ]]></b:skin>.
Il testo in blu può essere sostituito da un altro a nostra scelta.
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;
}
In questo codice possiamo personalizzare i colori delle varie scritte e le dimensioni dei caratteri oltre al bordo del pulsante secondo le regole degli stili dei bordi.
Ora cercate la riga </head> e, subito sopra, incollate questo codice:
----------------------------------------------- */
/* 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;
}
Ora cercate la riga </head> e, subito sopra, incollate questo codice:
<!-- Personalizzazione Pagina non trovata -->
<b:if cond='data:blog.pageType == "error_page"'>
<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>
<b:if cond='data:blog.pageType == "error_page"'>
<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>
Attraverso il codice viene inserita la larghezza del blog e gli elementi che non vogliamo mostrare nella pagin, nascosti con il tag display:none , così come le vari classi possono essere tolte o aggiunte a piacere.
L'importante è che siano separate da delle virgole. Nel demo c'è l'intestazione del blog, se si volesse togliere anche quella basta aggiungere .header-inner alle classi colorate di viola.
Per conoscere il CSS relativo a un elemento del blog si può usare Firebug.
Ora potete salvare il modello.
Eventualmente, si può anche modificare il colore dello sfondo del box della Pagina 404 Personalizzata.
Occorre andare in Modello > Modifica HTML > Procedi, cercare la riga </head> e incollare subito sopra questo codice:
<b:if cond='data:blog.pageType == "error_page"'>
<style type='text/css'>
.status-msg-body {
background-color:#FFFFFF;
}
</style>
</b:if>
<style type='text/css'>
.status-msg-body {
background-color:#FFFFFF;
}
</style>
</b:if>
potete scegliere il codice colore (in questo caso #FFFFFF ) che più vi piace.
Come modificare gli stili, i colori e le dimensioni dei bordi con l'HTML
Il bordo è una caratteristica presente in molti oggetti presenti nei post.
Basta pensare alle immagini e alle tabelle. Inoltre l'attributo "border" è presente anche nel codice dei template per specificare lo stile di widget, sidebar, linee, post, header e chi ne ha più ne metta. Insieme a questo tag vengono associati anche il colore che dovrà assumere e la sua forma.
I COLORI
I colori sono determinati dal codice HEX o RGB e si tratta di sei cifre esadecimali (HEX) o di una terna di numeri da 0 a 255 (RGB).
Ad ogni colore è assegnata una terna di numeri che va da 0 a 255 nel sistema RGB (Rosso, Verde, Blu), 0 rappresenta il minimo contributo del colore, 255 il massimo.
- 0,0,0 è il colore nero
- 255,255,255 è il bianco
Esiste anche un'altra forma che si basa sui valori esadecimali cioè:
0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F
In questo caso il colore viene contrassegnato da sei valori esadecimali preceduti dal simbolo del cancelletto, p.e.
#222A58
Può esserci la necessità di conoscere questi valori se volete replicare un colore che è presente in una pagina web, in un bordo o in una foto o in un'immagine scaricata.
La conoscenza di questo codice è fondamentale se volete dei colori uguali all'header del blog, oppure per creare dei rettangoli o delle tabelle con i colori più adatti.
La conoscenza di questo codice è fondamentale se volete dei colori uguali all'header del blog, oppure per creare dei rettangoli o delle tabelle con i colori più adatti.
⇨ Potete comunque usare Photoshop o un altro programma di grafica ma se volete qualcosa di più specifico dovete provare
Color Schemer Studio. Il programma non è gratuito ma c'è anche una versione online free che vi aiuta a generare i codici colore più adatti alle vostre esigenze!
IL BORDO
La forma del bordo è invece data da tutta una serie di attributi che vi presento in forma grafica.
Per inserire gli attributi di un bordo in una pagina HTML dobbiamo usare il tag:
style="border: groove #003366; 4px;"
- Gli attributi in rosso determinano lo stile dei bordi: groove, double, ridge, dotted, inset, outset e solid.
- I codici in blu indicano il colore (#003366;) mentre 4px e la dimensione del bordo.
Se volete modificare stile o dimensione dei bordi del vostro modello, andate su Design > Modifica HTML e cercate "border" con i tasti di scelta rapida Ctrl+F.
Effettuate le modifiche e salvate il modello.
- Per eliminare un bordo basta inserire 0px come dimensione oppure si può usare l'espressione border:none;.
Nessun commento:
Posta un commento