söndag 3 maj 2009

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



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>


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: