AGGIUNGERE LA TERZA COLONNA A BLOGGER

Il template a due colonne che ho e modificato per il mio Blog è il Minima Dark, creato da Douglas Bowman. Prima di iniziare, vediamo una mappa che ho creato per farvi capire, quali sono le voci che dobbiamo cercare e modificare: Come vediamo dalla mappa, outer-wrapper è il contenitore di tutto il template, cioè, andando a modificare la larghezza (width=LARGHEZZA) di outer-wrapper modifichiamo la larghezza (width) di tutto il template, che contiene l'header-wrapper (intestazione), la colonna di sinistra (left-sidebar), la colonna di destra (right-sidebar) colonna centrale (main-wrapper) ed in fondo si trova footer (piè di pagina). La procedura che seguiremo per modificare il template ed aggiungere la terza colonna è: 1a – header- wrapper 2a – outer- wrapper 3a – duplicare e rinominare la sidebar 4a – footer 5a – ID (identification)

 

Iniziamo...Come prima cosa accediamo a BLOGGER scegliamo Loyout e poi clicchiamo su “Modifica HTML”.

   

1 – cerchiamo la voce header-wrapper e aumentiamo la larghezza (width):

prima	dopo
#header-wrapper { width:660px; margin:0 auto 10px; border:2px solid $bordercolor; }	#header-wrapper { width:900px; margin:0 auto 10px; border:1px solid $bordercolor; }

2 - cerchiamo la voce outer-wrapper e aumentiamo la larghezza (width) da 660px in 900px:

prima	dopo
#outer-wrapper { width: 660px; margin:0 auto; padding:10px; text-align: $startSide; font: $bodyfont; }	#outer-wrapper { width: 900px; margin:0 auto; padding:10px; text-align: $startSide; font: $bodyfont;

3 – cerchiamo il blocco di codice (vedi sotto), che sarebbe la colonna destra: sidebar-wrapper . 

#sidebar-wrapper {
width: 220px;
float: $endSide;

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 */
}

Lo duplichiamo tramite copia/incolla (a - lo selezionate; b- cliccate sopra con il tasto destro del mouse; c – cliccate su copia; d - lo incollate dove finisce il codice appena copiato). Rinominate le due #sidebar-wrapper in #right-sidebar-wrapper(colonna destra) e #left-sidebar-wrapper(colonna sinistra). Sotto c'è il risultato finale: 

#right-sidebar-wrapper {
width: 220px;
float: $endSide;
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 */
}

#left-sidebar-wrapper {
width: 220px;
float: $endSide;
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 */
}

Adesso che abbiamo creato una parte del codice delle due colonne, dobbiamo modificare il loro posizionamento destro/sinistro(right/left), modificando semplicemente la proprietà “float”, grazie alla quale possiamo spostare un elemento su uno dei lati (destro o sinistro) del suo elemento contenitore (outer-wrapper). Sotto c'è il risultato finale:

#right-sidebar-wrapper {
width: 220px;
float: right;
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 */
}

#left-sidebar-wrapper {
width: 220px;
float: left;
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 */
}

Cambiamo anche il posizionamento della float, della colonna centrale “main-wrapper”, modificandola in float: left; Sotto c'è il risultato finale: 

#main-wrapper {
width: 410px;
float: left;
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 */
}

Per avere una distanza uguale tra la colonna centrale(main-wrapper) 

con quella destra (right-sidebar) e quella sinistra (left-sidebar) 

dobbiamo inserire i margini(vedi mappa): 

margin-left: 25px; a sinistra per right-sidebar-wrapper
margin-right: 25px; a destra per left-sidebar-wrapper. 

Perché 25px?

#main-wrapper {width: 410px;
+
#left-sidebar-wrapper { width: 220px;
+
#right-sidebar-wrapper { width: 220px;
=
850px
la larghezza del template è 900px
950px – 850px = 50px / 2 = 25px

Sotto c'è il risultato finale: 

#right-sidebar-wrapper {
margin-left: 25px;
width: 220px;
float: right;
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 */
}

#left-sidebar-wrapper {
margin-right: 25px;
width: 220px;
float: left;
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 */
}

4 – Troviamo la voce footer(piè di pagina) e aumentiamo la larghezza(width): (come abbiamo fatto con header e outer-wrapper) 

prima	dopo
#footer { width:660px; clear:both; margin:0 auto; padding-top:15px; line-height: 1.6em; text-transform:uppercase; letter-spacing:.1em; text-align: center; }	#footer { width:900px; clear:both; margin:0 auto; padding-top:15px; line-height: 1.6em; text-transform:uppercase; letter-spacing:.1em; text-align: center; }

5 – Adesso andiamo a modificare ID(identification): Cerchiamo la stringa sotto:

id="'sidebar-wrapper'"'; id="'sidebar'" preferred="'yes'"'; Cambiamo le due id in blu con id="'right-sidebar-wrapper' e id="'right-sidebar' 

Sotto c'è il risultato finale: 

 

id="'right-sidebar-wrapper'"> id="'right-sidebar'" preferred="'yes'"; Copiamo( tasto destro copia/incolla ) il codice appena modificato e cerchiamo la stringa:

Subito sotto inseriamo il codice appena copiato, modificando id="'right-sidebar-wrapper' e id="'right-sidebar' in id="'left-sidebar-wrapper' e id="'left-sidebar' 

Sotto c'è il risultato finale: 

id="'left-sidebar-wrapper'"; id="'left-sidebar'" preferred="'yes'"; Subito sotto il codice appena modificato inseriamo la chiusura di:

che sarebbero la chiusura del blocco section e div. Sotto c'è il risultato finale e completo:

id="'right-sidebar-wrapper'"> id="'right-sidebar'" preferred="'yes'"; 

Oleeeeeee....con il codice per oggi abbiamo finito... ah dimenticavo...Salviamo il lavoro cliccando su “SALVA MODELLO”!! Di solito, dopo aver fatto delle modifiche nel codice html, sarebbbe prudente(io direi obbligatorio), fare un'anteprima, cliccando su “ANTEPRIMA” prima di salvare il lavoro, ma in questo caso non funzionerebbe, in quanto, la colonna sinistra(quella appena creata), non contiene nessun widget(elemento), è vuota. Ma... pazienza...Adesso andremo ad aggiungere un elemento alla colonna sinistra, cosi possiamo vedere il frutto del nostro lavoro.. 6 – Clicchiamo su “Elementi pagina” ed già qui, se avete fatto tutto bene, vedrete il contenitore della colonna sinistra.

7 - Cliccate su “Aggiungi un GADGET”. Nella finestra appena aperta

scegliete un gadget a vostro piacimento(io ho scelto “Newsreel”,

le news di google. Cliccando sul link del gadget scelto si apre

un'altra finestra dove inseriamo un titolo al widget

(non è obbligatorio, potete lasciare vuoto il titolo)

e clicchiamo su Salva... E alla fine cliccate su “Visualizza blog”

e godetevi la vostra fatica...