Designa din Blogg.se

written by Lena on February 13, 2009 in Blogg.se with 196 comments

Jag ger Dig här en lättförståelig och fullständig steg-för-steg-guide i hur Du byter bilder, stilmall, och kodmallar för att Du själv ska kunna lära dig byta design i din blogg. Sist i guiden lägger jag upp varje kod som du kan byta bild i.

En vägledning i enkla och lättförståeliga steg

BYTE AV TEMA (kodmallar + stilmall) OCH/ELLER LADDA UPP BILDER:

Du som precis har börjat att använda Blogg.se är troligtvis inte riktigt “hemma” än i bloggens alla funktioner – se därför gärna denna guide som en första orienterande översikt i mer avancerade lösningar för framtida designbyten. Ni som är vana med blogg.se kan med fördel hoppa över vissa sekvenser i guiden.

Börja med att logga in i din blogg.se

Den allra första sidan som du kommer att hamna på är denna:
bloggse8

Så här ser översikten ut.

bloggse1

Vi ska börja med att kika på hur vi kan ladda upp våra bilder och vi har då två alternativ att välja på.

bloggse11

Ladda upp bild alternativ 1 från genvägar

I alternativ 1 klickade vi på länken “bild” under rubriken “Genvägar”. Du kommer då att hamna på följande sida:

bloggse6

Det första du måste veta är att bilden inte får vara större än 8 MB. Det betyder följande; en gif-bild är i allmänhet större än en png-bild. En jpg-bild är större än gif-bilder och png-bilder. Bildens upplösning (färger och dpi) och storlek kan därför variera beroende på bildformat även om måtten på själva bilden är desamma. Png-bilder som är delvis transparenta stöds dessutom inte av IE 5.5 och IE 6 utan den transparenta delen av bilden blir grå. Se bild (hämtad från artikeln PNG Transparency in Internet Explorer i pcmagazine).

iepng

Nåväl – vi ska gå tillbaka till vår bild och alternativ 1.

bloggse6

Först bläddrar du fram tills du hittar din bild, klicka sedan på öppna. Du ser då bildens filnamn bredvid bläddringsfunktionen. Därefter ska Du ange hur bred din bild är och här kan du välja på allt mellan 100 – 1000 pixlars bredd. Du rullar bara ned gardinen i det vänstra nedersta hörnet och markerar rätt bredd. Sist klickar du på ladda upp bild. Du kommer då att hamna på denna sida:

bloggse9

Det är i detta skede vi kan välja hur vi vill använda vår bild. Antingen så sparar vi helt sonika bilden genom att klicka på spara. Bilden kommer då att placeras i ditt galleri för bloggen. Därifrån kan du sedan välja att använda bilden i framtida inlägg, eller så postar du bilden direkt i din post – välj full/miniatyrstorlek.

Vi ska inte göra något av detta utan vi ska få tag i bildens källadress så vi kan infoga bilden i temat. Klicka därför direkt på bilden för att få bildens absoluta url. Anteckna sedan källadressen på ett papper om du inte direkt arbetar mot din stilmall – kopiera i så fall in rätt källadress för respektive bild i din stilmall.

bloggse10

Gå sedan tillbaka en sida (använd webbläsarens tillbakaknapp) så du återigen kommer hit till “redigera bild”. Klicka sedan på spara bild!

bloggse13

Den sista sidan i hela proceduren du nu kommer till är denna:

bloggse12

Vill Du ladda upp fler bilder klickar du på den gröna länken “Ny bild” och börjar om från början.

Ladda upp bild alternativ 2 från “Skapa”

Om du är någonstans bland bloggens verktyg och vill ladda upp en bild kan du också nå den funktionen via fliken “Skapa”.

bloggse11

Klicka på fliken “Skapa” så kommer följande sida upp:

bloggse5

Klicka på fliken “bild” och du är återigen här:

bloggse6

Därefter följer du samma procedur som i alternativ 1.

Hantera stil- och kodmallar

Det är inte så svårt att byta tema – dock bör du vara van att arbeta med HTML och i viss mån kunna grunderna i CSS. Blir något fel kan det annars vara svårt att reda upp problemet. Ha därför alltid som vana att kopiera de redan befintliga mallarna. Spara dem så du lätt kan byta tillbaka om något blir fel.

