Aggiungere la terza colonna a blogger

In tanti me lo avevate chieste, finalmente è arrivato il momento. Quello che vi stò presentando è uno dei tutorial più attesi per chi ha un blog su piattaforma blogger: Come aggiungere la terza colonna in blogger!!

Oggi impareremo ad aggiungere la terza colonna sia a destra che a sinistra, quindi armatevi di pazienza...

La terza colonna a Sinistra.

Andiamo in modello/layout ed espandiamo i widget.

1 - Cerca questa riga:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>

E sostituiscilo con questa

<div id='right-sidebar-wrapper'>
<b:section class='sidebar' id='right-sidebar' preferred='yes'>

2 - Cerca questo:

<div id='content-wrapper'>

E sostituiscilo con quest'altro:

<div id='content-wrapper'>
<div id='left-sidebar-wrapper'>
<b:section class='sidebar' id='left-sidebar' preferred='yes'/>
</div>


3 - Iniziamo a lavorare sui CSS, cerca questo (attenzione il codice può variare leggermente da modello a modello):

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

E sostituiscilo 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;
}

4 - Ultimi ritocchi finali, lo scopo è quello di adattare le misure del nuovo template alla terza colonna.
Cerca:

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

Dove al posto dei puntini trovi un valore numerico che varia da modello a modello. Ora, dove trovi

width:...;

Aumenta il valore di 200, per esempio se il valore è width:600px; allora tu dovrai modificarlo in width:800px; Tutto chiaro?

Adesso hai un problema, vero? L'header è troppo stretto!! Per risolvere... cerca:

#header-wrapper {
width:...;

E, come nel punto precedente, aumenta di 200 il valore all'interno di width:...;

Il risultato finale è questo... dal mio blog di prova!! :D

La terza colonna a Destra.

Andiamo in modello/layout ed espandiamo i widget.

1 - cerca questa riga:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>

E sostituiscila con questa:

<div id='left-sidebar-wrapper'>
<b:section class='sidebar' id='left-sidebar' preferred='yes'>

2 - cerca questo codice:

<div id="content-wrapper">

E sostituiscilo con:

<div id='content-wrapper'>
<div id='right-sidebar-wrapper'>
<b:section class='sidebar' id='right-sidebar' preferred='yes'/>
</div>

3 - Adesso è arrivato il momento di lavorare sui CSS, il procedimento è uguale al punto 3 visto in precedenza, quindi cerca:

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

E sostituiscilo 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;
}

4 - ultima fatica:
cerca:

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

Dove al posto dei puntini trovi un valore numerico che varia da modello a modello. Ora, dove trovi

width:...;

Aumenta il valore di 200, per sempio se il valore è width:600; allra tu dovrai modificare in width:800;

L'header ti risulta troppo piccolo?
Cerca:

#header-wrapper {
width:...;

E aumenta di 200 il valore numerico di width:...;

Ed ecco il risultato finale!!



Alla prossima!!

Fonte: floeste