Bakgrunn på blogspot-bloggen – et bilde.

Det er utrolig hva man kan fikle til på egen blogg uten å kunne noe særlig HTML mm, bloggbakgrunn er en av de tingene som er enklere enn man skulle tro. Jeg har tidligere skrevet om hvordan lage en enkel tofarget bakgrunn, nå skal jeg forklare hvordan lage og installere sin egen fancy bloggbakgrunn.
Det vanskeligste her er å lage selve bakgrunnen, å sette den inn i bloggen er raskt og greit.
Forklaringen tar utgangspunkt i at du bruker Minimamalen, men kan også brukes til enkelte av de andre malene.

Dette skal du gjøre:
1. Lag en bakgrunn.
2. Last bakgrunnen opp på nett.
3. Plassere bakgrunnen i malen.
Eksempler på bloggbakgrunner satt opp etter denne metoden, de er alle relativt ulike: .
Bloggfikling B, Bloggfikling C, Bloggfikling D og Gundas Factory

Men aller først må jeg forklare litt om hvordan en slik bildebakgrunn fungerer.

Det finnes en rekke ulike skjermstørrelser. Noen har liten skjerm, andre har stor. Hvor stor skjerm leseren har vil påvirke hvor mye av bloggbakgrunnen han/hun ser.

Under finner du en illustrasjon over noen av de vanligste skjermstørrelsene, skjermstørrelser oppgis i pixler, px.
Bakgrunnsbildet jeg forklarer her legger seg sentrert midt på skjermen, slik at de med liten skjerm kun ser det som skjer midt på, mens de med større skjerm ser mer.

Du må selv ta noen valg. Hvor bred er/ønsker du at innholdsdelen av bloggen din skal være? Dette vil påvirke hvor mange som får nyte godt av dekor på sidene. Jeg liker å gjøre bloggene brede (990px), og la sidedekoren være krydder for de som har plass, men kanskje du heller vil holde bloggen smal slik at alle kan få se sidedekoren.

Til venstre har jeg forsøkt å illustrere noen av skjermstørrelsene, største lysest, minste mørkest, tallene angir størrelsen i px.

* Området mellom de to rosa strekene utgjør 990px, dette er det jeg anbefaler som maksimal bredde for innholdsdelen på bloggen (der teksten er)

* Området mellom de to grønne strekene utgjør 1600px, maks bredde på bakgrunnen.

* Omtrent 15-20% (av mine lesere) har skjerm som er 1024px bred, resten har større.
* Omtrent 10%, har bredere skjerm enn 1600px, disse vil (dersom de har valgt å ha nettleservinduet så bredt) få bakgrunnsfargen bak bloggen på sidene. Bakgrunnsfargen kan du selv sette.
* 70%, har skjermbredde på mellom 1280 og 1440px, det vil si at de får se en god slump av sidedekoren.

Under ser du hvor mye som vil synes av bakgrunnen for tre ulike skjermstørrelser.

1. Lag en bakgrunn

Til dette trenger du et bildebehandlingsprogram. Selv bruker jeg photoshop eller illustrator, men det finnes en rekke gratis alternativ der ute også. Gimp er det kraftigste, og kan gjøre utrolig mye, men enklere alternativ er photoscape og picasa (har ingen erfaring med disse selv dessverre). Det kan også være at programmet som fulgte med kameraet ditt kan brukes.

Bakgrunnen du skal lage bør være 1600 pixler bred, og 1200 pixler høy. Da vil flest mulig få fylt sin skjerm. Den kan ikke være større enn 1600 da det er maks størrelse for picasaalbumet du skal laste opp til, lager du den større blir den skalert, det vil du absolutt ikke.
Hvordan du lager designet er opp til deg, men ting du bør tenke på er:
* Midt på bloggen kommer teksten, så planlegg et passe bredt felt der hvor det ikke skjer altfor mye. Jeg foretrekker at det ikke er noe aktivitet bak teksten, ettersom teksten ruller over og det er ubehagelig å lese tekst som flyr over ting – men det er meg..
* Det kan fort bli for mye action på sidene også, enkelte bloggbakgrunner hopper omtrent ut av skjermen og angriper deg. Det er jo innholdet som er viktigest, ikke la dekoren ta overhånd.
* Ikke alle kommer til å se alt, se litt på illustrasjonen i forrige punkt, ikke lag design som bare er fint om man ser alt.

