Kule designelementer du kan bruke i innleggene dine

God ettermiddag!

På lørdag skrev jeg et innlegg med en oppskrift, og i bunnen av det innlegget lagde jeg en boks til å ha et tips i. Koden var kjempeenkel, og med “HTML av/på”-funksjonen i blogginnlegg på blogg.no er det utrolig lett å legge inn også. Det var en som spurte hvordan jeg hadde laget boksen, og derfor tenkte jeg at jeg skulle dele det med dere, sammen med en rekke andre designelementer du kan bruke i blogginnleggene dine.

Alle elementene her er rosa, men det er veldig lett å bytte farge på dem. Du kan enten bruke fargenavn, eller så kan du bruke hex-kode. Du finner en oversikt over navngitte farger her, og bytt enkelt bare ut “pink” eller “Misty Rose” (det er de jeg har brukt) med fargenavnet som står i venstre kolonne.

Stort påskesalg hos Get Inspired: Spar opptil 70%

Alle boksene kan lett kombineres med tekststiler du allerede har tilgang til, som sentrering av tekst, understreker, bytte skrifttype, bytte størrelse og alt annet. Du fyller rett og slett bare inn tekst på vanlig måte.

Streker kan brukes til å skille innhold i innleggene dine, og rammene kan brukes for å gjøre innlegget mer interessant (om det trengs).

For å legge det til gjør du bare følgende:

1. Trykk på “HTML av/på”

2. Lim inn koden som står i de grå firkantene under elementet du vil legge inn. Juster deretter til fargen du vil ha.

3. Trykk på “HTML av/på” igjen

På bilder må du først legge inn et bilde, så kan du legge stilen som er markert på <img>-tagen, slik som i koden. Altså skal det stå etter bilde-urlen.

Strek

<div style="max-width: 80%; height: 2px; background-color: pink; margin: 10px auto;"> </div>

Prikkete strek (store)

<div style="max-width: 80%; border-bottom: 10px dotted pink; margin: 10px auto;"> </div>

Prikkete strek (små)

<div style="max-width: 80%; border-bottom: 4px dotted pink; margin: 10px auto;"> </div>

Boks

Fyll ut tekst her

<p style="max-width: 80%; margin: 30px auto; border: 1px solid pink; padding: 30px;">Fyll ut tekst her</p>

Blokk med bakgrunn

Fyll ut tekst her

<p style="max-width: 80%; margin: 30px auto; background-color: MistyRose; padding: 30px">Fyll ut tekst her</p>

Sky

Fyll ut tekst her

<p style="max-width: 80%; margin: 30px auto; background-color: MistyRose; padding: 30px; box-shadow: 0px 0px 20px 20px MistyRose; border-radius: 20px;">Fyll ut tekst her</p>

Rammer

<img alt="" data-height="600" data-width="600" imageid="103391642" src="//cdn.blogg.no/content/uploads/sites/474/2018/12/07174123/img_20180926_175653_656-2062398-1-1538327248200-n600.jpg" style="border: 1px solid pink; padding: 10px;" />

<img alt="" data-height="600" data-width="600" imageid="103391642" src="//cdn.blogg.no/content/uploads/sites/474/2018/12/07174123/img_20180926_175653_656-2062398-1-1538327248200-n600.jpg" style="border: 10px solid; border-color: pink MistyRose pink MistyRose;" />

<img alt="" data-height="600" data-width="600" imageid="103391642" src="//cdn.blogg.no/content/uploads/sites/474/2018/12/07174123/img_20180926_175653_656-2062398-1-1538327248200-n600.jpg" style="border: 1px solid pink; border-radius: 50%; padding: 10px;" />

Gi veldig gjerne beskjed om noe her er litt vanskelig å forstå, så kan jeg forklare litt bedre! Og kom også gjerne med forslag til lignende ting jeg kan vise og lære bort, for slike innlegg er de morsomste å skrive.

Q: Kommer du til å bruke noe av dette? Hva kunne vært bedre?

13 kommentarer

13 thoughts on “Kule designelementer du kan bruke i innleggene dine”

Vi kommer definitivt til å prøve ut noe av dette på bloggen vår – så tusen takk <3

Svar

Har lurt på det lenge, tusen takk for at du deler

Svar

girls with no job: Så bra! Bare hyggelig

Svar

CINDY Z.: Bare hyggelig!

Svar

Tusen takk for at du deler, men hvor skal jeg lime inn dette hen? Er det inne på selve innlegget eller på designet?

Svar

Therese Bråthen: Når du skriver et blogginnlegg, så trykker du på “HTML av/på” nede i høyre hjørne Der limer du inn, og så trykker du på “HTML av/på” igjen.

Svar

Okei, da skal jeg prøve på det! Tusen takk for hjelp

Svar

TUSEN TAKK for dette innlegget Du fortalte du skulle skrive det, så har ventet på det. Åh, du er så utrolig snill som gjør dette for bloggere, fantastisk!!

Svar

Therese Bråthen: Bare hyggelig, lykke til

Svar

Liv Hege: Ååå, det er bare hyggelig Kjempegøy å kunne dele kunnskap!

Svar

It’s amazing to pay a quick visit this site and reading the views of all mates on the topic
of this post, while I am also zealous of getting experience.

Svar