Data & Bloggdesign

Plassere bakgrunnsbilde

Hvis du bare har et lite bilde du vil ha i det ene hjørnet, ordner du plasseringen av dette slik:

 

Hvor

I stilsettet ditt (Design -> Rediger) finner du avsnittet body {. Dette pleier å stå ganske langt oppe.

 

Koden

background-position: DIN POSISJON;

 

Lim inn koden mot slutten av body-avsnittet.

 

Bytt ut DIN POSISJON med ønsket posisjon:

- Venstre: left;
- Høyre: right;
- Venstre hjørne oppe: top left;
- Venstre hjørne nede: bottom left;
- Høyre hjørne oppe: top right;
- Høyre hjørne nede: bottom right;

 

Forhåndsvis for å sjekke og husk å lagre ;)

Repeterende bakgrunn

Kanskje du bare har et lite bilde som du ønsker å ha flere ganger etter hverandre, som et mønster?

 

Hvor

I stilsettet ditt (Design -> Rediger) finner du avsnittet body {. Dette pleier å stå ganske langt oppe.

 

Koden

background-repeat: repeat;

 

Lim inn koden under background-color eller -image. (Eventuelt etter background-attachment hvis du har med den.)

 

Forhåndsvis for å sjekke - og lagre! :D

Stillestående bakgrunn

Hvor

I stilsettet ditt (Design -> Rediger) finner du avsnittet body {. Dette pleier å stå ganske langt oppe.

 

Koden

background-attachment: fixed;

 

Lim inn koden under background-color eller -image.

Da skal du ha fått en bakgrunn som står fast, noe som gir et ryddig inntrykk :)

 

Sjekk med forhåndsvis-knappen at det ble riktig og ikke glem å lagre.

Bakgrunn

Her kommer mine forklaringer som angår bakgrunnen på bloggen.

 

 

Legge inn bakgrunn

Du vil sikkert ha en fin bakgrunn på bloggen din og ikke bare en farge. Som nevnt tidligere må du ikke bruke designbyggeren hvis du allerede har begynt å endre koder - da blir det borte.

Det første du må gjøre er å finne et bakgrunnsbilde. Jeg syns ofte det er penest med bare et slags mønster, for bilder med et motiv kan ofte se litt rart ut som bakgrunn - men dette er jo smak og behag. Det jeg pleier å gjøre er å google et tema jeg liker og enten 'pattern', 'background' eller 'desktop'. Feks 'forest pattern' eller noe sånt, og så se på bildene som dukker opp. Her skal man være litt forsiktig, for de fleste bilder har opphavsrett. Det holder ikke å oppgi Google som en kilde, for det er det strengt tatt ikke......det er kun en søkemotor.

Deretter lagrer du bildet på dataen, evt redigerer det hvis du vil og så laster det opp på nett igjen - jeg bruker Photobucket. Her må du finne URL'en til bildet, som starter med http:// og slutter med .jpg. Denne kopierer du og limer inn i feks notisblokk.

 

Hvor

I stilsettet ditt (Design -> Rediger) finner du avsnittet body {. Dette pleier å stå ganske langt oppe.

 

Koden

background-image: url('DITT BILDES URL-ADRESSE');

 

Bytt ut linjen background-color: #fargekode; med koden og legg inn URL'en til bakgrunnen din. Evt bare lim inn koden øverst - under body {.

Forhåndsvis for å sjekk at det ble riktig og husk å lagre! :)

 




Mellomrom over header

Her skal jeg forklare hvordan du kan få mellomrom/luft helt i toppen av bloggen din. Jeg slenger like gjerne med to metoder; én veldig enkel og én litt mer avansert. Dette gjør jeg i tilfelle en av metodene ikke fungerer for deg, for det kan skje.

 

Metode 1 - Stilsett/css

Den enkleste metoden er å legge inn en linje i stilsettet.

 

Hvor

Design -> Rediger

Du er nå i stilsettet. Scroll deg ned til avsnittet #body.

 

Kode

padding-top: 10px;

Lim inn denne linjen i slutten av avsnittet og justér tallet til det passer for deg - bruk forhåndsvis-knappen. Og ikke glem å lagre! :)

 

 

 

Metode 2 - Maler/html

Her er metoden jeg har brukt, men jeg har prøvd den over også - som fungerer helt fint. Så ja....bare et alternativ altså :)

Det som er viktig å huske på her er at du må gjøre det samme i både Forsiden, Innlegg, Kategori og Arkiv.

 

Hvor

Design -> Rediger -> Maler.

