Header Ads

Öka eller minska vidden på din blogg

En fråga jag ofta får är hur man gör bloggen bredare eller smalare.

I den här tutorialen utgår jag från Bloggers Minima-mall, om du har en annan mall får du försöka hitta samma eller liknande wrappers. Om du har frågor om just din mall kan du länka till din blogg i kommentarerna så ska jag se om jag kan hitta svaret i din bloggs källkod.

Det är enkelt att fixa själv, du gör så här:



Gå till din bloggs kodmall. Scrolla ner till Header-wrapper.

#header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }
 
Öka  eller minska vidden (width) med så mycket du känner att du vill ha din blogg bredare eller smalare. Kanske 100 eller 200 pixlar?

Gå vidare och öka vidden på Header .description lika mycket.

#header .description {
  margin:0 5px 5px;
  padding:0 20px 15px;
  max-width:700px;
  text-transform:uppercase;
  letter-spacing:.2em;
  line-height: 1.4em;
  font: $descriptionfont;
  color: $descriptioncolor;
 }

Nästa steg är att öka Outer Wrapperns storlek till samma siffra som Header wrappern.

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

Nu behöver du bestämma om du enbart vill öka kolumnen där du skriver dina blogginlägg, alltså Main-wrappern, eller om du vill öka din andra kolumn också.

Du kan inte öka de två kolumnernas storlek med mer sammanlagt än vad du ökade Outer wrappern med. Om du valde 100 pixlar kan du nu öka main och sidebaren med 50+50px (eller med den fördelning du föredrar) men inte mer!

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


Du kan se hur din blogg ser ut under tiden du testar olika mått, klicka bara på Förhandsgranska.
Om det inte blev som du tänkt dig och du inte vill prova mer klickar du på Rensa redigering. Då ser din blogg ut som den gjorde innan du började ändra i kodmallen.  När du är nöjd klickar du på Spara mall.