Börja med att klicka på fliken “Design”.

bloggse14

Då kommer denna sida upp:

bloggse2

Först ska vi kika på hur vi ändrar eller byter vår stilmall och det spelar ingen roll vilket alternativ du klickar på (redigera stilmall eller alternativt redigera din befintliga stilmall) för du kommer ändå att hamna på samma sida:

bloggse3

Kika på denna exempelkod som finns som standard i stilmallen:

#header {
background: #fff url(http://static.blogg.se/shared/img/css/fashion_top.jpg) no-repeat right center;
padding-left: 30px;
padding-bottom:15px;
padding-top:30px;
margin: 0px 0px 20px;
width: 800px;
height: 55px;
}

Höjden på bilden som ligger högst upp i temat är bara 55px hög. Med andra ord en väldigt liten bild. Här kan du ändra på höjden, exempelvis till 200px om du vill. Använder du detta lite mer avancerade sätt så måste höjden på din bild vara lika hög som antalet pixlar du anger i stilmallen.

Infoga källadresser för dina bilder

Börja med att kopiera eller öppna stilmallen style.css och leta reda på koderna till dina bilder i temat. På följande sätt ska du sedan ska sätta in eller byta dem. Ge bara akt på vilken bild det är som ska infogas eftersom filnamnet kan bli ganska långt.

bloggse10

background:#fff url(http://XXXXXX.blogg.se/images/2008/xxxx.jpg)

Det enklaste sättet att byta bild på är om du kopierar ned bilden som redan finns, granskar hur bred och hög den är, och gör sedan en ny i samma storlek. Du kan även ta en ny bild och klistra in på den som redan finns men du måste ladda upp den på nytt och det innebär också att du kommer få en helt ny källadress till bilden. Byt sedan ut den gamla adressen till den nya. När du är klar med dina ändringar – tryck sedan längst ned på “Spara stilmall”. Klart!

Byte av kodmallar

bloggse15

Tryck på “kodmallar”. Till höger på sidan som kommer upp står det “redigera” + en liten rullgardinslista. För varje kodmall i blogg.se så ska du skapa en ny med samma namn.

bloggse4

Den första kodmallen hos blogg.se brukar vara “Front page” – när du är klar med ändringarna i denna så radera den och kopiera in det nya dokumentet front.html. Tryck på “Spara kodmall”.

bloggse7

Fortsätt sedan att göra likadant med de andra kodmallarna MEN LÄMNA FEED SOM DEN ÄR! När alla kodmallar har bytts ut har du ditt nya tema.

Felsökning vid problem

Ibland kan det komma upp en röd varningstext under rubriken Redigera kodmall och det går inte att spara mallen.

bloggse16

Felet som då har uppstått ligger i att serverscriptet har blivit korrupt – det vill säga programmeringskoderna är brutna – inte HTML-koderna. Du kan till exempelvis ha glömt att avsluta scriptet med </tag:if> eller </tag:entrylist>. Du kan ha lagt in “fel” serverscript i fel template. Av den anledningen är det alltid bra att ha en “originaluppsättning” sparad så du kan granska var och ett av filerna för att se vad det är för kod som blivit fel.

Koder där du kan byta, ändra storlek och bilder i

Koderna som jag här utgår ifrån ligger i temat Fashion, men det spelar ingen roll eftersom samma princip gäller för alla teman. Observera att detta är den mest enkla lösningen. Har du kunskap i css öppnar sig större möjligheter.

body {
margin: 0px;
padding:0px;
background: #FFFFFF url(http://din.blogg.se/images/2008/xxxx.jpg);
}
#wrapper {
clear:none;
margin: 30px auto;
padding: 20px;
width: 830px
background-color: #FFFFFF;  --- här kan du lägga in en bakgrundsbild om du vill med följande kod: background: #FFFFFF url(http://din.blogg.se/images/2008/xxxx.jpg);
}
#header {
background: #FFFFFF url(http://din.blogg.se/images/2008/xxxx.jpg) no-repeat right center;
padding-left: 30px;
padding-bottom:15px;
padding-top:30px;
margin: 0px 0px 20px;
width: 800px;
height: 55px;
}

Tycker Du att denna guide var till nytta? Lämna gärna en kommentar där det är lämpligt. Lycka till!

Liknande poster:

Share with me
Created by disruptive.nu