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.

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;">&nbsp;</div>

 

Prikkete strek (store)

 

 

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

 

Prikkete strek (små)

 

 

<div style="max-width: 80%; border-bottom: 4px dotted pink; margin: 10px auto;">&nbsp;</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 thoughts on “Kule designelementer du kan bruke i innleggene dine

  1. 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.

  2. 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!! 🙂

  3. 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.

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket med *

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top