22 comments:

  1. Vill bara säga att jag har en award till denna blogg som denna blogg verkligen förtjänar om någon =)

    Kram Penny

    ReplyDelete
  2. Hej jag skulle vilja att allt som ligger till vänster om skrivutrymmet låg i en speciell kolumn...alltså inte i samma utrymme som där jag skriver mina inlägg....men vet inte hur jag ska ändra...och framförallt vet jag inte om jag vågar... Vet heller inte om det går! Har du lust att titta in och kolla?
    http://ingersord.blogspot.com/

    ReplyDelete
  3. Ingersord - nu förstår jag nog inte hur du menar? Du har ju en sidebar, en kolumn, till vänster redan?

    Penny - jag måste kika ,D

    ReplyDelete
  4. Hej igen
    jag skulle önska att kolumnen låg i en egen "ruta" så att mina texter syns i ett separat fält...

    ReplyDelete
  5. Tack tack! Du är en ängel.. :)

    Kan inte du skriva lite om hur man kan göra en egen header och hur man lägger in dem på bloggen hos blogspot?

    ReplyDelete
  6. hej! jag skulle behöva hjäp med en grej. kan du kolla denna tjejs blogg: http://enkelts.blogspot.com/ skulle vilja ha samma bredd på bloggen som hon har. skulle vara jättesnällt om du kunde hjälpa mig med det.finns på mullz_@live.se och komentarfältet i bloggen.

    ReplyDelete
  7. Malin - det gick inte att kommentera på din blogg. Tjejen du hänvisade till har en outer wrapper som är 700 pixlar, en mainwrapper som är 600 pixlar och en sidebar som är 80 pixlar.

    ReplyDelete
  8. Hur kan jag fixa så en bild kommer till vänster eller höger i Headern? Inte bakom själva bloggnamnet. Vill också ha den bredare vertikalt!
    Tack, på förhand! :-)

    ReplyDelete
  9. Kan du visa hur man sätter såkallat texten längst till vänster? Just nu är den i centrum och jag vill inte ha det så.

    ReplyDelete
  10. hallå! Varför går det inte att komma in på sidorna? Går ej att hitta sidan står det?

    ReplyDelete
  11. Hej!

    Jag vill få "fullbredd" på inläggen och har provat ovan nämnda lösning men det blir ingen skillnad?! Jag vill också gärna kunna lägga in två bilder bredvid varandra... Jag har minima som grundmall. http://noamajahemma.blogspot.com/

    Vilken fantastisk möjlighet det här var! Tack!
    A

    ReplyDelete
  12. Gör gärna en beskrivning som baseras på de nya mallarna om man vill ha en blogg som överstiger 1000 px

    ReplyDelete
  13. Stort tack för den fina beskrivningen!

    ReplyDelete
  14. Hej! Jag vill göra hela bloggen och allt bredare men hittar inte var jag ska göra det. http://daydreamobsessions.blogspot.se du förstår säkert problemet. Mallen heter Enkel.

    Tack på förhand. /emmaljungberg@live.se

    ReplyDelete
  15. Hej! Jag har försökt att få bort de svarta suddiga kanterna på min blogg, men har inte lyckats. Vet du hur jag ska göra? Vore evigt tacksam om du kunde hjälpa mig. Jag vill helt enkelt att det ska vara helvitt bakgrund. Inga krusiduller alls. Tack på förhand. /Elnaz

    ReplyDelete
  16. Tack snälla för att du är så generös och pedagogisk!
    Jag har haft sån nytta av din blogg sen jag hittade hit :)
    Nu har jag breddat min blogg med hjälp av ditt inlägg här ovan. Jag har tidigare fnulat med html-koder, så jag vågar inte låta allt gå förlorat genom att välja en standardmall...vilket skulle vara enklare egentligen.
    Mitt problem nu är att bloggnamnet ser risigt ut. Kan jag styra var det ska hamna i headern på ngt vis?

    Undrar
    Chris

    ReplyDelete
  17. hej! Jag vill öka bredden på min blogg men hittar inte i mallen var det står "wrapper". Min mall heter "simple".

    min blogg: www.sparvel.blogspot.com
    min mejl: erika_nyberg@hotmail.com

    Tack på förhand!

    ReplyDelete
  18. Jag använder ju Blogspots färdiga mallar numera och då kan man inte ändra i html koderna - man kan göra det enkelt manuellt men jag vill bredda mer - finns det något annat sätt att ändra det på?

    ReplyDelete
  19. Hej!

    Det har blivit nått knas på min blogg. Den ser plötsligt annorlunda ut designmässigt än vad den gjorde igår. Mina gadgetar såsom bland annat presentation, urval av mina texter, bloggarkiv och bloggar jag följer ligger just nu längst ner på förstasidan. Varför? De brukar ligga utmed högerkanten längsmed blogginläggen.

    Har försökt fixa detta under Inställningar och Design, men hittar inte var och hur jag ska göra detta.

    Jättetacksam om du kan hjälpa mig med hur jag ska göra!

    Min blogg hittar du här (så du förstår vad jag menar):
    http://sarasordverkstad.blogspot.com/

    Vänligen,

    Sara

    ReplyDelete
  20. Hej! Jag skulle vilja ändra vidden på min blogg men jag har inte riktigt samma koder tror jag. Headern kan vara lika stor om det blir krångligt att förstora den eftersom den är i en mall, men inläggssidan skulle jag vilja att den var lite större så jag kunde ha större bilder. Hur gör jag? :)

    ReplyDelete
  21. Hej Jakob!
    Jag kikar på just din bloggmall och återkommer med ett svar i din blogg när jag hittat rätt plats i din kod.
    Anneli

    ReplyDelete
  22. Hej Anneli :) Jag har en fråga ang. själva texten i inlägget. Jag skulle vilja ha den i samma bredd som bilderna, alltså att de följer varandra i en linje. Som jag har det nu är texten utanför bilderna. Tror du att jag skulle kunna fixa det här på ett enkelt sätt? Jag tackar ännu en gång för dina fina tips :)

    ReplyDelete

-------------------------------
Lämna gärna en hälsning! Har du en bloggfråga är du välkommen att ställa den på vårt forum. På så vis kan fler svara alternativt få hjälp om de har samma problem. Tack!
Du hittar en länk till forumet högst upp till vänster här på Fixabloggen.
-------------------------------