Dersom du ikke har et program eller datakunnskap som er avansert nok til at du kan sette sammen bakgrunnen av ulike element, så kan du allikevel lage egen bakgrunn. Det du da gjør er at du tar et bilde av noe (tapet, trestamme, gressplen, svalberg osv), endre dette til rett størrelse (det kan du gjøre med kameraprogrammet), følg punkt to og tre, og legg så inn et ensfarget felt i tekstdelen av bloggen slik som forklart i posten om tofarget bakgrunn. (Se fiklebloggC for eksempel).

Et annet alternativ er å lage bloggbakgrunnen for hånd enten som en collage eller ved å tegne, så ta bilde eller scanne det, endre størrelsen og vips – bakgrunn.

Lagre bildet i jpg, og du bør krympe det så mye som mulig uten at det forringes.
.

2. Last opp bildet

Du kan laste opp bildet til flere ulike steder, blant annet på akkurat samme måte som du laster opp bilder til innlegg, det er det jeg forklarer her, og bildet blir da liggende sammen med resten av bildene dine i picasa-albumet til bloggen.
Så, gjør som så:
* Lag en ny post, dette er kun kladd, skal ikke publiseres, kan slettes når du er ferdig.
* Last opp bildet (samme hvilken valg du velger i størrelse og plassering)

* Kopier ut den første adressen markert lilla over.
* Lim den inn i nettstedsadressevinduet og trykk enter, dette sjekker at du har fått med deg adressen riktig (du bør få opp et bilde)
* Rett etter 1600 står det -h, fjern -h, trykk enter igjen – nå skal du se hele bakgrunnsbildet.
* Senere skal du kopiere ut denne bildeadressen fra adressefeltet og lime inn i malen.

3. Plasser bakgrunnsbildet i malen

I ett nytt vindu eller fane så går du til malen (tilpass-utforming-rediger HTML)
Skroll ned til der det ser omtrent ut som på bildet til høyre (de blir større om du klikker)

Mellom der jeg har satt lilla strek, lim inn:

background-image:url('BILDEADRESSEN');
background-position: center;
background-repeat:no-repeat;
background-attachment: fixed;

Bytt ut BILDEADRESSEN med bildeadressen vi fant frem tidligere, nå skal det se omtrent likt ut som på bildet til venstre.

Lagre og test, og når alt er på plass så kommer du hit og skryter så vi også kan få se hva du har laget!
Får du ikke til så spør du, og har du forslag til utbedringer på forklaringen så kom med de!

Flere bloggtips finner du i samleposten, blant annet hvordan få bredere blogg.
Mot slutten av måneden kommer enda et bloggbakgrunns-alternativ, men før det planlegger jeg en post på noen fiffige småting man kan gjøre med bloggdesignet.

Diverse

Postet 03.09.2009 Skrevet av Anne
Kategori: Bloggtips
Stikkord: blogspot
Likte du artikkelen? Abonner bloggen via RSS

Lignende artikler

41 Kommentarer

Legg inn en kommentar →

Lise

3 september 09

Tusen takk for koselig kommentar i bloggen min.
Her inne har jeg ikke vært før, utrolig masse koselige bilder!

Nina

3 september 09

Å du å du…dette virket moro.
Men og litt vanskelig gitt..hm..
En stor utfordring for meg…skal jeg ta den tro?
Ikke akkurat nå, men har så lyst til å gjøre noe med siden min vettu.
TUsen takk for fine tips.
Stor klem fra Drops

Anne

3 september 09

Hyggelig å høre Lise :)
Nina, nja, det som er vanskelig er å lage selve bakgrunnen, å sette det inn skulle gå lett som en plett om du gjør nøyaktig som jeg har forklart – lykke til!

