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

    Hej! jag undrar hur man gör för att få en egen bild som man har i datorn att bli en header, den har ju inte en webbadress

    • Lena Lena

      Hej!
      Man laddar upp bilden från datorn till blogg.se – därefter kopierar man in sökvägen som bilden får hos blogg.se i koderna för header. //Lena

  2. Ända sedan jag bytte kamera så har de blivit väldigt gråa när jag laddar upp dem. Finns det något man kan göra åt det? :)

    • Lena Lena

      Hej!
      Om det handlar om hur dina bilder har förändrats sedan du bytte kamera får du fråga om detta i ett forum som handlar om fotografering. Jag kan inte ge något direkt svar på det.
      mvh/Lena

  3. hej jag undrar i fall att du kan hjälpa mig med att lägga in bilder i menyn. har sett att måpnga storbloggare har bilder där och skulle också vilja ha det!

    Tack på förhand och riktigt bra hemsida:D

    • Lena Lena

      Hej!
      Tyvärr hinner jag inte göra det just nu. Mvh/Lena

  4. Hejsan, Riktigt bra guide. Dock har jag ett problem. När jag ändrar bilderna i headern, och gör exakt som du säger så finns det där i 5-10 minuter men sedan återgår de till blogg.se’s egna bilder igen. Har provat gång på gång men samma sak händer. Vad kan problemet vara? Hela bildlänken ska väl klistras in i paranteserna, eller ska dessa tas bort?

    Väldigt tacksam för svar. Håller på att bli tokig!
    /Sara

    • Lena Lena

      Hej Sara och jag är hemskt ledsen för sent svar. Bilderna får inte vara större än 1000px i bredd, du måste använda blogg.se:s bildsökväg = ladda upp bilden på blogg.se:s server och klistra in sökvägen. Om inte detta hjälper får du höra av dig igen. Används något javascript med bilderna? mvh/Lena

  5. Hej!
    Tack hemskt mycket för detta!
    MEN jag har inte det där ”#Header” stället på min stilmall!? :0 vad ska jag gööra?

    • Lena Lena

      Hej!

      De flesta brukar ha det, du får då leta reda på vilket block som motsvarar #header

      mvh/Lena

  6. hej super bra sida! om du har tid får du suuuuper gärna visa hur man gör för att får en ”äldre inlägg” och ”tidigare inlägg” skulle vara super snällt!

  7. Ida Ida

    Hej, jag har en fråga. :)
    När nån kommenterar min blogg så måste jag göra en till kommentar för att svara för det finns ingen ”svara/reply” knapp. Hur ska jag göra för att få en sån? Måste jag byta tema elr vad man nu ska säga? :) Kram.

    • Lena Lena

      Hej! Det finns ingen sådan speciell knapp i blog.se utan mantrycker på permalänken till kommentaren.

  8. Hej!
    Jag har inte en av de här bloggmallarna. Jag har inte heller de här kodmallarna? Allt det om headern står inte där.
    det står bara:

    och när jag klistrar in det som du förklarar här, så ser jag bara den texten på framsidan ovanför headern. Hur får jag in min bild då?

    • Lena Lena

      Hej! Just nu hinner jag inte besvara några kommentarer. Jag är hemskt ledsen. Mvh/Lena

  9. Charlotte Charlotte

    Hej!
    Jag har använt micro designen du gjort! ( den är helt underbart snygg!! )
    Men jag skulle vilja ändra texten på ” hoppa till botten ” vars gör jag det? har försökt leta men hittar det inte.
    Vore kanon om du kunde maila mig hur jag gör!

    • Lena Lena

      Hej!
      Du tar bort länken i blocket ”header”.
      mvh/Lena

  10. TUSEN TUSEN OCH ÅTER TUSEN TACK!! skitbra sida, nu har man äntligen kommit igång med designen på riktigt :D

    • Lena Lena

      Hej och TACK! Kul att jag kunde hjälpa till =)

  11. Hej. Tack för all hjälp du är grym!
    Jag har bara en fråga som jag inte har hittat svar på. Jag undrar hur man får färg på länken som man postar i inlägget för jag har råkat göra alla länk-texter vita så när jag publicerar inlägget så syns inte länken. så undrar hur man gör så man får tillbaka färgen till svart lr liknande igen? typvad ”koden” heter där jag ändrar länkfärg eller vad man kan säga!

    TAAAAAAAAAAAAAAACK:)

    tack :)

    • Lena Lena

      Hej!
      I stilmallen, leta dig fram till a link, a:active. a:hover osv. Där ändrar du länkfärg. mvh/Lena

  12. Hej, jag har lyckats med att byta bild. Men bilden blir alltid för liten…. Jag har även problem med min storlek på ”presentationen” (där jag även vill byta ut teckensnitt).

    Du skulle inte vilja maila mig?

    • Lena Lena

      Hej!
      Just nu har jag en del att göra men du kan mailamig så får jag se vad jag kan göra. mvh/Lena

  13. Rebecca Rebecca

    hej!
    När jag byter bakrundsbild på bloggen så blir det över hela texten på inläggen också. och så vill ja ju inte ha. vill att det ska vara vitt i mitten av bloggen där alla inlägg hamnar, men fattar inte hur jag ska fixa det?

    • Lena Lena

      Hej! Det är en designsak som du kan fixa med stilmallen och bilder. Det block som din text ligger kan du sätta till color:#fff; -vilket är vit – förutsatt att du vill ha vit bakgrund. mvh/Lena

  14. TACK och åter TACK! Det här var precis vad jag behövde, utförligt, välskrivet och mycket bra gjort! Jag bugar, bockar och tackar återigen!

    • Lena Lena

      TACK så mycket! :)

  15. Jag förstår ända till ”Hantera stil- och kodmallar” efter det förstår jag inte.. det går inte alls att förklara/göra det på ett enklare sätt?

    • Lena Lena

      Hej!
      Exakt vad är det som du har svårt att förstå? Är det hur du infogar koder?

  16. Helena Helena

    Hej ! Det verkar inte riktigt fungera för mig, ändå så har jag följt vartenda steg, vad kan vara fel? :s / Mvh Helena

    • Lena Lena

      Hej Helena! Kan du beskriva lite närmare vad som inte fungerar så ska jag se om jag kan hjälpa dig. Mvh/Lena

  17. Hej!
    Faktist inte, jag fattade allt enda till ”hantera stil och kodmallar :s

  18. Jag skulle vilja lägga in mina bilder i minst 700 pixlars bredd på min blogg, men hittar ingen stilmall som passar. Har du något tips?

    • Lena Lena

      Hej! Det enda tipset jag har, om du inte hittar lämpligt tema, är att själv skapa ett tema som klarar den bredden. mvh/Lena

  19. Heidi Heidi

    det står inte sådär i min stilmall… ingen aning om hur jag ska göra.

    • Lena Lena

      Hej!
      Vad är det som inte står likadant? Jag kan inte hjälpa dig om du inte beskriver vad problemet är.

  20. Hej! Verkligen pedagogiska genomgångar det här, men jag har ett väldigt specifikt problem som jag hoppas du kan hjälpa mig med. Det har att göra med .
    Jag har två saker jag vill åstadkomma:
    1. Formatera mina egna kommentarer i min blogg annorlunda än andras så att de syns lite bättre.
    2. Skapa en koll på kommenterarnas namn/URL så att
    a) Om inget namn angetts, skriv ”Anonym”
    b) Om en URL angetts (och enbart då), gör namnet till en länk
    c) a+b
    För 1 så tänkte jag mig en enkel koll med angivet namn och/eller bloggadress, men jag lyckas inte med t.ex. (detta aktiveras aldrig):

    För 2 så tänkte jag göra flera ifs, men lyckas inte med det heller. Antingen aktiveras inget eller så aktiveras allt. Detta blev en rätt invecklad fråga men jag hoppas att du kan hjälpa mig!

    • Lena Lena

      Hej!
      Vad gäller 1 så ändrar du visningsegenskaperna i din stilmall, på så vis kan du formatera utseende. Därmed kommer vi in på din fråga 2 – tyvärr måste jag göra dig besviken. Blogg.se klarar inga anvancerade kommentarfunktioner. Alltså kan du inte få in anonym. Däremot kan du trixa med hur du lägger in koderna för den som kommenterar, dvs flytta om dem i kommentarfältet. Något annat går mig veterligen inte. Mvh/Lena

      • Oj, ja, jag insåg inte att de ”otillåtna” taggarna togs bort, det gjorde ju min kommentar lite mindre läslig. Vad jag försökte fråga om var ‘tag:if’. Jag försökte få enbart mina egna kommentarer att se annorlunda ut, så alltså något i stil med ”om postaren är Everlasting, använd då den här bakgrunden istället för den vanliga”. Dock lyckas jag inte aktivera det genom att kolla CommentAuthor == ‘Everlasting’ med tag:if trots att liknande kollar funkar med t.ex. hemsideadresserna.

        Tack för ditt svar i alla fall!

        • Lena Lena

          Hej! Nej det går inte att göra några sådana avancerade funktioner för det behöver en else-sats också till if och blogg.se köper inga andra koder än de som finns, tyvärr, jag har testat.

  21. Lägger in min header, men det verkar inte fungera. Det blir bara ett stort mellan rum, som att min header bara är en vit ruta. Vet du vad det kan vara? Jag har utgått ifrån blogg.se’s Author stilmall.

    TUSEN TACK iafl för dina förklaringar och all hjälp, jag startade min blogg igår och känner att jag redan har ett litet hum om vad jag håller på med.

    Mvh Sandra

    • Lena Lena

      Hej! nej jag kan inte veta utan att se det. Men jag gissar på att du inte har rätt sökväg till bilden.

  22. Hej jag har verkligen följt varenda steg men det funkar ändå inte… får inte fram något :( fattar inget med dessa kodmallar & allt…

    • Lena Lena

      Hej!
      Och tyvärr så har jag ingen tid att hjälpa dig just nu, jag är hemskt ledsen.

  23. Hej din förklaring var asbra tack så mkt! En liten fråga bara; är blogg.se alltid jätteseg på att visa för omvärlden de inställningar jag gjort? Skapade en titelbild till bloggen och den syns när jag förhandsgranskar, jag sparar allt men sedan när jag kollar in sidan som vanlig gäst så syns där inga nya inställningar!? Hur lång tid tar det för blogg.se att uppdatera de nya inställningarna?

    • Lena Lena

      Hej!
      Du måste spara om hela sökvägen till bilden och lägga in den på nytt. Det går inte bara att skriva över bilden (vad jag vet). Det kan vara problemet, eller att du inte har tömt cashen. Blogg.se är seg.
      mvh/Lena

      • Tack för svar! :) Nu funkar bilden iaf, fast det var tre och en halv dag nu sedan jag kollade iofs, så jag vet inte hur seg i tid blogg.se är. Kollade igenom hela blogg.se efter cache men hittade inget.. var någonstans slänger man cachen? eller pratar du om datorns cache?

        • Lena Lena

          Hej! Jag menar datorns cashe. Kul att bilden fungerar =)

  24. Hej! Jättebra beskrivning! Dessvärre står fortfarande min bloggtitel + undertitel kvar (delvis länkat) ovanför min nya header. Hur får jag bort det?
    MVH Sofia

    • Lena Lena

      Hej!
      Du har säkert löst problemet nu, men du öppnar alla kodmallar och letar dig fram till <h1 Du raderar hela inklusive koder.
      mvh/Lena

  25. Nelly Nelly

    Jag har en blogg och håller på att deigna den. Men sidpanelen där det står typ senaste inlägg och kategorier är alldeles för långt upp i designen, upp på headern. Hur gör jag för att få ner allt?

    • Lena Lena

      Hej!
      Det är svårt för mig att säga utan att ha sett designen.

Kommentera

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