Tutorial CSS: personalizziamo la nostra cache di Google
Quasi dimenticavo il mio impegno per il week end, pubblicare un tutorial. In questo caso specifico voglio continuare a speculare sulla triste vicenda della "Internet Tax" e mi chiedo: ma se domani scadesse il bollo del mio blog, sarei pronto all' emergenza?
Avrei una sola certezza. La cache di Google...
Croce e delizia della blogosfera, la cache di Google ha un terribile enorme difetto. La pagina mostrata (la parte superiore per l' esattezza) è orribile! Esagero? Non credo, ma anche credendoci, perchè non personalizzarla, magari uniformandola al nostro blog.
In questo brevissimo tutorial/giochino vedremo come personalizzare la parte di HTML che Google inserisce di default quando apriamo una pagina registrata nella sua cache. In pratica la pagina mostrata cliccando sul link Copia cache:
Vediamo come procedere partendo da un dato certo. Questo è il codice che Google inserisce di default (chiaramente URL e riferimenti si riferiscono ad una mia pagina) e questo non lo possiamo modificare:
In pratica abbiamo tre tabelle nidificate e possiamo personalizzare tenendo in considerazione questa caratteristica. Nel mio caso il lavoro risulta semplice, non ho utilizzato tabelle per questo template quindi posso sbizzarrirmi con più fantasia; dovete infatti considerare che, nel caso il vostro layout preveda una o più tabelle (table), andrete a modificare in generale i valori relativi (compresi td, tr, font).
Bene, stabilito questo ecco il codice CSS che ho utilizzato nelle mie cache pages:
base {
background-color: #000000;
}
table {
border: 1px solid #000000;
background-image: url(blog-06-07/googlecached.png);
background-repeat: no-repeat;
background-position: right bottom;
background-color: #000000;
color: #FFFFFF;
margin: 0px;
padding: 0px;
}
td {
border: 1px solid #000000;
color: #FFFFFF;
}
table font {
font-size: 11px;
margin-top: 2px;
margin-bottom: 2px;
line-height: 14px;
color: #FFFFFF;
background-color: #000000;
}
table table {
background-color: #000000;
margin: 0px;
padding: 0px;
}
table table center font:after{
content: ".. ma comunque apprezza l' impegno!!!";
color: #FFFFFF;
font-size: 14px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #FF0000;
}
table table center font{
color: #FFFFFF;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
padding: 4px;
font-style: italic;
}
table table table{
background-image: url(blog-06-07/sfondo.png);
background-repeat: repeat-x;
background-position: left top;
}
table code {
font-size: 9px;
color: #999999;
padding-left: 4px;
border: 1px solid #666666;
}
Questa è una delle pagine di questo blog scaricata dalla cache di Google; nel CSS ho caricato due immagini, la prima nella prima tabella è quella principale (nel mio caso l' indirizzo del blog) mentre la seconda nella terza tabella nidificata (table table table{...}) nasconde l' immagine caricata in precedenza e che si applica per ogni tag <table>. Ho inserito anche lo pseudoelemto :after per inserire un messaggio "simpatico"; ovviamente IE non leggerà quel testo aggiunto nel CSS e nemmeno chi lo utilizza...
Il mio consiglio è quello di giocare con il codice HTML (nel senso di personalizzarlo con i fogli di stile perchè altro non potete fare) e valutare attentamente quanto detto in precedenza. Occhio a non "distruggere" il vostro template ;)
|
Permalink |
|