Hobbygåsa

3 september 09

Åh Anne du har jo så rett, nå kommer trekkfuglene! Da er jo ikke høsten så værst allikevel da :-) Da får jeg begynne å tenke fuglemating igjen, så gøy! Utfordringen ligger i disse hersens sultne kattene vi har til naboer – men jeg må bare finne på noe smart :-) Takk for bloggtips forresten, det ser jo greit ut når man får det forklart :-)

Jorunn

3 september 09

Takk for bloggtipset!
Ser ut til å være en stor utfordring ;men skremmer meg ikke fra å prøve en dag jeg har mer overskudd.:-)

Heidi-anitha

3 september 09

Kjære Moseplassen!!!!!!

Etter en anbefaling gjennom cricoline søker jeg hjelp hos deg!
Jeg forstår at du sitter inne med MYE kunskap om akuratt det jeg ikke kan så mye om-.. Og nå trenger jeg virkelig hjelp. Bloggen min har virkelig slått knute på seg – da hele rollen min til høyre er forskjøvet… Nå ligger den helt i «bunn» under alle innleggene mine på siden min.

Jeg blirså utrolig glad om du kunne ta deg tid til å titte innom meg – kanskje du fostår hva jeg mener..

Nå har jeg forsøkt å justere maler og ene med det andre – etter prøve og feilemetoden…Har så lite lyst til å gi opp bloggen pga dette også..

Skulle så gjerne hatt 3 kollonner også – men har til nå bare hatt 1 liten i tillegg til den «store»…

Klemmer fra fortvilet Heidi-anitha
White vintage…

Anne

3 september 09

Hei Heidi-anitha, svarer både her og på bloggen din jeg, dette er du ikke alene om å oppleve.

Dette er så greit så, du har på en eller annen måte fått satt opp bloggen din slik at hovedfeltet og sidefeltet er for brede til totalbredden, og dermed settes sidefeltet under.

Rask fiks er å gå til malen og velge en annen og så på nytt minimamalen (det vil da slette den malen du har fikset på og sette inn orginalen, sletter alle endringer altså, men ikke widgets og slikt.)

Du kan også se på bloggpostene mine for bredere blogg og trekolonnersblogg

Hvordan få bredere blogg
Hvordan lage tre kolonner på bloggen

Også sette opp bloggen med tall derifra, da skulle det bli plass til alt. Men selv da anbefaler jeg at du starter med en frisk mal, så slipper du å dra med deg rariter videre.

Cathrine

3 september 09

Hei, så flott forklaring du har laget! Har sett raskt igjennom den, og skal forsøke meg i morgen, når jeg har litt bedre tid! Jeg har veldig bred skjerm (20′) og får et felt utenfor nå på begge sider, som blir i bunnfargen jeg har valgt, så jeg vil veldig gjerne få bort så mye som mulig av det. Men jeg skjønner at det er en max bredde blir 1600 pix, og jeg vet ikke om det holder for meg uansett? Det er kanskje for avansert, men hvordan får man evt laget en pyntebord langs kanten – slik min bakgrunn er? Du er flink da, og dette er det maaange som er kjempeglade for at du tar deg tid til! Stor klem fra Cathrine :-)

Anne

3 september 09

Cathrine, de gratisbakgrunnene jeg har sjekket har en bredde på ca 1450px, så dersom du lager en selv så vil den i allefall bli bredere enn den du har nå. Om du går i de bloggene jeg lenker til først (fiklebloggene) så ser du hvor bredt det blir.

Jeg skjønner at du gjerne vil ha det pent helt ut. Det går naturligvis ann å legge bildene en plass som godtar bredere bilder, samme hvor du legger bildet så lenge det er en åpen server som gir deg url til bildet. Jeg har ingen forslag desverre.

En annen måte å ordne det hele på er tiling, det kommer en post om dette om noen uker kanskje en mnd, da vil absolutt hele bakgrunnen dekkes. Men, om man vil ha det gjort på en fancy måte så krever det mye koding og styring, et kjekt alternativ er dog å legge en tile bak, så et bilde over.

