Web design: Relaxed

Relaxed

Designet av: neli.blogg.no 

Maks størrelse på bilder i innlegg: 1000 px

Tilleggsinformasjon

  • For å få profilbildet til å være en sirkel bildet være kvadratisk og IKKE rektangulært. Instagram bilder passer bra. Alt du trenger å gjøre er å lime inn bilde URL på HTML for forside, innlegg, kategori og arkiv. Bildestørrelse og rund form er allerede i koden.
  • Sidemenyen i dette designet er på toppen og den er "fixed". Det vil si at hvis du scroller nedover vil den fremdeles være på toppen og følge med nedover. Denne funksjonen kan fjernes i CSS. Finn: .fixed-nav-bar { under her skal det stå position: fixed; skriv om fixed til absolute slik at det blir position: absolute; husk å lagre etterpå.

 

Forhåndsvisning.


Kategori, arkiv og lenker består av drop-down ikoner.



 

Kodene finner du her:
CSS | Forsiden | Innlegg | Kategori | Arkiv



Design: Nordic Rose

Nordic Rose

Designet av: neli.blogg.no 

Maks størrelse på bilder i innlegg: 800 px

Tilleggsinformasjon

  • For å få profilbildet til å være en sirkel bildet være kvadratisk og IKKE rektangulært. Instagram bilder passer bra. Alt du trenger å gjøre er å lime inn bilde URL på HTML for forside, innlegg, kategori og arkiv. Bildestørrelse og rund form er allerede i koden.

 


 

Kodene finner du her:
CSS | Forsiden | Innlegg | Kategori | Arkiv



Bruk av moduler på blogg.no

Hva er egentlig moduler? Jeg har fått inntrykk av at mange på blogg.no ikke er fullstendig klare over hva en modul er og hvordan den brukes. Når du lager en modul legger du inn en HTML-kode fra designet ditt som skal være inkludert og lik på alle sider. Altså, det du legger inn på modul vil være likt på forside, innlegg, kategori og arkiv. Moduler gjør det mye enklere å modifisere designet ditt.

Hvis du gjør profilbildet ditt til en modul trenger du kun å gå inn på modulen for å endre det. Du trenger ikke å oppdatere forside, innlegg, kategori og arkiv. Den ene endringen du gjør gjelder for alle sider. Du må riktignok gå inn på forsiden, innlegg, kategori og arkiv første gangen for å erstatte profilbildekoden med en kode som identifiserer modulen, men etter å ha gjort det utføres alle  fremtidige endringer på siden for moduler.

 

Her er noen av mine moduler.

Profpic: Det er profilbildet mitt. Hvis jeg endrer det på modulen, endres det på alle sider.
Fonts: Dette er google skrifttypene jeg bruker. De krever en kode for å fungere på bloggen. Denne koden har jeg på en modul som er inkludert i alle sider slik at jeg fremtidig kan bytte skrifttyper uten å måtte lime nye koder inn på alle sider.
Fixednav: er toppmenyen.
Cicleheader: dette er headeren min, men den er ikke en vanlig header. Den består nemlig av 3 separate bilder. Hvis jeg ønsker å bytte ut bilder har jeg headeren på modul for å slippe å bytte bilder på alle bloggsider (Forside, innlegg, osv).
Bio: dette er teksten under "om meg". Det er en ren tekst uten HTML, men det er raskere å skrive den om på moduler. Endringene vil da dukke opp på forside, innlegg, kategori og arkiv, uten å måtte gå inn på hver og gjøre endringer.

 

Hvordan legge inn en modul?

Du må logge inn på din blogg > Min blogg (venstre sidemeny) > avansert design > moduler

Når du har trykket på moduler må du trykke på Ny modul.

Du må gi modulen et navn, det brukes til identifisering av modulen.

Lim inn ønsket del av en designkode.

Trykk Lagre modul.

Gå inn på den nye modulen.

Kopier koden under tekstfeltet.

Du skal nå kopiere modulkoden (markert med lilla). Den skal ERSTATTE HTML-koden du limte inn i modulen, der den er i designet. Du må riktignok gå inn på forsiden, innlegg, kategori og arkiv første gangen, men etter å ha gjort det skal alle fremtidige endringer gjøres på moduler.


Her ser du HTML-koden til min forside. Der det er markert med lilla var koden til profilbildet mitt som har blitt erstattet med identifiseringskoden til modulen.

 

Jeg håper det er mulig å forstå hva jeg mener. Dersom du har vansker med å forstå hva du skal gjøre kan du legge igjen en kommentar.

 



Rundt profilbilde med HTML og CSS

Man trenger faktisk ikke å gjøre et profilbilde rundt med et bilderedigerings program. Det kan nemlig gjøres med en enkel HTML og CSS kombinasjon. Jeg bruker denne koden veldig aktivt. Når du har lagt inn CSS-koden kan du selv velge hvilke bilder du ønsker å gjøre runde, enten det er profilbildet ditt eller andre bilder i designet. Det ser ut som koden ikke virker på bilder i innlegg.

VIKTIG: BILDET MÅ VÆRE KVADRATISK FRA FØR!

Altså alle sider på bildet må være like lange. Hvis bildet er avlangt enten vannrett eller loddrett vil det bare få veldig avrundede kanter, men det blir ikke rundt.

 

Du skal hit: Min blogg > Avansert design > Stilsett (CSS)

.img-circle {
border-radius: 50%;
}

Koden limes inn hvor som helst i stilsettet.

 

Her er koden for å identifisere bildet som en runding.

<img class="img-circle" src="URL TIL DITT BILDE HER" >

 

Dersom du ønsker å begrense størrelsen på bildet.

<img class="img-circle" src="URL TIL DITT BILDE HER" width="DITT TALL HER F.EKS 150">



The minimalist: design informasjon

The minimalist

Designet av:
neli.blogg.no 

Maks størrelse på bilder i innlegg: 700 px

Tilleggsinformasjon

  • For å få profilbildet til å være en sirkel bildet være kvadratisk og IKKE rektangulært. Instagram bilder passer bra. Alt du trenger å gjøre er å lime inn bilde URL på HTML for forside, innlegg, kategori og arkiv. Bildestørrelse og rundt form er allerede i koden.
  • Jeg har markert områder hvor du kan utføre endringer med kommentarer som bare er synlig i CSS og HTML kodene. De ser slik ut: /* Mine kommentarer */.

Kodene finner du her:
CSS | Forsiden | Innlegg | Kategori | Arkiv



Webdesign

Typen min lager diverse elektroniske prosjekter som hobby, og har en nettside hvor han legger de ut. Nettsiden har han hatt i noen år, men webdesign er kanskje ikke hans aller sterkeste side. En gang i april fikk jeg lov til å gjøre lettere endringer, men nå har siden fått et fullstendig ansiktsløft og et mer profesjonelt utseende.

Slik ser den ut nå

 

 

Slik var siden før jeg gjorde noe som helst







  • Jeg er 22 år og kommer fra Porsgrunn. Jeg er utdannet helsesekretær og har nettopp fullført påbygging til generell studiekompetanse.

    Jeg blogger mest for min egen del. Dette er en offentlig dagbok fremfor blogg, men en gang iblant legger jeg ut diverse innlegg som noen kanskje har nytte av. For eksempel webdesign eller giftfri kosmetikk. Dette finner du også i kategoriene mine.

  • hits