Creare tre colonne con Blogger

Desideravo un template a tre colonne e sono molto poco pratico di codice, i vari templates che si trovano in rete, come ad es. qui, non riesco a caricarli... insomma un problema.
Non ci sono scorciatoie vere e proprie, tipo "il tuo template a tre colonne con un solo click", almeno non finché Blogger non deciderà di mettere a disposizione dei modelli a tre colonne, quindi l'unica cosa da fare è armarsi di tempo, pazienza e sperimentare, cercando di capire cosa stai facendo.
In questo articolo scrivo l'esperienza -e la fatica- fatta con molti tentativi ed errori, nell'intento di essere d'aiuto a chi come me non è uno "smanettone" o meglio un "geek".
Ti consiglio di fare delle prove con un modello di prova; diversamente, se vuoi operare su quello che usi, prima salvati il modello scaricandolo (in modo da poterlo ripristinare in caso qsa andasse storto... cosa molto facile :)).

Se come me non sei un praticone, per sapere cosa stai facendo devi avere qualche base -mi perdoneranno gli addetti ai lavori per il mio linguaggio-:
- Wrapper, una porzione della pagina web.
Fondamentalmente, un modello è formato da una main-wrapper (lo spazio dove scrivi i post) e una sidebar-wrapper (la colonna laterale, a destra o a sinistra della main); entrambe, la main e la sidebar, sono contenute nella outer-wrapper (insomma una scatola con degli scomparti, uno main e uno sidebar).
Il nostro scopo è appunto aggiungere un'altra sidebar al modello.
- Gli elementi wrapper hanno una larghezza (width) che è espressa in pixels (px) oppure in percentuale (%). Personalmente ho preferito usare la percentuale, in quanto con questo modo la visualizzazione della pagina si adatta alle dimensioni dei vari schermi.
- La forma (layout) della tua pagina web si trova quindi definita grossomodo in questi tre elementi wrapper (outer, main e sidebar) che trovi in una sezione all'inizio del codice html, che dovrebbe cominciare più o meno così: /* ---( layout structure )---*/.
I comandi dei wrapper da cercare iniziano con # (es.: #outer-wrapper) e il codice spesso varia un poco, quindi non ti aspettare che sia esattamente uguale agli esempi.

Dunque, cominciamo:
Per aggiungere una colonna devi modificare il codice html del modello, andando dalla tua bacheca in "Layout" e poi "Modifica HTML". Non è necessario spuntare la casella "espandi i modelli widget" (almeno, per me non c'è stato bisogno).
Cerca negli elementi #main-wrapper e #sidebar-wrapper la width (tieni presente che la somma delle due wrapper deve essere uguale o meglio di poco inferiore al valore espresso nella #outer) e fai delle prove modificando il/i valore/i e cliccando poi sul bottone anteprima per vederne l'effetto di allargamento/restringimento, in modo da farti un'idea di come dovrà essere la larghezza finale delle colonne.

A questo punto aggiungi una terza colonna al modello: vai a questo link dove è spiegato come fare, non sto a trascriverlo qui (se usi Firefox ti consiglio di lavorare con diverse schede aperte, è molto comodo) sia perchè è un link ad un blog interessante, sia perchè è il più chiaro che ho trovato.

Quando aggiungi la terza colonna, tieni presente che un modo è anche copiare la #sidebar del tuo modello e incollarla subito sotto il testo tra le parentesi graffe, in questo modo:

#sidebar {
width: 17%;
float: $endSide;
color: $sidebarTextColor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar {
width: 17%;
float: $endSide;
color: $sidebarTextColor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

dopodiché aggiungi left- e right- tra il # e sidebar, così: #left-sidebar {..., così avrai dato la forma alle colonne destra e sinistra.

Ti capiterà inoltre di vedere che nel tuo modello c'è "float: $endSide;" mentre nella spiegazione lo trovi indicato come float: right; e float: left;
Non occorre cambiarlo, lascialo come è.

Per finire, devi sapere che un modo comodo per cercare i comandi o il testo all'interno del codice, è usare la ricerca all'interno della pagina: col comando "ctrl+F" apri una barra in fondo allo schermo, dentro cui poi incolli i pezzi di testo da cercare nel codice, senza doverlo scorrere tutto avanti e indietro.

Buon blog!