hits

Web design: Relaxed

Relaxed

Designet av: neli.blogg.no 

Maks strrelse p bilder i innlegg: 1000 px

Tilleggsinformasjon

  • For f profilbildet til vre en sirkel M bildet vre kvadratisk og IKKE rektangulrt. Instagram bilder passer bra. Alt du trenger gjre er lime inn bilde URL p HTML for forside, innlegg, kategori og arkiv. Bildestrrelse 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 vre p toppen og flge 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.

 

Forhndsvisning.


Kategori, arkiv og lenker bestr av drop-down ikoner.



 

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



Design: Nordic Rose

Nordic Rose

Designet av: neli.blogg.no 

Maks strrelse p bilder i innlegg: 800 px

Tilleggsinformasjon

  • For f profilbildet til vre en sirkel M bildet vre kvadratisk og IKKE rektangulrt. Instagram bilder passer bra. Alt du trenger gjre er lime inn bilde URL p HTML for forside, innlegg, kategori og arkiv. Bildestrrelse 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 ftt inntrykk av at mange p blogg.no ikke er fullstendig klare over hva en modul er og hvordan den brukes.Nr du lager en modul legger du inn en HTML-kode fra designet ditt som skal vre inkludert og lik p alle sider. Alts, det du legger inn p modul vil vre likt p forside, innlegg, kategori og arkiv. Moduler gjr det mye enklere modifisere designet ditt.

Hvis du gjr 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 gjr gjelder for alle sider.Du m riktignok g inn p forsiden, innlegg, kategori og arkiv frste gangen for erstatte profilbildekoden meden kode som identifiserer modulen,men etter ha gjort det utfres allefremtidige 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 mtte lime nye koder inn p alle sider.
Fixednav: er toppmenyen.
Cicleheader: dette er headeren min, men den er ikke en vanlig header. Den bestr 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 erteksten under "om meg". Det er en ren tekst uten HTML, men det er raskere skrive den om p moduler. Endringene vil da dukke opp pforside, innlegg, kategori og arkiv, uten mtte g inn p hver og gjre endringer.

Hvordan legge inn en modul?

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

Nr 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 ERSTATTEHTML-koden du limte inn i modulen, der den er i designet. Du m riktignok g inn p forsiden, innlegg, kategori og arkiv frste gangen, men etter ha gjort det skal alle fremtidige endringer gjres 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 hper det er mulig forst hva jeg mener. Dersom du har vansker med forst hva du skal gjre kan du legge igjen en kommentar.



Rundt profilbilde med HTML og CSS

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

VIKTIG: BILDET M VRE KVADRATISK FRA FR!

Alts alle sider p bildet m vre like lange. Hvis bildet er avlangt enten vannrett eller loddrett vil det bare f veldig avrundede kanter, men det blir ikkerundt.

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

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

Koden limes inn hvor som helst i stilsettet.

Her er kodenfor identifisere bildet som en runding.

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

Dersom du nsker begrense strrelsen 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 strrelse p bilder i innlegg: 700 px

Tilleggsinformasjon

  • For f profilbildet til vre en sirkel M bildet vre kvadratisk og IKKE rektangulrt. Instagram bilder passer bra. Alt du trenger gjre er lime inn bilde URL p HTML for forside, innlegg,kategori og arkiv. Bildestrrelse og rundt form er allerede i koden.
  • Jeg har markert omrder hvor du kan utfre endringer med kommentarer som bareer 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 gjre lettere endringer, men n har siden ftt et fullstendig ansiktslft og et mer profesjonelt utseende.

Slik ser den ut n

 

 

Slik var siden fr jeg gjorde noe som helst







  • 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 milj og brekraft, kologisk kosmetikk eller webdesign. Dette finner du ogs i kategoriene mine.