Søk (ved å trykke Ctrl+f) etter doc2. Eller bla til du ser denne linja: <div id="doc2"> Du skal lime inn koden etter dette.



Kode

<br>

 

Ser slik ut

<div id="doc2"><br>



Deretter limer du inn koden så mange ganger etter hverandre som du vil, spørs hvor stort mellomrom du vil ha. Jeg har to stk.

Husk å lagre mal for hver gang du gjør dette - 4 lagringer!

 



Joho!

Legge inn/endre header

Headeren

Først, angående det å lage en header, altså det bildet/feltet du har øverst i bloggen som en slags overskrift. Her finnes det mange programmer man kan bruke og det er også flere måter å gjøre det på. Felles for disse er at du lager et jpg-bilde som du laster opp i feks Photobucket. Man må nemlig ha bildets url (nettadresse) som skal legges inn i koden, og da må bildet ligge på nettet først.

Mange bruker Photoshop til å lage headerbildet, jeg bruker bildebehandlings-programmet Gimp - fordi det er gratis og enklere i bruk. Men det er smak og behag. Du trenger ikke å ha et avansert bilde heller, du kan godt bare bruke en eller annen bakgrunn med feks bloggnavnet ditt på. Når du skal begynne på en header må du først velge størrelse på "arket" - her kan man velge om man vil ha en lav, rektangulær header eller en mer kvadratisk en. Lag noe enkelt i starten og prøv deg frem.

En størrelse som passer fint for en header er: 700px i bredde/width og 300px i høyde/height.

 

Legge inn header

Her er en forklaring på hvordan du legger inn header du har laget, uten å ødelegge designet på bloggen. Når du først har begynt å endre kodene på bloggen din, så blir nemlig alt ødelagt hvis du går tilbake til å bruke designbyggeren til å legge inn header, så det må du ikke gjøre ;)

Hvor?
Design > Rediger


Her skal du være - stilsett (aka CSS). Da ser det ca slik ut.

Scroll deg nedover til du kommer til avsnittet #header.

 

Det er her du skal lime inn headerbildets url.

Det ser omtrent slik ut:

#header {

background-image: url('URL-EN TIL HEADEREN HER');

background-repeat: no-repeat;

width: 950px;

height: 500px;

}

 

Hvis du ikke har et slikt avsnitt i stilsettet ditt, så kopierer du alt i uthevet skrift og limer det inn helt nederst i stilsettet og legger inn headerens url.

 

Du kan deretter endre på om headeren skal repeteres (no-repeat til repeat), og du kan endre på vidden og høyden slik at det passer til header og blogg. Her må man bare prøve seg frem - bruk forhåndsvis-knappen. Og husk å lagre!

 

Midtstilt header

En liten ting til slutt. Det er mulig du også ønsker å midtstille headeren - det er ikke alltid at den legger seg midt på.

Da legger du inn

background-position: center;

over "background-repeat".

 

Gudd løkk! :D

Header

Her er mine forklaringer som angår headeren ("overskriftsbildet" om du vil) på bloggen.

Kom gjerne med ønsker om endringer og andre forklaringer, eller spørsmål.

 

 

 

Mellomrom mellom header og blogg

Her er en forklaring på hvordan du kan få mellomrom/luft mellom header og selve bloggen.

 

Hvor?
Design > Rediger


Her skal du være - stilsett (aka CSS). Da ser det ca slik ut.

Scroll deg nedover til du kommer til avsnittet #header.

 

Koden

margin: 0px 0px 20px 0px;

Kopier denne og lim den inn i slutten av avsnittet.

 

Det vil da se omtrent slik ut

#header {
background-color: #FFFFFF;
background-image: url(url-adressen til bildet);
background-repeat: no-repeat;
height: 420px;
width: 800px;
margin: 0px 0px 20px 0px;


Størrelsen på mellomrommet vil her bli på 20 pixler. Dette kan du endre på så det passer deg.

 

Håper du får det til, men spør meg gjerne hvis du lurer på noe!

Bloggdesign - diverse

Jeg får begynne bloggdesign-tutorials'ene mine med litt generell informasjon. Dersom du ikke er så dreven med koder og sånt, så ikke fortvil - jeg skal lage dem så korte og enkle som jeg kan, men likevel steg-for-steg.

Hvis man gjør noe feil, så er det alltid mulig å trylle seg litt tilbake i tid *myser*, ved å gå inn på 'Designarkiv' og tilbakestille. ('Design' - 'Arkiv')

