Blogspot-tips: Hvordan lage tre kolonner
Noen få timer etter at jeg skrev om denne posten så ble jeg gjort oppmerksom på at blogger har kommet med noe nytt!
Du kan nå få tre kolonner helt uten å fikle i kodene. Det er ikke helt stabilt og fungerer ikke på alle nettlesere, men muligheten er der altså. Les mer her om blogspots nye mal-valg.
________________________________________________________
Posten ble i mars 2010 fullstendig omskrevet med klarere illustrasjoner. Håper den nå er enda enklere å følge.
Gi meg gjerne tilbakemelding om det er noe i forklaringen som er uklart og kan gjøres bedre.
Denne posten handler om hvordan du kan sette til en tredje kolonne i din blogspotmal, med utgangspunkt i minimamalen. Det er ikke direkte vanskelig, og du trenger ikke kunne noe som helst om HTML, men krever at du er nøyaktig og ikke får fnatt av å stirre på HTML koder.
Dette ser kanskje langt og vanskelig ut. Men grunnen til at det ser så langtekkelig ut er fordi jeg har vært helt absurd detaljert med forklaringene slik at alle skal kunne få det til. Så ikke la lengden på posten avskrekke deg!
Jeg har delt gjennomgangen inn i tre trinn, slik at det forhåpentligvis virker mer forståelig. Jeg anbefaler at man lagrer mellom hvert ledd, det gjør det enklere å forstå hva man eventuelt har gjort feil. Dersom det blir feil, og du ikke skjønner hva du har gjort feil så gå helt tilbake til start og prøv på nytt. Det er ofte lettere enn å finne igjen det lille kolonet som er på feil plass.
Oppfordring: Det er ganske smart å prøve seg frem på en testblogg først, før du setter i gang å endre selve bloggen din… Her kan du lese om å opprette testblogg og skjule den i profilen. Når du har fått det til på testbloggen så kan du gjenta det på ekte bloggen din. Dessverre kan du ikke kopiere over hele malen, da blir det tull med endel av gadgets (hele lenkelisten kan slettes, sur erfaring…).
Lure triks:
* Kopier = marker teksten du skal kopiere, høyreklikk og velg kopier.
* Lim inn = sett markøren der du skal lime inn, høyreklikk og velg lim inn.
* Finn = Trykk ned tasten ctrl og F samtidig. Det kommer nå opp en egen boks, eller et felt øverst eller nederst på nettleseren. Skriv inn et nøkkelord og trykk søk, du vil nå bli tatt til et sted i teksten hvor ordet står. Smart dersom du ikke finner igjen der jeg er i forklaringa.
* Lilla/rosa markere noe som skal endres i dette trinnet.
* Blått markerer noe som er endret i dette trinnet.
* Gult er brukt for å fremheve deler av teksten for å lette orientering (finne igjen hvor jeg er i koden)
Gjennomgangen er delt inn i tre trinn:
1. Forberedelser
2. Øke bredden på malen.
3. Sette inn den tredje kolonnen
Til sist finner du også litt om hva som er vanlige feil man kan få.
.
1: Forberedelser:
* Lagre en kopi av malen
Gå til Tilpass – Utforming – Rediger HTML
Trykk der det står Last ned hele malen
Nå har du en mulighet til å gå tilbake til malen slik den var før endringene. Men vær oppmerksom på at dette kun er malen, ikke selve innholdet som feks innholdet i lenkelistene.
Det er smart å ha en slik kopi, men om du følger veiledningen her nøye så skal du ikke få noen problemer.
Gå til * Endre malen til Minima
Tilpass – Utforming – Velg ny mal
Sørg for at du har valgt en av minimamalene i den første bolken som vist her, altså enten Minina, Minima Dark, Minima Blue eller Minima Ochre. Denne gjennomgangen fungerer kun dersom du har valgt en av disse fire, ingen andre maler. (Det vil si at du feks ikke kan velge Minima Left eller Minima Stretch)
Dersom du mener du allerede har valgt rett minimamal, så er det allikevel tryggeste er å velge malen på nytt, for å være 100% sikker på at du har rett mal.. Men det vil slette eventuelle endringer du allerede har gjort på malen (som feks endret bakgrunnsfarge mm).
* Fjerne Blogger-logo-knapp
Gå til bloggens forside og se om du ser en logo som ligner på denne. Dersom du ser den så trykker du på det lille symbolet på høyre side og sletter den. Dette er viktig! Dersom du starter ut med denne lille logoen så får du ikke til å legge til den tredje kolonnen ettersom jeg bruker logoen i den nye kolonnen.
.
2. Lage bloggen bredere:
Først må du lage bloggen din bredere slik at det er plass til den tredje kolonna.
Hvor bred blogg skal du ha? Vel, nokså mange har fremdeles en skjerm som er 1024 pixler (px) bred, så bør du trekke fra litt for nettleserens grafikk, og det gir deg en maks bredde på bloggen på 990 pixler. Dersom du gjør den bredere må en høy andel av leserene dine skrolle sidelengs, og det er slitsomt.
Når du skal tenke ut hvor brede de ulike kolonnene skal være så må du regne. Du har totalt 990px som skal fordeles på hovedfelt, to sidefelt og marg.
I denne gjennomgangen bruker jeg tallene:
150 + 20 + 600 + 20 + 200 = 990
Hele bloggens bredde, (outer-wrapper) er 990px,
Hovedfeltet, (main-wrapper) er 600
Venstre sidefelt, (left-sidebar-wrapper) er 150px
Høyre sidefelt, (sidebar-wrapper) er 200px
Marg er 20px
Andre mulige fordelinger er:
250 + 20+ 550 + 20 + 150 = 990
200+ 30 +530 + 30 + 200 = 990
100 + 20 + 660 + 20 + 190 = 990
150 + 20 + 650 + 20 + 150 = 990
Det er enkelt å endre bredden på de ulike kolonnene i ettertid, jeg anbefaler deg å starte med en av mine anbefalte for å fjerne en mulig feilfaktor. (Det er fort gjort å regne/tenke feil)

