Skip to content

Designa din Blogg.se

Uppdaterat 3 april 2017

Blogg.se har nya verktyg att använda för designbyte. Det är möjligt att min guide delvis kan vara till hjälp. Jag kommer vid tillfälle kontrollera om guiden ska finnas kvar.


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 eller . 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:

Published inBlogg.se

196 Comments

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

    • Lena Lena

      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 linus

    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 ?

    • Lena Lena

      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 :D
    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 ?

    • Lena Lena

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

  4. 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?

    • Lena Lena

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

  5. Tilda Tilda

    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

    • Lena Lena

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

      mvh/Lena

  6. 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 :)

    • Lena Lena

      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 stefanny

    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

    • Lena Lena

      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 Azra

    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.

    • Lena Lena

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

  9. Sara Sara

    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?

    • Lena Lena

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

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

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

  12. ah ah

    hur gör man dåe ?

  13. ah ah

    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.

    • Lena Lena

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

  14. Sus Sus

    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?

    • Lena Lena

      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. 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

    • Lena Lena

      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 Fia

    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

    • Lena Lena

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

  17. Jag Jag

    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!

    • Lena Lena

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

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

  19. 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 }

    • Lena Lena

      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

    • paulina paulina

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

      • Lena Lena

        Då ska det fungera.

    • Lena Lena

      Nej , jag är inte gratis!

  20. 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!

    • Lena Lena

      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.

  21. 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 ! :)

    • Lena Lena

      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.

  22. 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!

    • Lena Lena

      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

  23. 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!

    • Lena Lena

      Hej!

      Vill du anlita mig menar du?

  24. jättebra guide :)

    • Lena Lena

      Tack! =)

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *