mercoledì 18 marzo 2009

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!

Nessun commento:

Posta un commento

Prima di essere pubblicato, il tuo commento sarà soggetto a moderazione.
Ti prego di evitare commenti inutili, offensivi, di spam, o comunque OT.
Grazie

Questo blog non costituisce una testata giornalistica, non ha carattere periodico e viene aggiornato dall'Autore in base alle disponibilita' di tempi e materiali. Non può pertanto considerarsi un prodotto editoriale ai sensi della legge n. 62 del 07.03.2001. L'Autore, inoltre, dichiara di non essere responsabile per i commenti inseriti nei post. Eventuali commenti dei lettori, lesivi dell'immagine o dell'onorabilità di persone terze non sono da attribuirsi all'Autore. Alcune delle foto presenti su questo blog sono state reperite in internet. Chi ritenesse danneggiati i suoi diritti d'autore può contattare l'Autore all'indirizzo marziano.mChiocciolAgmail.com per chiederne la rimozione.

Per pubblicare gli annunci sul blog utilizziamo aziende pubblicitarie indipendenti. Le aziende possono utilizzare questi dati (che non includono il tuo nome, indirizzo, indirizzo email o numero di telefono) sulle tue visite a questo e altri siti web per creare annunci pubblicitari su prodotti e servizi che potrebbero interessarti. Se desideri ulteriori informazioni a questo proposito e per conoscere le opzioni disponibili per impedire l'utilizzo di tali dati da parte di queste aziende, fai clic qui.