Hvordan lage pyntebord: det er ikke noe problem, men du må enten tegne noe, eller finne noe gratis clipart som du laster ned og bruker. Det fordrer litt kunnskap fra deg og et egnet program.

Stina

3 september 09

Jeg har fiklet med dette i en evighet, men fiklet helt feil skjønner jeg!
Tusen takk :)

Anne

3 september 09

nja, det er jo alltids flere måter å gjøre ting på Stina, så det trenger jo ikke være feil det du har gjort før, men jeg håper du får det til nå da.

Gleder meg til å høre fra dere når dere har prøvd gjennomgangen, det er viktig med innspill på forklaringene for at de skal bli best mulig!

ASSA

3 september 09

Takk for dine Blogg-tips, det har blitt et flott oppslagsverk!

Se i min Hageblogg jeg har en Award til deg ;)

Ønsker deg en flott avslutning på uken!

viola

4 september 09

Jeg skal si du er flink!! Dette har jeg lyst å prøve ut.. Satt en hel kveld her og bare leste om hvordan få headingen annerledes, like bred (vannrett), men kortere i lengda (loddrett). Fikk til ett og annet på testbloggen min, men den ble både kortere i lengda og i bredda.. :/ Den jeg har på den vanlige bloggsiden min Refleksjoner – er litt for lang (loddrett). Masse interessant i html.. :)Takk for kjempegode tips!! :)

viola

5 september 09

Hei i natten! Det siste jeg ville gjøre før jeg legger meg, var å løse denne «bakgrunnsgåten»!! Det er nå gjort, supert, genialt, tusen takk for hjelpa!! :) Jeg skal nok velge ut en annen bakgrunn senere. Denne får stå inntil videre. Bare gå og se :)

Nina

5 september 09

Kult!

Lyst å sende meg en mail, fotoverden@hotmail.com

Anne

5 september 09

så artig at du fikk det til :)
Håper at dere er flere som prøver dere også!

Anne-Sophie

5 september 09

Du er en reser på dette med bloggfikling. ;-)
Jeg har bare lyst til å komme med en helt personlig betraktning når det gjelder bloggbakgrunn og det er at bakgrunnen ikke bør gjøre bloggen vanskelig å lese.
Muligens at jeg er litt sær, men jeg orker ikke bruke tid på en blogg som nesten gjør vodnt i øynene å se på.
Ha en fortsatt fin lørdag, Anne!

Anne

5 september 09

Anne-Sophie, jeg er hjertens enig med deg der. Jeg har forsøkt å si litt om det i posten, men det er jo også svært ulikt hva ulike synes er ubehagelig eller kjedelig.

Selv har jeg problemer med å lese blogger som har sort bakgrunn, eller blogger som er skrevet i ulike fontstørrelser, mens andre ikke har problemer med dette og synes det er fint slik.

Stina

7 september 09

Anne – du er fantastisk. Det virket supert!

Jeg synes du absolutt burde lage en html- kode med link til dine bloggtips som vi kan lime inn på våre sider. Som credits, hvis du forstår hva jeg mener?

Har sett at andre også gjør det, og jeg har i hvertfall ingenting imot og ha det på siden min :)

Anne

9 september 09

Stina, mener du en liten knapp/banner?
Jeg har faktisk noen liggende som ble laget en tid tilbake for et bestemt prosjekt, om det er interesse for det så legger jeg jo gjerne ut.. hm, var noe å tenke på :) Hyggelig med all reklame bloggtipsene kan få, de skrives jo for å bli lest :D

Cathrine

16 september 09

Hei Anne!
Jeg har laget et eget innlegg med bloggtips og mine favoritter, og der er SELVSAGT du nevnt! Her: http://cathskreativehjorne.blogspot.com/2009/09/yes-we-can.html

Men jeg må inrømme at jeg ikke har fått til å endre bakgrunnsbilde, lage et selv, så jeg må fortsette å fikle litt der. I Picasa fikk jeg ikke til å laste ned bildet med 1600 bredde – der var største valget 800. Så da stoppet det der. Noe jeg kan gjøre?

