sabato 13 settembre 2008

Come aggiungere una terza colonna a Blogger

Nella perfezione di un blog è spesso ricercata la possibilità di inserire una terza colonna per sfruttare maggiormente gli spazi a disposizione e inserire più widget e contenuti. Molti preferiscono Wordpress per l'ampio numero di template offerti in questo ambito.

Sebbene Blogger offra diversi vantaggi, sono pochi i modelli accattivanti con tre colonne. Allora perchè limitarci e non inserirne una aggiungendo una modifica al codice Html?!

Suggerisco di fare una copia di backup del codice prima di effettuare qualsiasi modifica così potrete tornare prontamente al modello precedente. Questo è immediato in Blogger, è sufficente andare nella sezione layout/modifica Html e salvare il modello in formato xml sul nostro HD.

Quando avremo bisogno di ricaricarlo si procede alla stessa maniera caricandolo nel blog.

Andiamo ora ad affrontare l'argomento di questo post, ovvero l'aggiunta della terza colonna.

Questa può essere messa sia a destra che a sinistra in base alle nostre esigenze.


1) COLONNA A SINISTRA.

Per prima cosa espandiamo l'HTML al modello "espandi widget".

Spostiamoci nell'ultima sezione "Footer" e fermiamoci nelle prime righe dopo "body".
Cerchiamo la sezione che riguarda il contenuto:

(div id=content-wrapper)

E sostituiamolo con:

(div id=content-wrapper)

(div id='left-sidebar-wrapper)
(b:section class='sidebar' id='left-sidebar' preferred='yes')

(per motivi di scrittura ho utilizzato le parentesi tonde al posto dei normali tag html, ovviamente dovrete sostituirle inserendo le stringhe nel codice. Ora stiamo indicando di aggiungere la colonna a sinistra nel contenuto )

Scorrendo verso il basso facciamo attenzione e fermiamoci dove incontriamo:

(div id='sidebar-wrapper')

e sostituiamola con:

(div id='right-sidebar-wrapper')
(b:section class='sidebar' id='right-sidebar' preferred='yes')


Questo è quanto è necessario fare per sezionare il contenuto. Ora provvediamo a correggere il Css per visualizzare correttamente l'immagine.

I Css sono ovviamente all'inizio della pagina, quindi scorriamo la barra verso l'inizio e lentamente scendiamo verso il basso facendo attenzione ad incontrare per prima cosa "outer wrapper" che è posto poco prima della sezione "Headings" .

Questo valore indica la grandezza totale del Template per adattarlo meglio alle nuove disposizioni.

Per quanto riguarda il mio blog , se vi piace , ho inserito le seguenti misure. In "outer wrapper" , riga "widht" , ho posto il valore 900px (al posto dell'originario 660px per quanto riguarda il mio template di base), come potete osservare sotto:

#outer-wrapper {
background:...;
width: 900px;
margin:...;
text-align:...;
font


Scorrendo ancora più in basso , sotto "main wrapper" , sostituiamo :


#sidebar-wrapper {
width:200px;
float:left;
font-size:85%;
padding-bottom:20px;
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 */
}


con :

#right-sidebar-wrapper {
width: 200px;
float: right;
word-wrap: break-word;
overflow: hidden;
}

#left-sidebar-wrapper {
width: 200px;
float: left;
word-wrap: break-word;
overflow: hidden;
}


Quello che a noi interessa è modificare la grandezza delle colonne in questo caso. I valori che ho inserito sono 220px nella sezione "Width" per ognuna , con lo stesso procedimento fatto prima per "outer wrapper".

Questo è quanto, salvate e vedrete visualizzata la vostra bella colonna a sinistra.

La parte riguardante i Css vale per entrambe le disposizioni delle colonne quindi non reputo necessario descrivere nuovamente il procedimento.


2) COLONNA A DESTRA.

Come fatto per la colonna a sinistra, espandiamo il modello HTML a "widget" e spostiamoci verso il basso fino a incontrare la sezione "footer" .

Sostituiamo:

(div id=content-wrapper)

con:

(div id='right-sidebar-wrapper)
(b:section class='sidebar' id='right-sidebar' preferred='yes')


poi spostandoci verso il basso incontrando:

(div id='sidebar-wrapper')

sostituiamola con questa:

(div id='left-sidebar-wrapper')
(b:section class='sidebar' id='left-sidebar' preferred='yes')


La colonna a destra adesso è inserita ! provvedete a correggere la sezione CSS come ho descritto sopra e il gioco è fatto!!

Un particolare ringraziamento a Yuri e al suo blog "Risorse per Blogger"

Vota il contenuto

Vota il contenuto