Som mange sikkert har skjønt så er html-koder det beste å bruke for et fint design på blogg.no. Designbyggeren er helt grei hvis man ikke legger så mye vekt på detaljer, men er du litt pirkete så blir det fort svært begrenset. Men HUSK at når du først har begynt å redigere koder og gjøre om stilsett, så må du ikke gå tilbake til å bruke designbyggeren - da går alt arbeidet tapt og du kan ende opp med masse rot.

For å komme til de magiske kodene, går du til 'Design' - 'Rediger'. Og så skjer det meste under 'Maler', men også noe under 'Stilsett'.

Alltid huske å lagre når man har endret noe, men husk å 'forhåndsvise' først - så slipper man søl.

 

 

 

Noen nyttige snarveier

CTRL + A = Merk alt
CTRL + C = Kopier
CTRL + V = Lim inn
CTRL + F = Søk

 

Fargekart

Enten kan du gå inn på denne siden: html-color-codes.info, hvor du finner både fargekoder og litt info.

Eller så kan du bruke denne:



Skal forklare litt senere hvordan man skal bruke dem, så bare pust rolig og wait for it. ;)

 

Rammer

Man kan bruke rammer rundt ting hvis man vil, og da kan man velge mellom disse:

solid (vanlig ramme/rett strek), dotted, dashed, double, ridge, groove, outset og inset.

Endre type = bytt ut solid (hvis den opprinnelig er det) med en av de andre.

Endre tykkelse = bytt ut 2px med ønsket tykkelse.

Endre farge = bytt ut #000000; med ønsket farge.

 

Diverse koder

Disse kan du bruke både når du designer bloggen din og når du skriver innlegg (da må du trykke på HTML-knappen først).

Fet tekst: <b> DIN TEKST </b>

Kursiv: <i> DIN TEKST </ i>

Midtstill: <center> TEKST ELLER BILDE </ center>

Understreket tekst: <u> DIN TEKST </ u>

Legg til et bilde: <img src="URL TIL BILDET">

Lenke: <a href="URL TIL SIDEN"> NAVN PÅ SIDEN </ a>

 

Url

Det er ikke alle som vet hva 'url' er, men det er enkelt og greit hele adressen til en nettside.

Hvis du skal kopiere url'en til en side du skal linke til feks, må du få med hele adressen - med http://www. osv.

 

Url til bilder

Hvis du skal legge inn bilder på sidemenyen eller andre steder på bloggen, så må du ha en url til bildet som skal limes inn i en kode. Det vil si at du ikke bare kan kopiere bildet fra dataen din el.l., men du må laste opp bildet på et nettsted og så kopiere url til bildet (skal forklare det litt bedre senere). Jeg har tidligere brukt Google-kontoen min til å lagre bilder og hente url, men nå bruker jeg Photobucket, som gjør det veldig enkelt.

 



Håper du henger med neste gang - kom gjerne med ønsker om hva du vil ha forklaring på.

Spør og grav - evt send meg en mail på vikinghuldra@gmail.com!

Hjelp med design! Kommentar-boksene...

Jeg blir sprø. Kommentarboksene mine er hvite og gule og det samme er skriften. Så det er jo umulig å lese dem... Men jeg klarer pokkern ikke å finne ut hva slags kode eller hvor jeg skal lime den inn - kan noen hjelpe meg???

Har prøvd :

#comments.owner, #comments.other, #comments.user{
border: 1px solid #FFFFFF;
background-color: #000000;
}          (i stilsettet)

Men det skjer ingenting...

Urk.

 

Ny header!

Fy flaaaate, så lang tid det tok. Og jeg er ikke 100% sikker på om jeg liker den helt. Men er passelig fornøyd altså.

Nå må jeg finne ut hvordan jeg får innleggene fine igjen - der er det jo bare rot. Og kommentarene er for lyse til å kunne leses. Men jeg jobber videre jeg :D Syns det er litt gøy å fikle med sånt jeg. Hvis jeg får det til til slutt da hehe.



Hva syns dere da? Tror kanskje neste prosjekt blir mer etter tema (viking eller natur eller paganistisk osv...), enten det blir header eller noe annet.

 

Nå, hva mener dere?

Ser bloggen grei ut nå? Er det noe som ikke fungerer? Og går den veldig treigt hos dere?

Nå ser jeg html-koder i drømmene mine snart. *gurgler*

Jeg kommer til å lage en ny header snart, når jeg har tid og ork. Kanskje noen har lyst til å lage en til meg?? :D Og så kan det hende jeg endrer bakgrunner og sånt, hvis jeg finner noe bedre. Men resten er nogenlunde ferdig tror jeg.

Vil gjerne vite hva dere syns :) Konstruktiv kritikk er veldig bra :D



 

hits