En av grunnene til at jeg ønsker meg ny bakgrunn, er at jeg da kan lage midtfeltet større, fordi jeg da kan lage totallbredden på 990 pixler, mot 900 nå med den bakgrunnen jeg har lastet ned.

Ha en fin dag!

Klem Cathrine :-)

Tips til andre bloggere på Blogspot. | Moseplassen

3 oktober 09

[...] * Bakgrunn på bloggen – bilde . [...]

TurboLotte

4 oktober 09

Hei igjen! Ja nå har jeg testet ut på kattebloggen også. http://www.kattenepamovik.blogspot.com

Men bakgrunnen blir litt forstørret i forhold til hvordan jeg lager den i photoshop.. hmmmm. Men må vel bare tenke litt når jeg lager den. Men uansett virker det strålende.

Anng den -h greia i bildelinken. Når jeg lagde den i dag så var ikke den -h greia med i linken? Kanskje de har gjort noe med det?

Ble ikke noe fornøyd med den jeg har nå der. Men jeg skal lage en ny. Men nå er det sent på kvelden og hodet er litt proppa. Ha-ha!! La inn en link til denne siden på testbloggen min også. ;-)

Katarina

17 oktober 09

Hei
Tusen takk for noen supre tips! Men jeg skriver nå til deg for jeg plages. Har tidligere laga meg 3 kolloner,og nå når jeg skal legge til ett bilde i bagrunnen,ender halve bloggen min med å være hvit…
Hva gjør jeg galt? Jeg har sjekket at adr linjen er riktig.

Klem til deg,for den fantastiske jobben du gjør!

Anne

18 oktober 09

Turbolotte, jeg har glemt å følge opp dette.. *rødme*

Katarina, jeg har sendt deg en epost, så kan vi ta det videre der :)

Ingrid

25 oktober 09

Takk for hjelpen!!! Super gøy å prøve selv på dette!

Ellen Karin

29 oktober 09

Kjempebra forklaring!!! Jeg fikk til!

Anne

29 oktober 09

yey :D jeg blir alltid superglad når noen sier det!

Line

11 november 09

Hmm, virker som alle får til detta untatt meg?! Når jeg gjør sånn som det står her havner bildet bak teksten, og ikke på sidene! Noen tips til hva jeg gjør feil?? :)

Miriam

12 januar 10

Hei. Jeg fikk ikke dette til. Fikk bare til et lite bilde som bakrgrunn… Vil ha hele bakgrunnen i et bilde.. Tips?

Anne

12 januar 10

Miriam, Ja, mest sansynlig så har du ikke fjernet/endret bakgrunnsbildeadressen slik jeg oppgir over. Sender deg en epost i morra jeg, slik at jeg kan hjelpe deg skikkelig.

Gry K

25 januar 10

Hei!

Har så lyst til å prøve dette med bilde som bakgrunn, så jeg starta med å laste ned Photoshop 7 (free downloand) etter å ha pakka opp alle filene, skulle jeg fylle ut et lite skjema med serienummer til slutt, men hvor finner jeg dette SERIENUMMERET????….så der stoppa det seg ja…
Har du tips? Blir kjempeglad for svar.

…Et lite skritt av gangen, blir til et stort steg etterhvert….

Klem Gry K

Martine

5 februar 10

Tusen takk for at du har laga en kjempenyttig blogg. Jeg har brukt tipsene dine heftig, og bloggen din er lagret i favoritter for lenge siden. :)

Nå har jeg, med din hjelp, fått fiksa litt på bloggen min. Ta gjerne en titt om du vil.

Lineg

12 mars 10

Hei takk for flotte tips.

