Lägg in en egen headerbild

Svårighetsgrad:Enkel

Gillade du den här guiden?

Om du tycker guiden var kass så skriv det i kommentarsfältet! :)

Video transcript

Hejsan och välkomna till Bloggdesignskolan.se.

Mitt namn är Oscar och idag ska jag visa er hur man lägger in en ny headerbild på er blogg på Blogg.se och som ni ser så är vi inne på min testblogg här --> Bloggdesignskolan.

Jag vill byta ut den här förskräckliga bilden på mattan och hur gör jag då?

Det viktiga är att först veta storleken på bilden. Tar ni bilden och sparar ner den, öppnar den i ett bildbehandlingsprogram så är det enkelt att se storleken men man kan också öppna bilden i en ny flik här i Chrome och då ser man att bilden är 1000px bred och 217px hög.

När man sedan har gjort den här bilden, nu har jag redan gjort den här på min dator, så går man in i kontrollpanelen. Sen går man in i Bilder, eller Arkiv --> Bilder för man måste först ladda upp bilden på blogg.se serverar så att den finns någonstans på nätet.

Där har vi den bilden. Jag laddar upp den. Och här är det någonting som är JÄTTEVIKTIGT och det är att ni inte laddar upp den i 600px, för det automatiskt skalar ner er bild till 600px bred, men ni vill ju att bilden ska vara 1000px så ändrar det till 1000.
Startar sen uppladdningen.

Och då har vi min header här och då ska vi hitta länken här. I chrome, i alla fall på min dator så är det lite chall här, en bugg, så det markeras inte helt enkelt, men jag klickar på CTRL + A för att markera allt och sedan CRTL + C som är COPY.

Så nu har jag länken till den här bilden. Här kan ni se. Bilden finns där! Och så ska jag gå in i koden och byta, ändra lite där. Jag går in i redigera kodmallar och då hittar jag header här och en bild, för det står img = image. Så har vi en adress till en annan bild, den som finns där nu. Byter ut den och klickar på publicera ändring. Går till min blogg och klickar på CTRL + R och WOW här ser vi den nya headern.

Det kan finnas ett annat sätt som vissa designmallar är uppbyggda på och det är i så fall om vi inte hittar den här bilden i koden under Redigera kodmallar, den här img-taggen, då kan det vara så att den ligger under stilmallar, det här är egentligen ett mer korrekt sätt att programmera för då lägger man in bilden som en bakgrundsbild.

Då hittar jag header här. Det brukar stå något som såhär:
background, kanske tillochmed background-image: url("DIN LÄNK"); Något sånt här borde de stå då. och då är det samma grej här. Man markerar adressen och sen klistrar in den nya adressen.

Om ni har några frågor så ställ era frågor i kommentarsfältet nedan så kommer säkert jag eller någon annan besökare hjälpa er.

Ha det gött så länge