Gå til Tilpass – Utforming – Rediger HTML
Midt på skjermen får du nå opp et lite vindu.
Dette vinduet må du bla (scrolle) i for å finne frem til de ulike elementene du skal redigere. Illustrasjonene under viser hvordan det ser ut nå, hva du skal endre, og hvordan det skal bli seende ut. Det er viktig at du er nøyaktig og gjør akkurat som det står, pass på å ikke slette noe du ikke skulle slette, eller sette inn tekst på feil sted.
Start øverst, bla deg nedover til du finner elementer om ser omtrent likt ut som dette, og endre der det er markert at du skal endre.
oooOOOooo
oooOOOooo
Sånn, det var dett! Trykk på Lagre mal før du går videre.
.
3. Sett inn den tredje kolonnen
Nå skal vi gjøre fire ting.
* Sette inn marger
* Endre på orienteringen til det eksisterende sidefeltet
* Sette inn nytt sidefelt
* fortelle bloggen hvor det nye sidefeltet bor.
oooOOOooo
Sette inn marger og endre orientering:
Gå tilbake til seksjonen for Outer-Wrapper
Sett markøren rett etter 600px; og trykk enter. Du får nå ett linjeskift.
Du skal nå sette inn marg mellom hovedfelt og sidefelt, det vil si luft.
Lim inn teksten under:
margin-right: 20px;
margin-left: 20px;
I Sidebar-wrapper (ikke i main!!) skal du nå endre orientering på sidefeltet.
Du skal endre fra $endSide; til Right;
Right;
oooOOOooo
Du skal nå sette inn den nye kolonnen:
Du er fremdeles i Outer-Wrapper.
Der det er markert i teksten under setter du inn ett linjeskift og limer inn denne teksten:
#left-sidebar-wrapper {
width: 150px;
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 */ }
oooOOOooo
Du skal nå fortelle bloggen hvor den tredje kolonna skal ligge:
Bla deg nedover i teksten, ganske langt ned finner du det ommerådet som er markert i bildet under, se etter nøkkelordene jeg har markert i gult. Det kan være at det står mere tekst hos deg enn her ettersom eventuelle Gadgets dukker opp i malteksten – så ikke la deg forvirre av det. Det i gult skal være identisk.
Sett inn linjeskift der det er markert i teksten
Lim inn dette:
1 2 3 4 5 6 7 8 9
<div id='left-sidebar-wrapper'>
<b:section class='sidebar' id='left-sidebar' preferred='yes'>
<b:widget id='BloggerButton1' locked='false' title='' type='BloggerButton'/>
</b:section>
</div>
oooOOOooo
Du er nå ferdig med oppsettet i malen, trykk Lagre mal
Gå til bloggens forside. Du skal nå ha tre kolonner, den til venstre på skjermen er nesten tom men har en bloggerknapp i seg. Gå nå til
Tilpass – Utforming – Sideelement
Du kan nå klikke på gadgets/sideelement som ligger i den gamle kolonnen å trekke over i den nye. Og du kan legge til helt nye gadgets. Du kan nå også slette den bloggerknappen. Den er kun der fordi man ikke får lov å opprette en kolonne uten innhold.
Ferdig!
oooOOOooo
Håper du hadde glede av gjennomgangen :)
Jeg skriver disse gjennomgangene fordi jeg synes det er fint at andre kan få style bloggene sine slik de ønsker. Jeg blir derfor svært glad om dere forteller andre om denne gjennomgangen, enten det er i en bloggpost eller på forum eller andre steder!
Jeg blir også veldig glad for tilbakemelding i kommentarfeltet, der er alltid hyggelig å se at folk bruker denne gjennomgangen, og det er trivelig å kunne besøke dere og kanskje bli kjent med en ny blogg :)
Vanlige grunner til at ting blir feil:
* Dobbelt opp av den samme gadget: Dersom du ikke har slettet en eventuell bloggerlogo før du starter på å endre malen så kan du få en feilmelding som denne: “Kunne ikke lagre malen – Flere enn en widget ble funnet med ID: BloggerButton1. Widget-IDer skal være unike”
Du kan da gjøre en av to ting. Ta vekk den aller siste tekstbolken du limte inn, den som har overskriften «Du skal nå fortelle bloggen hvor den tredje kolonna skal ligge:» Lagre malen. Gå til bloggens forside. Let til du finner logoen, slett logoen, gå tilbake til malen, (og du, ikke hopp frem og tilbake i flere faner, du må åpne malen på nytt etter at du har slettet i bloggen, ellers så får jo ikke malen med seg at du har sletta). Sett inn det siste leddet igjen, og du skal nå få til å lagre.
* Feil mal. Er du heeelt sikker på at du har en av de fire minimamalene jeg har oppgitt i starten?
* Du har ikke vært presis nok når du har endret teksten. Det er viktig å lime inn på rett sted, og hele koden, og slette det som skal slettes. Dette er html/css, og den greier ikke tenke selv og må ha alt nøyaktig slik det skal være. Det er ikke tilfeldig om det står kolon eller semikolon.
* Du har for brede kolonner.
Dersom du opplever at en av kolonnene ikke synes på bloggen, skroll deg helt ned og se om den har havnet under hovedfeltet. Har den det så er det fordi det ikke er plass til den. Se over tallene dine en gang til, det er viktig at alle kolonner og marger ikke overskrider totalbredden på bloggen.
* Du har misforstått noe i forklaringen, og er helt sikker på at du gjør noe rett, mens du i realiteten gjør noe feil. Jeg jobber hele veien med å få forklaringen presis, men det er vanskelig å ta høyde for alt. Dersom det befinner seg en annen datakyndig i huset så kan du jo be de om å se over for deg og se om de kan se hva du har gjort feil?
* Det kan også være at noe har blitt feil fordi Blogspot har endret på noe, eller fordi det har skjedd noe rart med teksten her i forklaringa. Begge deler har hendt, og det er derfor viktig at dere forteller hva problemet er når dere har forsøkt alt annet, slik at jeg kan få funnet ut av hva det er og rette gjennomgangen så den blir rett.
- Noe er feil, og du skjønner ikke hva eller hvordan fikse. Hva skal du gjøre?
Mitt aller beste råd er å starte helt på starten igjen. Velg malen på nytt, slett bloggerknappen, og følg gjennomgangen superøyaktig en gang til. Dersom du har forsøkt dette, og fremdeles får en feil så kan du gjerne be om hjelp. Beskriv da så godt du greier hva som går feil, og legg igjen adressen til bloggen du forsøker å endre. (lim den gjerne inn i kommentaren)
Jeg hjelper gjerne, men jeg har begrenset kapasitet, så det er svært viktig at dere virkelig har forsøkt selv før dere ber om hjelp ;)
Jeg svarer stort sett her i bloggposten, og av og til på mail i tillegg. Det er sjelden jeg svarer i kommentarfelt på bloggen til den som spør da det er mest hensiktsmessig å ha dialogen her så andre bloggere kan lese de også.
























24 februar 09
Det har nå gått et år siden denne posten ble til, og i dag (12 mars) publiserer jeg en helt ny og forbedret utgave av den. Hele posten er skrevet om med nye illustrasjoner, slik at den skal bli enda enklere å følge.
Jeg må nesten påpeke at en hel del av de 140 kommentarene under her referer til problemer som ikke lengere er relevant. Men les gjerne de kommentarene som er relativt nye (altså aller nederst). Der kan du se at folk får det til, og du kan se hva andre har spurt om tidligere.
– denne kommentaren er tilbakedatert slik at den blir stående øverst på kommentarlista –