Hvordan lage 3 kolonner i blogger?

Først må man lage bloggen bredere slik at det er plass til en tredje kolonne, personelig liker jeg å ha den 990px (pixler) bred, så personer som har lav oppløsning på skjermen slipper å scrolle sidelengs når de skal lese bloggen.
Denne bloggen har nå 200(venstre kolonne)+ 30(tomrom) +530(midterste kolonne)+ 30(tomrom) + 200( høyre kolonne)= 990 pixler bred.
Hvor bred du vil ha den enkelte kolonnen er opp til deg selv, så lenge det bli 990 totalt.




Denne guiden er for Minima template, andre templates kan ha avikende html koder en vist i eksempelet under men prinsippet er det samme.

Gå til Utforming og Rediger Html.
Ta sikkerhetskopi av bloggen din, kjekt å ha om noe skulle gå skeis.





Del 1:
Først må vi øke bredden på header plassen. Finn følgene kode og endre width:660px; til width:990px;

#header-wrapper {
width:660px; <--------- Endre til 990px
margin:0 auto 10px;
border:1px solid $bordercolor;
}



Finn så Outer/main/sidebar-wrapper (som vist under her) og endre de som anvist.

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px; <--------- Endre til 990px
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px; <----------Endre til 530px
margin-right: 30px; <--------- Legg til denne teksten
margin-left:30px; <--------- Legg til denne teksten
float: $startSide;
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-wrapper {
width: 220px; <--------Endre til 200px
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 */
}


Finn så #footer og endre som anvist:

/* Footer
----------------------------------------------- */
#footer {
width:660px; <-------- Endre til 990px
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;

Nå har vi endret størrelsene vi trenger for å legge til en ekstra kolonne.

Del 2:

Nå skal vi ligge inn den nye kolonnen. Legg inn følgene kode over #sidebar-wrapper som markert på bildet og endre #sidebar-wrapper til float: right;

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


Nå må vi fortelle blogger at vi har lagt inn en ny kolonne og hvor denne skal ligge.
Scroll nesten helt ned og finn følgene felt:


Lim inn følgene kode der hvor det er markert på bildet ovenfor: