Designa din Blogg.se

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:

196 Comments Add yours

  1. Jennifer says:

    Hej! Jag undrar hur man byter färg på texten?

    1. Lena says:

      Hej!
      Hur man byter färg på text finns att lära sig i mina guider. Läs guiden 10 lektioner om css. Mvh/Lena

  2. linus says:

    hej, har suttit i 3 timmar men de fuar inte 🙁 du har inte lust att bara logga in på min blogg om du får lösenordet och klistra in bilden där den ska va ?

    1. Lena says:

      Hej!
      Nej jag orkar inte, jag har varit i farten i 3 dygn så nu måste jag få ta igen mig. mvh/Lena

  3. Hej 😀
    Beskrivnigen va as bra, Men när jag trycker på “förhandsgranska så e den som den ska vara ! Men sen när jag trycker på “spara” så är koderna kvar med headern ändras inte ! vad ska jag göra ?

    1. Lena says:

      Hej!
      Kan du utveckla detta lite mer, det är lite svårt att förstå vad du menar.
      mvh/Lena

  4. Dafie says:

    Hej, jag försökte lägga upp din design Dragonfly och allt fungerar jättebra FÖRUTOM kodmallarna. Jag hittar ingen kodmall i mappen, det finns dokument som heter front, arkiv, entry och så vidare, men de öppnas i webbläsaren och där finns inga koder. Hur ska jag göra?

    1. Lena says:

      Hej!
      Du får öppna upp mallarna i en texteditor, alternativt att du sparar om dem i textformat.
      mvh/Lena

  5. Tilda says:

    Hej, jag har försökt i timmar genom att byta header och tema i min blogg.. Men jag kan verkligen inte, ingen aning om hur man gör.. kan man få hjälp?

    MVH

    1. Lena says:

      Hej!
      Tyvärr har jag ingen möjlighet eller tid att hjälpa till.

      mvh/Lena

  6. Stephanie says:

    Hejsan! Det är krångel för andra att kommentera min blogg. Varför är det det? Vad ska jag göra? det står: “bloggen flyttad eller avslutad ” när man ska kommentera. Vet du vad man ska göra så kan du gärna svara på min mail stephanienilsson@live.com
    Tack 🙂

    1. Lena says:

      Hej!

      Prova med att kopiera in koderna igen från ett standardtema. Har du rört i dom så kan det ha blivit fel.
      //Lena

  7. stefanny says:

    Hej!

    Jag öppnar txt filerna med word o väljer då att den ska visas i htlm format men det blir fel. Allt blir fel och när jag öppnar den med textredigeraren så blir det inte rätt heller utan den visar bilder o fet text osv men inga koder.

    Hur ska jag göra? Jag använder mac.

    tack på förhand!
    S

    1. Lena says:

      Hej!
      Det är bättre att du öppnar den med anteckningar, notepad eller att du laddar ned HTML-kit. Då slipper du sådana här problem.
      mvh/Lena

  8. Azra says:

    Jag förstår inte, mallen det är så svårt. Hittar inte vart jag ska lägga in den! får panik och vill börja gråta.

    1. Lena says:

      Hej! Ta det bara lugnt. Vilken mall rör det sig om och beskriv ditt problem mer ingående.

  9. Sara says:

    Hej hej! Har förstått hur jag lägger in min egen banner i header, så länge e ja me, bilden kommer å allt e som de ska, men kvar finns bloggnamnet som en länk utanpå bannern jag laggt upp. Hur får jag bort texten?

    1. Lena says:

      Hej!
      Du öppnar kodmallarna och tar bort koden <h1><a href="${BlogUrl}">${BlogTitle}</a></h1><h2>${BlogDescription}</h2> som ligger i <header></header>

  10. smexiiigirl says:

    kan du hjälpa mig med nån cood ? till bakrundsbilderna?

  11. smexiiigirl says:

    det gick ju inte 🙁 jag hitta inte vart det va, men de var bra annars:)

  12. ah says:

    hur gör man dåe ?

  13. ah says:

    jag fattar inte hur man gör headern. det funkar jue inte i stilmallen och i kodmallen så kommer jue allt man klistar in överst i bloggen.

    1. Lena says:

      Då gör du fel – tyvärr.

  14. Sus says:

    jag hade en bakgrund förut, men sen helt plötsligt (jag ändrade ingenting) så försvann bakgrundsbilden! nu är sidan bara vit. finns det nån färdig kod man kan använda för att lägga in det?

    1. Lena says:

      Om du har laddat ned ett tema från mig så kan det bero på att linan till imageshack ligger nere. Av den anledningen uppmanar jag alla att spara varje bild till sina teman. Har du inte laddat ett tema från mig utan själv lagt in bilden hos blogg.se så är det blogg.se som spökar, i synnerhet om bilden bara försvann utan att du har rört något i stilmallen. Det är lite svårt att veta när du inte skickar med någon länk till sidan.

      mvh/Lena

  15. Ribery* says:

    Hej, Nice blogg men har en fråga

    Har minskat inlägg på framsidan eller startsidan, vad ni än kallar det :)iaf har letat och letar fortfarande ? Vill gärna ha en Välkomstsida eller alt att inlägg i en katogeri endast visas på framsidan och inlägg i de övriga kategorierna var för sig.

    Fattar du vad jag menar ?

    Tack i förhand mvh Alex

    1. Lena says:

      Hej!
      Jag fattar vad du menar, du vill ha en välkomstsida med enbart 1 inlägg. Du ändrar koderna i “framsida” till att bara visa 1 inlägg. Vad gäller att skilja på kategorierna så måste du först skapa dem, därefter kopiera in länken till själva kategorin på framsidan. På så vis kan du särskilja kategorierna åt.

  16. Fia says:

    Hej!

    Jag skulle vilja göra min blogg lite mindre, jag vet hur jag gör detta. Men… när jag gör det så förminskas ju inte bilderna jag redan laddat upp på inläggen. Alltså det försvinner ju en del av bilderna då eftersom de är större än vad jag nu vill att min blogg ska vara. Kan man på något sätt “förminska” bilderna på ett smidigt sätt så att de passar in i den nya bloggstorleken? Jätte tacksam för svar på min mail eller blogg. Ha det bra!

    Mvh // Fia

    1. Lena says:

      lägg in img {max-width:XXXpx} i din stilmall. Ändra XXX till din storlek.

  17. Jag says:

    hej! ´jag är ganska ny och vill fråga hur man gör en header. jag har gjort klart min bild men hur gör jag för att den ska visas som heade`? snälla hjälp!

    1. Lena says:

      Svårt för mig att svara när du inte har lämnat en länk…

  18. siik says:

    jag kan ju redan rätt mycket om blogg.se, men det är nog bra för dom nya…

  19. Johanna says:

    Hejsan .. jag har nyligen skapat denna blogg med en kompis . och vi vill ha en header jaag gjorde i ph jag spara den som jpg och så men min kodmall e inte desamma som din va ja tror och ja fattar nte hur man gör du har förklarat jätte bra 🙂
    #header {
    border-top:3px double #bca4af;
    border-right:3px double #bca4af;
    width: 700px;
    background: fff;
    padding: 12px 12px 12px 12px;
    margin:0px 0px 7px 0px;
    voice-family:”\”}\””;
    voice-family:inherit;
    width:250px;
    }html>body #header { width: 726px }

    1. Lena says:

      Hej!

      Först vill jag bara fråga var du har hämtat koderna och om du har lagt ihop dem för de är inte blogg.se:s koder som ser ut så här:

      #header {
      background: #FFFFFF;
      margin: 0px;
      padding: 10px 0px 40px;
      height: 90px;
      text-align: left;
      border: #000000;
      }

      Vill du ha en header som är 726px bred?Gör då så här I STILMALLEN:

      #header {
      background: #FFFFFF url(sökvägtillbilden.jpg) no-repeat center top;
      margin: 0px;
      width: 728px;
      padding: 10px 0px;
      height: HÄR SKRIVER DU IN HÖJDEN PÅ BILDEN;
      text-align: left;
      border: #000000;
      }

      mvh/Lena

    2. paulina says:

      Min kodmall är exakt likadan som (Johannas), och jag har inte ändrat på nånting, bara följt dina instruktioner!

      1. Lena says:

        Då ska det fungera.

  20. Amanda says:

    om du är gratis, haha

    1. Lena says:

      Nej , jag är inte gratis!

  21. Tanja says:

    Hallå, tack för guiden!

    Mitt problem är att jag använder vad blogg.se kallar för ‘egen mall’. Där ser inte källkoden likadan ut. För mig står det följande:

    div#header {
    float: left;
    clear: left;
    display: inline;
    padding: 0 20px 20px 20px;
    border-bottom: 1px solid #ddd;
    width: 710px;
    }

    Hur gör jag för att få in en url där?

    Tacksam för svar!

    1. Lena says:

      Du får gå in i själva kodmallen och lägga in url:en i htmlkoderna, det koder som du nu pekar på är de som finns i stilmallen.

  22. Ebba says:

    Hej !
    Jätte bra hjälp.
    Det är en sak jag undrar som jag inte förstår.
    Om man vill ha en svart bakrund, men samtidigt vill att en vit rektangulär sida ska finnas , i mitten där blogginläggen visas.
    Vet du hur man gör ?
    Och skulle du kunna hjälpa mig/oss som undrar ?
    Tacksam för svar ! 🙂

    1. Lena says:

      Du anger bakgrunden som svart och inläggsrutan som vit, annars får du skapa en bakgrundsbild som sköter om samma sak. Jag har tyvärr inte tid att hjälpa dig mer för tillfället.

  23. Patricia=) says:

    hej jag har några frågor:

    1. hur byter man ut vissa titlar/rubriker t.ex om nån ska typ komentera och i vanliga fall står det ju “namn” men kan man typ ändra satt det står “vad heter du” eller liknande, om du förstår hur jag menar ;D

    2. hur ändrar jag musen på min blogg? alltså så att det blir ett annat utseende på musen när någon går in på min blogg, typ som på denna blogg: http://www.cazzieme.blogg.se … så är du snäll och bärettar;D

    3. i “stilmall” när jag ska ändra min header till en egen, så händer det inget är det nått mer en bildens html/eller vad det nu heter, som man ska skriva?

    TACKSAM FÖR SVAR!

    1. Lena says:

      Hej! Jag ska försöka svara på dina frågor så gott jag kan.

      Du öppnar respektive kodmall och letar dig fram till koden som visar ex kommentera. I kodslyngan så står texten du ändrar i.
      Hon använder ett javascript som heter mouse trail – du kan söka på google så hittar du massvis med sidor som har olika variationer på det skriptet.
      Det är svårt att förstå vad du menar – men om du ska byta header så måste du först ladda upp bilden, sedan spara sökvägen till bilden, därefter kopierar du sökvägen och infogar den i stilmallen. Har du följt alla dessa steg men kan ändå inte se någon skillnad så testa att tömma cashen.

      mvh/Lena

  24. Amanda says:

    Hej! Jag håller på och ska försöka ändra om lite på min blogg och jag vill ha en enkel bloggdesign, ungefär som http://westmanshanna.se/ har. Om du kan hjälpa mig med den eller om det finns någon annan liknande och fixa så vore det jättesnällt 🙂 Tack på förhand!

    1. Lena says:

      Hej!

      Vill du anlita mig menar du?

  25. almi says:

    jättebra guide 🙂

    1. Lena says:

      Tack! =)

Leave a Reply

Your email address will not be published. Required fields are marked *