Lägg till en kolumn i Minimas bloggmall - redigerat inlägg!
Många bloggare som använder Blogspots grundmall Minima vill lägga till en extra kolumn i sin bloggmall. Det är inte speciellt svårt, men kräver att man går in i kodmallen och ändrar på en del siffror och lägger till en bit kod.Så här gör du:
Gå till din bloggs Layoutläge, Redigera HTML.
Scrolla ner till Header.
Här ändrar du vidden (width) från 660 pixlar till 1000 pixlar.
Scrolla vidare ner till Header Description
Här ändrar du max-vidden (max-width) från 700 pixlar till 1000 pixlar.
Gå ner till Outer Wrapper, ändra vidden från 660 pixlar till 1000 pixlar.
Scrolla vidare ner till Main Wrapper
Här ändrar du vidden (width) från 410 pixlar till 480 pixlar
(vi vill ju inte att våra bloggposter ska se ihopklämda ut mellan de två sidokolumnerna)
Scrolla ner till Sidebar-Wrapper
Här lägger du till koden:
margin: 0px 10px 0px 5px;
Scrolla ner till Footer
Här ändrar du vidden (width) från 660 pixlar till 1000 pixlar
Nu är det dags att lägga till den första koden för vår nya sidebar. Den ska ligga mellan Outer Wrapper och Main Wrapper, då du får scrolla upp en bit igen.
Vi döper den till left-sidebar eftersom den ska ligga till vänster om din main wrapper, alltså den kolumn där du skriver dina bloggposter.
Koden du ska klistra in ser ut så här:
#left-sidebar-wrapper {
width: 220px;
margin: 0px 35px 0px 0px;
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 */
}
width: 220px;
margin: 0px 35px 0px 0px;
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 */
}
Nu är det dags för den sista koden att klistras in.
Scrolla ner till Content-wrapper eller sök efter orden med hjälp av Ctrl+F.
När du kommer ner dit ser du att varje wrapper i din blogg har ett eget litet stycke med sitt id och innehåll. Din nya sidebar sk ligga precis ovanför Main Wrappers stycke.
Man bestämmer kolumnernas läge i bloggmallen genom att skriva den kolumn som ska ligga längst till vänster (startside) först/överst. Längst till höger (enside) ska alltså ligga längst ner.
Klistra in följande kod ovanför Main Wrappern:
<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>
<b:section class='sidebar' id='left-sidebar' preferred='yes'>
<b:widget id='BloggerButton1' locked='false' title='' type='BloggerButton'/>
</b:section>
</div>
Förhandsgranska nu din blogg och se efter om du fått en ny kolumn med ett Bloggermärke.
Detta märke/sidelement kan du enkelt plocka bort via din bloggs Layoutläge efteråt.
Om det stämmer, spara kodmallen.
Nu ska ditt Layoutläge se ut så här:
Hej!
ReplyDeleteJag gjorde tre kolumner och det gick bra men när jag sedan skulle ta bort bloggermärket så förändrades hela bilden i layout läget. Det blev två kolumner som blev jättebreda. Som tur var kunde jag följa dina instruktioner och få tillbaka tidigare läge. Vad gjorde jag för fel?
Hm, låter konstigt. Det var i Layoutläget sa du? Annars försvinner ju en kolumn i bloggens synliga läge tills man lägger in något i den nya sidebaren, men det är nog inte det du menar?
ReplyDeleteHör av dig om du vill ha hjälp att lägga in den andra sidebaren! amas_1@hotmail.com (finns länkat högre upp på bloggen också)
hejsan, allt gick kanon. men hur gör man för att få båda sid kolumnerna på samma sida? så som du har. har testat lite själv att försöka ändra men det blev helknäppt!
ReplyDeleteTestade du att flytta det sista kodstycket i inlägget - alltså div-id - ner under div-id main-wrappern? Så att main ligger längst till vänster? Ev kan man behöva flytta om de första koderna också så att de ligger i rätt ordning, de högre upp i mallen under Outer Wrappern.
ReplyDeleteMan behöver också justera float och margin så att det inte blir för stora mellanrum och en sidebar ev halkar ner under eftersom den inte får plats. Det är lite pill med allt som du förstår, men visst går det!
hmm, nee det testade jag inte :P är ingen expert på det här.. vet inte om du redan gjort det men skulle vara jätte gulligt om du gjorde ett inlägg om hur man gör exakt! :)
ReplyDeleteHej!
ReplyDeleteGjorde ett nytt försök men då försvann hela innehållet i min vänstermeny (på bloggsidan, inte i layout läge) Jag fattar ingenting. Struntar i den tredje kolumnen. Gillar verkligen dina instruktioner, de är lätta att följa. Får testa något annat. :)
Hej om jag ändrar så jag får 3 kolumner kommer mina inlägg och gadgets etc att försvinna så jag måste göra dom på nytt
ReplyDeleteJag följde anvisningarna och det funkade superbra tack så mycket!!!
ReplyDeleteTack så mycket! En föredömligt tydlig och pedagogisk instruktion. Din blogg är en guldgruva för oss med obefintlig kunskap om kod.
ReplyDeleteKeep up the good work!
Det ser rätt ut på min blogg men i layoutläget har jag bara två kolumner. Alla sidelementen ligger till vänster fast de är på högersidan i den färdiga bloggen. Dessutom är det väldigt tätt mellan mittdelen och högersidan. Jag tror jag mailar en skärmdump till dig...
ReplyDeleteHej!
ReplyDeleteTack för underbara instruktioner :)
Till och med jag tycker att det är kul att ändra i koderna.
Om jag vill ha headern bara över texten och inte över annonserna på sidan hur gör jag då?
Sen skulle jag vilja ha textdelen bredare och flytta upp om mig till den vänstra kolumnen.
Mycke blev det :)
Om mig flyttar du i bloggens Layoutläge. Det är bara att dra gadgeten dit du vill ha den.
ReplyDeleteDu kan ändra headerns vidd i Redigera HTML-kodläget. Om du nu har bytt vidden till 1000 pixlar då du la in den tredje kolumnen kan du enkelt minska ner antalet pixlar igen till den bredd du vill ha. Testa dig fram till vilken bredd som känns rätt genom att förhandsgranska innan du sparar mallen.
Jag provade instruktionerna på en testblog och det funkade bra. När jag sedan skulle prova på min riktiga blogg då gick det inte alls bra.
ReplyDeleteJag kunde inte se mer än lite av högersidan av min blogg och resterande var vitt. Läste i instuktionerna om att flytta det sista kodstycket, ändra på pixlar för att få plats, men jag lyckas inte.
Eftersom jag inte har någon aning om hur och vad man kan prova med mer, så känns det ganska hopplöst att få dit en tredje kolumn för mig.
När jag väljer förhandsgranska så blippar min sida upp för en kort sekund för att sedan vara helt borta. Jag blir trött.
Vad gör jag för fel?
Tack, tack och tack! Jag fixade det till slut. Jag utgick först från mallen som redan hade en kolumn till höger. Detta slutade med att jag hade två kolumner till vänster. Jag fick börja om med den mall som hade kolumnen till höger från början och då gick det bättre...
ReplyDeleteSedan jag försökte följa era instruktioner att lägga till en tredje kolumn har jag problem med att alla gadgets har ramlat över på vänstra sidan i min layoutbild, och de fem översta ser jag inte alls (kan alltså inte redigera dem, eller lägga till en ny). I verkligheten ligger alla gadgets på högersidan på bloggen och någon vänsterkolumn finns inte.
ReplyDeleteJag mailade en skärmdump och bad om hjälp till amas_1@hotmail.com den 26 september men har inte fått svar - är det någon annan mailadress jag ska skicka till? Jag behöver verkligen hjälp! (och allt funkade tills jag försökte följa den här instruktionen...)
/Helen
Hej, nej ditt mail kom inte fram? Måste ha blivit något tokigt på vägen. Kan du prova igen och skicka med din inloggningsadress och ett tillfälligt lösenord ( det skaffar du via Anpassa, Mitt konto i navbaren ) så ska jag logga in och se vad som blivit tokigt och se om jag kan rätta till det. Ibland är det bara någon liten miss i koden, ett par tecken på fel plats, som ställer till det, ibland är det ngt sidelement som påverkar. Men, det här fixar vi!
ReplyDeleteJag gjorde om allt - voila fungerade det utmärkt! Tack!
ReplyDeleteJättebra! Visst blir man glad när det funkar! :-)
ReplyDeleteOm vi börjar med den sista frågan.
ReplyDeleteKolumner ligger ju från vänster till höger. Man börjar läsa från vänster, precis som man börjar läsa en text uppifrån. För att bloggen ska kunna läsa i vilken ordning kolumnerna ska komma läser den "högst upp i kodmallen = längst till vänster" "2'a i kodmallen = i mitten" (vid tre kolumner)och "sist i kodmallen = längst till höger" Så enkelt är det :-)
Ang din bakgrund från blogcrowds vet jag inte, jag får nog kika på din bloggs källkod. Jag lämnar en kommentar på din blogg - lättast så. (om du länkat till bloggen, jag har inte kollat ännu)
mvh Anneli
Hej!
ReplyDeletePrecis den information jag letade efter.
Tror att jag följde dina instruktioner, men när jag skall in och ordna sidelementen ser det ut så här
http://www.xtraining.se/dokument/blogg/sidelement.jpg
Igår fick jag problem med att min högra meny ramlade ner under alla inlägg så nu med den 3:e kolumnen så är den inte överdrivet snygg.
http://mattiasogren.blogspot.com/
Vad kan jag ha gjort för fel med kolumnerna och vad kan ha hänt med den högra menyn?
Hej igen
ReplyDeletenu ger jag upp jag får inte till det, först när jag ska ändra på följande:
Scrolla ner till Sidebar-Wrapper
Här lägger du till koden:
margin: 0px 10px 0px 5px;
så sparas (koden som jag ska ändra) det inte...?och jag vet inte om det är det som gör att det inte händer något
Min blogg som jag fösöker testa med är
http://livetsljuvastunder.blogspot.com/
Lisa
Himmel, vilken underbar sida! Du verkar ju helt otroligt duktig! Precis den här informationen jag behöver. Ska ta mod till mig och prova att få till tre kolumner. Hoppas, hoppas...
ReplyDeleteHälsningar, Charlotta
http://cesarstradgard.blogspot.com
Vilken bra sida för en som har inte är så bra på detta. Men kan man bara få 3 kolummner på minimas? Jag har inte den och vill hemskt gärna ha en höger kolumn som jag kan lägga upp div gadgets.
ReplyDeletehälsningar
Cecilia
C - det går bra i alla bloggmallar, men man kan behöva anpassa koderna och måtten efter den mall man har. Det som gäller är att testa, testa och testa...
ReplyDeleteFörhandsgranska hela tiden så har du koll på vad du gör och kan rensa din redigering om det blir tokigt. Jo, och spar en kopia av mallen innan du börjar! Viktigt!
Hej!
ReplyDeleteJag har med din hjälp fixat så att jag har tre kolumner. Men så la jag in ett bildpel med hjälp av photobucket(också ditt tips). Jag ville ta bort deras länk och det såg bra ut i förhandsgranskningen. Kruxet är att jag inte såg hela bloggen. Då upptäckte jag att min högra sidebar lagt sig under mainwrappern.Footerwrappern är kapad till hälften.Nu har jag alltså två kolumner igen.
Vad har hänt?
Det funkade bra för mig. Men skulle vilja ha rounders mallen? Funkar de här instruktionerna även på den?
ReplyDeleteHej! Måste säga att detta nog är den bästa sida jag hittat! Tusen tack för alla tips! Jag har en liten undran. Jag har lagt till ett flertal "undersidor" till bloggen. På dessa har jag lyckats dölja gadgetar som bara skall synas på första sidan. Men man kan ju änndå inte utnyttja hela bredden på de övriga sidorna. Går detta problem att komma åt? Vet inte om jag förklarade underlit men men =)
ReplyDeleteÅh, vilken fantastisk sida du har! Har redan lyckats fixa till lite grejer i min blogg, jättelätt med din hjälp! TACK för att du gör den här hjälpbloggen! =)
ReplyDeleteHej!
ReplyDeleteEfter att jag har gjort ändringen, så blir kolumnen inte vit, utan är i min bakgrundsfärg, vad har jag gjort för fel?
Mvh
Caroline
Löste problemet själv med att klistra in background-color:#ffffff;
ReplyDelete:)
Fungerade alldeles utmärkt!
ReplyDeleteTack!!
Gick jättebra... Tack.... vill gärna veta hur jag ändrar på rubrikens bild... den bildjag lägger in är för stor.....
ReplyDeleteDet gick bra att lägga till tre kolumner. Men min header flyttades till vänster. Hur får jag den centrerad igen?
ReplyDelete/Stina
Bilden blev centrerad då jag la in en ny bild som header. Men problemet är nu att headern blir så stor, nästan fyrkantig efter att jag dit tre kolumner. Vill ha den mer långsmal. /Stina
ReplyDeleteSuperlätt och pedagogiskt.
ReplyDeleteDu är min idol. TACK:)
Superbra beskrivning! Har tvekat länge om jag fixar det men med dina instruktioner gick det superbra! Ändrade till och med själv lite på bredder mm! *impad*
ReplyDeleteHej!
ReplyDeletejag vill lägga till en spalt på högersida så jag kan lägga in mina intragrambilder, facebok, och annat på sidan.Jag bloggar på blogg.se hur gör jag då?