Personalizzazione delle tre colonne inserite nella parte bassa del blog su Blogger.

Come personalizzare nei colori e nei caratteri le tre colonne inserite nel footer di un blog su Blogger.

Nel precedente articolo avevo parlato di

      - Inserimento di tre colonne nella parte bassa del blog -

Adesso pensiamo a come si può personalizzare le colonne in funzione delle altre sezioni del blog. Per quanto riguarda questo blog per esempio dotted lo sostituisco con dashed perché il bordo tra il post e la sidebar è formato da delle linee tratteggiate. Per quanto riguarda il colore di queste linee prendo quello di default del blog.

Il codice è stato così cambiato

#footer-columns {
border-top:1px dotted #999999;
clear:both;
margin:0 auto;
}
metto le seguenti righe

#footer-columns {
border-top:2px dashed $mainTextColor; clear:both;
margin:0 auto;
}

In rosso sono visualizzate le modifiche effettuate. Oltre che a dotted (linea punteggiata) e a dashed (linea tratteggiata) possiamo scegliere anche altri attributi come solid, groove, ecc.
Se si sostituisce border-top con border il bordo sarà visibile sull’esterno di tutta l’area bassa del blog. Se invece si aggiunge 

border-bottom:2px dashed $mainTextColor;

si creerà un bordo tratteggiato anche nella parte bassa di 2 pixel.
Per personalizzare i colori possiamo inserire, proprio sotto il codice di cui abbiamo parlato in questo momento, il seguente codice aggiuntivo

#footer-columns h2 {
margin:5px 0 5px;
font-family:Trebuchet MS, arial, verdana, sans-serif;
font-size:22px;
font-weight:normal;
line-height: 1.4em;
text-transform:none;
letter-spacing:.1em;
color:#1A2865;
}

In cui le parti in rosso possono essere ovviamente personalizzate. Sono particolarmente importanti la dimensione (22px) e il colore (ho inserito quello dei titoli dei widget del mio blog).
Per cambiare anche il colore del testo basta aggiungere la riga in rosso (ovviamente personalizzata) alla prima sezione di codice

#footer-columns {
border-top:2px dashed $mainTextColor;
clear:both;
margin:0 auto;
color:#1A2865;
}

Si può anche inserire un colore di background nel settore delle tre colonne. Occorre aggiungere questo codice
background:#C6FFFF;
dopo #footer-columns { . Ovviamente il codice del colore in rosso va scelto seguendo i colori del nostro blog.

Si potrebbero fare ancora molte cose ma ne voglio sottolineare solo altre due. La prima è quella di inserire i comportamenti e i colori per i link attivi, link visitati e quelli puntati con il mouse.
Andate su Layout > Colori e caratteri e procuratevi i codici esadecimali di

1. Colore link
2. Colore link visitato

poi cercate il seguente codice a:hover { andando su Layout > Modifica HTML, pigiando su F3 e guardate cosa dice il foglio di stile. Nel mio caso si trova

che significa che se il mouse punta un collegamento ad un testo o una immagine questo genera una linea tratteggiata rossa nella parte bassa. E’ chiaro che per uniformità amcje nelle tre colonne in basso inserirò lo stesso comportamento.
Adesso create il seguente codice personalizzato

#footer-columns a {
color:#0000FF;
text-decoration:none;
}
#footer-columns a:visited {
color:#800080;
text-decoration:none;
}
#footer-columns a:hover {
color:#8B4513;
text-decoration:underline;
}

dove al posto dei colori presenti avrete inserito quelli del vostro blog individuati nel modo indicato.
Tale codice va inserito sotto questo codice o un altro simile se lo avete già personalizzato

#footer-columns {
border-top:1px dotted #999999;
clear:both;
margin:0 auto;
} 

La seconda cosa riguarda le percentuali della larghezza di ciascuna colonna. Ci sono due percentuali per ogni colonna per un totale di sei percentuali. Per un blog dal layout stretto dovrebbero andare bene queste; cioè 31%, 32%, 31% per lo spazio interno e 32%, 33%, 32% per quello esterno. Se si ha un modello largo come questo si possono sostituire rispettivamente con 31%, 33%, 31% per la parte interna e 32%, 33%, 32% per quella esterna. Si può agire anche sul padding cioè sui pixel di margine tra la colonna e i widget che sono inseriti al loro interno.

Forse ho incasinato un po’ le cose e allora per renderle più chiare potete vedere in questa pagina come si presenta il complesso del codice che ho inserito in questo blog al di sopra della riga

]]></b:skin>

Potrebbe essere un’idea inserirlo totalmente e successivamente personalizzare colori, background (che nel mio modello non ho inserito), percentuali, padding e link.