Jeg klarer imidlertid ikke å få dette til. Har nå forsøkt med mange bredder, men bildet vil ikke dekke hele skjermen :-( Jeg har en ekstra bred skjerm, så kanskje det er noe av problemet.

En annen ting jeg førsøkte på var å kopiere inn HMTL-koden til en free-bakgrunn og legge som gadget og deretter endre bildekoden her. Det gikk bra, men også her er bredden problemet. jeg synes imidlertid det er flottere dersom side elementene står stille, og det gjør det dersom jeg benytter denne siste måten.

Hjelp – har du noen flere tips. Jeg har forsøkt med bredde helt opp til 3500…

Anne

12 mars 10

Hei Lineg.
Det at bildet ikke vil dekke er nok fordi du gjøre en liten feil underveis, og ikke setter inn rett bilde. Jeg kan godt hjelpe deg med dette om du vil, men, jeg har et bedre forslag…

Gå til bloggens forside, der finner du nyeste bloggtips, som viser til en helt ny mal-velger som har kommet til blogspot. Der er det bakgrunner med. og alt kan gjøres helt uten å skrive en eneste kode.
Jeg har ikke sett noe mulighet for å laste opp eget bilde, men det kan hende det er uten at jeg har sett. Uansett så er det sikkert mulig, men jeg veit ikke hvordan, enda. Om jeg setter meg ned og pønsker det ut så blir det tippost på det, men enn så lenge så er det altså greie bakgrunner i velgeren.

Inger Lise

18 mars 10

Å så flott at jeg fant denne bloggen, her stod det mye som til og med jeg skjønner:)
Jeg har nå prøvd å følge dine punkter for å lage en farge til bakgrunnen i bloggen min, men jeg klarer ikke å finne denne i nedtrekksmenyen på »Skrift og farge» Jeg ønsker kun en farge på sidene og ikke over hele siden.. Hvordan får jeg dette til?

Og så ønsker jeg å benytte meg av google analytics for å telle besøkende og lurer da på hvor jeg skal sette inn HTML koden?

Anne

18 mars 10

Hei Inger Lise, jeg har tips på begge tingene du lurer på:

Statistikk, det står der hvor du setter inn koden: http://moseplassen.com/2009/07/statistikk-pa-bloggen-hvem-hva-hvor-hvordan/

Bakgrunnsfarge http://moseplassen.com/2009/08/blogspot-tips-bakgrunnsfarge-pa-bloggen/
Denne gjør slik at du kan ha hvitt bak teksten og farget på sidene.
Dersom du ikke forstår og kan følge den så spør i kommentarfeltet til den posten.

Se eventuelt: http://moseplassen.com/2010/03/blogspot-har-kommet-med-noe-helt-fantastisk/
Dette er de helt flonk nye malene til blogspot.

Caroline:)

1 november 10

Hei jeg fant en side der det er mange flotte bakgrunner til blogger. Men de har html koder til bildene hvor skal jeg legge inn html koden for å få bakgrunnen på bloggen ? her er siden –> http://www.blogblings.com/ hadde vært supert om du kunne hjulpet meg ! :D

Trine

30 mars 11

Hei:)

Tusen takk for gode tips til bloggen, men jeg får ikke helt til å laste opp bakgrunn. Hvis du ser på bloggen min så får jeg et fargefelt øverst? Hvordan blir jeg kvitt det?planen er å tegne og scanne inn bilder til bloggen selv, så dette er en test, men fikk det ikke til. Det ble og et slags hvitt filter over det.. Kan du hjelpe meg?`

Med vennlig hilsen Trine (Virvaria)

Anne

31 mars 11

Hei Trine.
Jeg tittet innom bloggen din, men kan dessverre ikke hjelpe deg. Jeg har dessverre meget begrensede html kunnskaper, og har desuten helt sluttet å leke med blogspot så jeg greier ikke henge med på hva som skjer med mulighetene man har.
Spør jorid på http://blogger-hjelp.blogspot.com/ mulig hun kan hjelpe.

Savbmehb

4 juli 11

akai cassette deck,

Legg inn en kommentar:

* E-postadresse vil ikke bli vist, og ikke gjort tilgjengelig for andre.
- Jeg besvarer alle spørsmål i det kommentarfeltet de stilles.
- Vil du ha et bilde av deg ved kommentaren? Skaff deg en Gravatar. Les mer om Gravatar her

You may leave comments in english and Ill answer in english. Your email address will not be shown.