Bloggtips: Bilde og tekst i toppen på bloggen (header)

Denne posten tar for seg det som heter header, altså bildet og teksten øverst på bloggen.
Ulike bloggmaler tillater ulikt, ikke alle gir deg mulighet for å laste opp bilde. For blogspot så er det mulig for de fleste av malene, for eksempel den mye brukte Minimamalen. For wordpress så er dette mulig for utvalgte maler, søk etter maler med «custom-header».

Først noen småfakta:
* Teksten og eller bildet øverst på en blogg fører deg som oftest fra en underside til forsiden av bloggen.
* Du kan ha tekst, eller bilde, eller bilde og tekst.
* Det er et viktig at du skriver inn navnet på bloggen slik det skal være. Bloggnavnet leses av datamaskiner også, ikke bare mennesker, så ikke sett inn et punktum for å skjule navnet.

.

Bare tekst:

Det aller enkleste valget av alle.
Du har som oftest to muligheter, en for tittel og en for undertittel (kalles også beskrivelse og slagord). Du må fylle inn tittel, undertittel er valgfritt.
Den bloggtittelen du fyller inn brukes også for å vise bloggen din i lenkelister og hos andre tjenester som lenker til bloggen din samt i faner mm. Derfor er det viktig å fylle inn dette feltet riktig selv om du ønsker at bloggnavnet skal vises med et bilde.
Hos blogspot endres dette:
— Tilpass – Innstillinger – Grunnleggende – Tittel og beskrivelse
Hos wordpress endres dette:
— Dashboard – Innstillinger – Bloggtittel og slagord

Oppdatert: Hvordan endre font og farge på tittel i blogspot
Gå til: Tilpass – Utforming – Skrift og farge
Du finner da på høyre side bla disse fire valg, klikk på de og velg det som passer.
* Farge for bloggtittel
* Farge for bloggbeskrivelse (= undertittel)
* Skrift for bloggtittel
* Skrift for bloggbeskrivelse

.

Bilde:

Svært mange maler tillater at du setter inn bilde i header, men ikke alle. Så om du ikke finner valgene som er nevnt under så er det et tegn på at malen din ikke tillater bilde.
Blogspot:
Gå til Tilpass – Utforming – Sideelementer
Øverste av alle sideelementene er navnet på bloggen, klikk på rediger.
Som du ser av illustrasjonen har du nå tre valg
* Bak tittel og beskrivelse, bildet legger seg bak og teksten du skriver inn i blogspot legger seg forran. Tittelen er nå klikkbar og fører til forsiden.
* I stedet for tittel og beskrivelse. Nå vises kun bildet, men tittelen er der slik at datamaskina kan lese den (viktig). Bildet blir nå klikkbart og fører til forsiden. Dette alternativet er det du bruker om du setter teksten rett på bildet i et bilderedigeringsprogram.
* Minsk til det passer. Dersom du merker av her så blir bildet skalert ned slik at det passer i bredden. Høyden på bildet er avhengig av hvor bredt bildet er, ønsker du lavere bilde så må du beskjære det før du laster det inn. Dette alternativet må merkes av før du laster inn bildet, det er usynlig når bildet er lastet opp.

WordPress:
Gå til Kontrollpanel – Utseende – Custum Header
Ganske rett frem, og litt ulikt fra mal til mal så her lar jeg deg få finne frem selv ;)

.

Beskjære bildet

Dersom du har bred blogg så blir det veldig voldsomt med et bilde i vanlig format øverst, det fyller ofte hele skjermen. Det er da smart å beskjære bildet så det blir lavere, slik at leserene slipper å skrolle seg forbi headeren for å finne det egentlige innholdet. Beskjære bildet må gjøres før du laster det opp til bloggen. Du kan gjøre det enten via programmet som fulgte med kameraet for å importere bilder fra kameraet, eller du kan bruke ett bilderedigeringsprogram (se nederst for tips)

Avsnittene under om beskjæring er lagt til etter oppfordring fra flere lesere som lurte på dette med høyder og beskjæring.
Vi har jo alle svært ulike størrelser på skjermene våre, så det som ser fint ut hos deg, fyller kanskje skjermen til noen andre. Femti prosent av mine lesere har skjerm som ikke er høyere enn 800px. Det går ikke an å oversette dette til hvor mange tommer en skjerm er på (kommer an på oppløsning), men bær med meg.

Digitale bilder tas enten i 3:5 eller 3:4 Jeg tror 3:4 er vanligest så da bruker jeg det som eksempel
- Dersom jeg har en vanlig smal blogg på 660 pixler bredde, og vil sette inn et ubeskåret bilde som fyller helt ut så blir det bildet 660x495px
- Dersom jeg har en bred blogg på 990 pixler bredde, og vil sette inn et ubeskåret bilde som fyller helt ut så blir det bildet 990x743px
Dette vil si at for femti prosent av mine lesere så vil header-bildet på den brede bloggen fylle hele vinduet.

Dersom du ønsker å ha bildet helt ut i full bredde så anbefaler jeg at du beskjærer så det ikke blir så høyt, altså at du klipper av deler av bildet i et redigeringsprogram. Nøyaktig hvor høyt bildet skal være er en smakssak, men jeg personlig synes det er fint om man holder seg under 400px, gjerne lavere også. Men som sagt, hva som passer for deg og din blogg er det du som bestemmer.

.

Tekst på bildet

Det finnes to ulike måter å få til å sette tekst på bildet i header på blogspot. Den ene er å bruke tekst skrevet inn i bloggen som forklart over, den andre er å sette teksten på bildet ved hjelp av bilderedigeringsprogram, og så legge bildet fremfor blogspot sin tekst. Dersom du setter på teksten i bilderedigeringsprogrammet så kan du velge fritt hvor på bildet teksten står, hvor stor skrift og hvilken font (font=hvordan teksten ser ut).

Bildet er beskjært og så er det satt tekst på i et bilderedigeringsprogram.

.

Sette sammen flere bilder

Mange lurer på dette, hvordan lage collager. Du trenger et bilderedigeringsprogram, og litt tålmodighet for å lære deg det, men når du er i gang så er det veldig kjekt å kunne.

Jeg har laget en collage av en rekke bilder, og satt på tekst. Alt er gjort i bilderedigeringsprogram.

.

Småtips:

* Det finnes masse ulike bilderedigeringsprogram. Photoscape er et fint relativt enkelt og gratis program som er godt egnet for å lage header. Jeg har dessverre ikke kapasitet til å lage en forklaring på hvordan man bruker programmet. Andre gratis bilderedigeringsprogram er Picasa og Gimp (gimp er komplisert å bruke men har en mengde funksjoner de andre mangler)

* Slik blir du kvitt ramma som er rundt toppbildet på Minimamalen:
Gå til Tilpass – Utforming – Rediger HTML
Skroll ned til du finner segmentet som starter med */Header
To steder i segmentet står det: border:1px solid $bordercolor;
Bytt ut tallet 1 med 0 begge stedene, og vips linjene rundt header blir borte.

* Jeg anbefaler alle å forsøke å ha et unikt navn på bloggen. Gjør gjerne noen bloggsøk på navnet du har lyst på før du oppretter en blogg, og sjekk samlelister om du kjenner til noen slike.

* Dersom du ønsker navigeringslinje/knapper (ala de jeg har rett under mitt bloggnavn) så har jeg skrevet om hvordan fikle til navigeringslinje på blogspot For WordPress så følger dette med malen, og det er ikke så greit å endre en wordpress.com mal.

* Se gjerne de andre bloggtipsene mine.