Ikke tid til å lære koding? Sett sammen ditt eget bloggdesign på 1-2-3 med RRH Webdesigns designbygger

Her får du en liten innføring i hvordan du kan lage ditt eget bloggdesign på blogg.no ved bruk av CSS-koder i stilsettet. Slik kan du kan lære mer om hvordan du redigerer stilen på elementer som allerede finnes i et standard bloggdesign.

Følg veiledningen nøye og ta deg god tid til å lese både det som står her og i koden.

Steg 1 – Lag en testblogg!

Dette gjør jeg bestandig når jeg skal sette opp nye design, jeg bruker en testblogg. På den måten slipper min egen blogg å se ut som et eneste rot når jeg holder på å lage meg et nytt design. Gå inn på blogg.no, logg ut av din blogg(om du allerede er logget inn) og trykk «Lag blogg«. Testbloggen kan du kalle hva du vil, men du må passe på å bruke en e-postadresse og et passord du husker hvis du vil logge inn senere.  På den måten kan du prøve ut kodingen i fred og ro uten at det påvirker bloggen din, så kan du heller flytte designet når du er ferdig og fornøyd med resultatet.

Steg 2 – Begynn med designet

Når du har laget deg en testblogg og er innlogget på den så kan du begynne å tenke på designet du skal lage. Se i sidemenyen under Min blogg -> Design -> Velg design. Velg designet som heter «Bloggno»(eller trykk her for å aktivere det).

Når du har dette designet på bloggen din er det på tide å starte din egen redigering av designet. Trykk på Avansert design -> Stilsett. I denne boksen ligger det litt kode, denne koden fjerner du helt og skriver i stedet /* MITT EGET BLOGGDESIGN */ i boksen. Trykk lagre og gå inn på bloggen for å se hva som har skjedd. Du har nå et hvitt og fullstendig standardisert bloggdesign som kun bygger på blogg.no’s grunnkoder.

Gå tilbake til Avansert design -> Stilsett. Nå vil jeg at du skal kopiere inn hele koden under her, og deretter lime inn i tekstboksen for ditt stilsett:


@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700|Lato:100,300,400); /* Importerer skrifttyper jeg ønsker å bruke i bloggen. Du finner skrifttyper på www.google.com/fonts.*/
/*
--------------------
Skrevet av Rikke Rye-Holmboe. Bruk den til å lære noe nytt, lage noe fint eller del den med andre :-)
--------------------
LES MEG:
Dette stilsettet bygger på blogg.no's standard bloggoppsett. Det vil si at vi kun stilsetter elementer som allerede finnes i bloggen din, ingen endringer blir gjort i html-koden
I dette stilsettet kan du bestemme størrelse på bloggen, legge inn header, bestemme farger brukt i bloggen, skrifttyper og skriftstørrelser. Du har mulighet til å utforme et unikt design kun ved å redigere i dette stilsettet.Vær klar over at selv om hver eneste linje er forklart i dette stilsettet så må du belage deg på å bruke litt tid på å forstå hvordan css-koder fungerer. Dette gjelder spesielt om du skal legge til flere effekter på elementene som er lagt inn i stilsettet her.Hvis du vil få til noe som ikke er beskrevet her i koden så bør du ta deg tiden til å søke og lese deg litt opp på css. Css-tricks.com er en av veldig mange gode sider hvor du kan finne mye hjelp.
——————–
Kode med forklaringer.
——————–
Del 1: Endringer ut i fra blogg.no’s stilsettinnstillinger. Her trenger du ikke å endre noe med mindre du har spesielle ønsker om det.
——————–
*/
#doc2, #header, #wrapper, #main, #side {
padding: 0; /* Tar vekk forhåndskodet padding i containere som har fast bredde. */
position: relative; /* Gir muligheten til å sette elementer inni containerne til fixed eller absolute posisjon */
overflow: visible; /* Skjuler ikke elementer som går utenfor containeren. */
}
img, a img, #profile a img {
max-width: 100%; /* Setter en maksbredde på bilder til 100%, som vil si at bildet forminskes til rett størrelse om det er større enn containeren. */
border: 0; /* Fjerner ramme rundt profilbildet og andre bildelinker */
margin: 0; /* Vil ikke flytte bildet, det skal være på linje med alt det andre, derfor 0 i margin.*/
padding: 0; /* Ingen luft rundt bildet, det kan heller styres av containeren eller linjeskift. */
background: transparent; /* Fordi blogg.no av en eller annen grunn har satt en bakgrunnsfarge bak profilbildet. */
}
iframe {
max-width: 100%; /* Setter en maksbredde på youtubevideoer og andre iframe-elementer så de ikke blir for store */
}
.breadcrumbs {
display: none; /* Fjerner teksten(breadcrumbs) mellom header og innleggsdel, vi ordner heller et brukervennlig navigeringssystem i bloggen. */
}
#tpbnr, .bno_adboard {
width: auto !important; /* Gjør at reklamenecontainerne er i samme bredde som containeren de ligger i. */
text-align: center !important; /* Gjør reklamebannerne blogg.no har lagt inn midtstilt */
padding: 10px 0px; /* 10px luft over og under reklamen */
}
#footer {
border: 0; /* Vil ikke ha ramme over footerteksten */
margin-top: 50px; /* Vil ha footeren litt lenger ned fra resten av bloggen, avstand satt til 50px */
}
.entry .meta {
font-size: 100%; /* Blogg.no har satt dato/kommentarer-linja under overskrift i en mindre skriftstørrelse enn resten av bloggen. Setter det tilbake til vanlig størrelse */
}
/*
——————-
Del 2: Her kan du begynne å stilsette bloggen med farger, skrifttyper, størrelser og lignende.
——————-
Generelle innstillinger for skrift i bloggen
——————–
*/
body, html {
background: #f7f7f7; /* Bakgrunnsfarge bak bloggen */
font-family: ‘Open sans’; /* Standard skrifttype brukt i bloggen. Siden den jeg bruker er importert fra google fonts må jeg ha ‘ før og etter navnet på skrifttypen. */
font-weight: 400; /* Standard tykkelse på skrift i bloggen (kan settes til 300, 400, 500, 600 eller 700 */
font-size: 14px; /* Standard skriftstørrelse brukt i bloggen. */
color: #222222; /* Farge på skrift i bloggen */
}
body, body .entry * {
line-height: 1.8; /* Linjehøyde på tekst i bloggen. Her er den satt til 1.8 ganger skriftstørrelsen, kan justeres opp eller ned. */
}
/*
———————————————–
Bredde på bloggen
———————————————–
#doc2 er containeren til både header, innlegg/sidemeny og footer, altså hele bloggen. Det vil si at du kan sette en bredde på doc2 for å bestemme bredden på hele bloggen, da er det lurt å ha bredden på header, sidemeny og innlegg satt til prosent og ikke pixelstørrelser
———————————————–
*/
#doc2 {
width: 1100px; /* Når #doc2 er 1100 piksler bred så vil alle elementene inni være samme bredde, dvs header, wrapper og footer blir 1100 piksler brede */
margin: auto; /* Gjør bloggen midtstilt */
}
/*
———————————————
Toppreklamen i bloggen
———————————————
*/
#tpbnr {
background: #dddddd; /* Her kan du sette en bakgrunnsfarge bak toppreklamen. Jeg liker å gjøre dette for å skille den fra resten av bloggen */
border-bottom: 10px solid #ffffff; /* Her har jeg satt en 10piksler høy hvit ramme under toppreklamen */
margin-bottom: 90px; /* Jeg liker å ha litt luftrom mellom reklamen og bloggen, og her har jeg satt avstanden til 90 piksler. Kan endres */
}
/*
———————————————-
Headeren i bloggen
———————————————-
Her har du en rekke valg. Se denne videoen hvis du er usikker på hvordan du laster opp headerbildet: http://youtu.be/_SIQWJq0YYo
———————————————-
*/
#header {
display: block; /* Sett block til none dersom du ønsker å fjerne headeren helt fra designet */
width: auto; /* Gjør headeren like bred som resten av bloggen. */
height: 570px; /* Setter høyden på headeren, denne oppgir du i pixler. Sett en høyde som passer med headerbildet ditt */
background: #ffffff; /* Hvis du vil ha en bakgrunnsfarge bak headerbildet kan du sette den her */
background-image: url(‘http://imageshack.com/a/img913/6986/YkXneG.jpg’); /* Bildelinken til ditt headerbilde mellom ‘ og ‘ (se video nevnt over dersom du er usikker på innlegging av headerbildet) */
background-repeat: no-repeat; /* Jeg vil ikke at headerbildet skal gjenta seg dersom det er mindre enn header-containeren */
background-position: center; /* Jeg vil at headerbildet skal midtstilles dersom det er mindre/større enn headercontaineren */
background-size: 100%; /* Her kan du faktisk forstørre eller forminske headerbildet ditt dersom det ikke passer med bredden på bloggen. 100% betyr at headerbildet blir like BREDT som bloggen, uavhengig av om det var bredere eller smalere fra før. Dersom headeren er for lav eller for høy kan du justere opp eller ned height noen linjer over */
border: 10px solid #ffffff; /* Jeg ønsker en hvit ramme rundt headeren min. Denne kan du ta vekk, endre pikselstørrelse på eller endre farge på */
}
#headertext {
display: none; /* Jeg ville ikke vise bloggtittel/bloggbeskrivelse i mitt design, dermed har jeg satt den til none. Sett til block om du vil gjøre tittel/beskrivelse synlig */
position: absolute; /* Tillater oss å sette en absolutt posisjon på tittelen i headeren */
width: 100%; /* Headertext satt til 100% av headerens bredde */
text-align: center; /* Gjør teksten midtstilt, kan settes til left eller right */
margin-top: -90px; /* Gjør at bloggtittelen plasseres litt over headeren i stedet for inni, kan endres verdi på */
}
/*
—————————
Hoveddel og sidemeny
—————————-
*/
#wrapper {
background: ; /* Sett bakgrunnsfargen dersom du vil ha samme bakgrunnsfarge på hoveddel og sidemeny uten mellomrom. Vil du ha ulik farge på hoveddel og sidemeny, eller evt sidemeny/innlegg delt inn i bokser: Se kommentarer under */
margin-top: 10px; /* Vil du ha et luftrom mellom header og innlegg/sidemeny? Sett en pixelstørrelse på avstanden til header her. Jeg har satt 10 piksler*/
}
#main {
width: 75%; /* Her har jeg satt bredden på hoveddel med innlegg til 75% av bloggens totale bredde */
background: #ffffff; /* Her setter du en bakgrunnsfarge om du ønsker å ha samme bakgrunn på hele hoveddelen */
text-align: left; /* Gjør teksten i hoveddelen venstrestilt. Kan settes til center(midtstilt) eller right */
float: left; /* Gjør at hoveddel(innlegg) er på venstre side */
}
#side {
width: 24%; /* Her har jeg satt bredden på sidemeny til 24% av bloggens bredde (har 1% mindre for å lage et mellomrom mellom hoveddel og sidemeny )*/
background: #ffffff; /* Her setter du en bakgrunnsfarge om du ønsker å ha samme bakgrunn på hele sidemenyen */
text-align: center; /* Gjør tekst i sidemenyen midtstilt. Kan settes til left eller right. */
font-size: 90%; /* Setter skriftstørrelsen til å være 90% av størrelsen i resten av bloggen, fordi jeg liker at skriften i sidemenyen er litt mindre. Kan settes til hva du vil */
color: #666666; /* Farge på skrift i sidemenyen */
float: right; /* Gjør at sidemeny er på høyre side */
}
.entry, #archivebar {
padding: 10px 20px; /* Setter luftrom på sidene av innlegg. 10px er på topp og bunn, 20px er på høyre og venstre side */
background: ; /* Her setter du en bakgrunnsfarge om du ønsker å ha innleggene delt inn i bokser */
margin-bottom: 50px; /* Luftrom mellom hvert innlegg */
}
.bno_adboard {
margin-bottom: 50px !important; /* Luftrom mellom reklame under innlegg og neste innlegg */
}
#side div {
padding: 10px; /* Luftrom på div’ene i sidemenyen, 10px fra alle sider */
background: ; /* Her setter du en bakgrunnsfarge om du ønsker å ha sidemenyen delt inn i bokser */
margin-bottom: 30px !important; /* Luftrom mellom hver div i sidemenyen, !important står der for at sidemenyreklamen skal ha samme */
}
.entry .meta, .entry .meta a{
text-align: center; /* Gjør teksten i linjen under overskriften midtstilt. Kan settes til left eller right. */
color: #777777; /* Farge på tekst i linjen under overskriften */
margin-bottom: 20px; /* Mellomrom mellom klokkeslett/kommentarer/kategori-tekst og innleggstekst */
}
#profile a img {
margin-bottom: 10px; /* Lager et mellomrom mellom profilbilde og profiltekst */
}
/*
——————————-
Overskrifter og linker
——————————-
*/
a {
color: #666666; /* Farge på linker i bloggen */
-webkit-transition: color 0.5s;
transition: color 0.5s;
}
a:hover {
color: #e9527f; /* Farge på link når du holder over den */
}
h1, h2, h2 a, h3, h3 a, h4, h4 a { /* Generelt for alle overskrifter */
font-family: ‘Lato’; /* Skrifttype overskrifter */
font-weight: 300; /* Tykkelse overskrifter (100,300,400) */
color: #aaaaaa; /* Farge overskrifter */
line-height: 1.2; /* Generell linjehøyde på 1.8 i bloggen blir litt for høyt på overskrifter som er i så stor skriftstørrelse, så jeg setter overskrifter til 1.2 */
}
h1 { /* Bloggtittel i header */
font-size: 50px; /* Skriftstørrelse */
}
h2, h2 a { /* Overskrift innlegg */
text-align: center; /* Gjør overskriften midtstilt. Kan settes til left eller right */
font-size: 50px; /* Skriftstørrelse overskrift */
text-transform: none; /* Kan bytte none til lowercase for små bokstaver eller uppercase for store bokstaver */
}
h3, h3 a { /* Overskrift sidemeny */
font-size: 22px; /* Skriftstr oveskrift sidemeny */
text-align: center; /* Gjør overskriften midtstilt. Kan settes til left eller right */
text-transform: none; /* Kan bytte none til lowercase for små bokstaver eller uppercase for store bokstaver */
}
/*
——————————
Kommentardel
——————————
Her kan du redigere hvordan kommentarfeltet skal se ut
——————————
*/
#comments, #newcomment{
background: ; /* Vil du sette en egen bakgrunnsfarge bak kommentardelen gjør du det her */
padding: 20px; /* Luft fra kantene i kommentardelen */
}
#comments .owner, #comments .user, #comments .other {
text-align: left; /* Venstrestilt tekst i kommentarer. Kan settes til center eller right */
width: auto; /* Samme bredde som hoveddelen */
background: #f7f7f7; /* Bakgrunnsfarge i hver kommentar */
margin-bottom: 20px; /* Mellomrom mellom kommentarer */
position: relative; /* Ikke noe spesielt å forklare her, ordner bare så elementer inni kan være fixed eller absolute */
border: 0px solid #aaaaaa; /* Vil ikke ha ramme rundt kommentarer, så satte den til 0 */
padding: 1.5%; /* Luft fra kanter til tekst i kommentarer */
font-size: 90%; /* Vil ha litt mindre skrift i kommentarer enn resten av bloggen, så satte den til 90% */
}
#comments .owner {
width: 90%; /* Gjør eierkommentaren litt smalere */
margin-left: 7%; /* Innrykk på eierkommentarer, gir plass til «svar»-knapp */
}
#comments .owner:before {
position: absolute;
top: 0; /* Svar-knapp skal ligge helt i topp på svarkommentaren */
left: -7%; /* Svar-knapp settes like mye tilbake til venstre som eierkommentaren ble rykket inn */
content: ‘Svar:’; /* Tekst på svar-knappen */
padding: 2px 8px; /* Luftrom svarknapp */
background: #dddddd; /* Bakgrunnsfarge svar-knapp */
}
#comments .meta, #comments h4 {
color: #888888; /* Farge på kommentaroverskrift/klokkeslett */
}
h4 {
font-size: 22px; /* Skriftstørrelse navn i kommentarer */
}
#comments img.avatar {
border: 0px; /* Fjerner rammen på kommentaravataren */
position: absolute;
right: 10px; /* Avstand fra høyre */
top: 10px; /* Avstand fra topp */
border-radius: 100%; /* Gjør kommentaravataren rund. Sett til null for firkantig */
padding: 0; /* Trenger ikke luftrom */
}
textarea, input[type=»text»] {
padding: 5px; /* Luft fra kant til tekst der du skriver inn dine kommentarer */
background: #ffffff; /* Bakgrunn på kommentartekstfeltene */
border: 1px solid #dddddd; /* Kantlinje på kommentartekstfeltene */
border-radius: 5px; /* Avrundede kanter på kommentartekstfeltene */
outline: none; /* Fjerner den blå kantlinjen fra google chrome o.l */
}
input[type=»submit»] {
background: #dddddd; /* Bakgrunn på send kommentar */
border-radius: 5px; /* Avrundede kanter på send kommentar */
cursor: pointer; /* Setter musepekeren til å vise at dette er en knapp */
outline: none; /* Fjerner den blå kantlinjen fra google chrome o.l */
border: 0px; /* Vil ikke ha kantlinje her */
}
#newcomment h3 {
text-align: left;
}

Trykk lagre når du har limt inn koden i ditt stilsett.

Steg 3 – Begynn å redigere i koden

Nå har du fått et nytt design på bloggen, som ligner litt på dette. Denne guiden fortsetter i koden, så se forklaringene som står skrevet i koden i stilsettet.

Problemer underveis?
Husk å trykke forhåndsvis når du endrer inne i stilsettkoden, slik at du kan se at det ikke skjer noe galt. Forklaringer i koden er angitt med /* før og */ etter -> dette kalles å «kommentere ut», altså forteller du at det som står i mellom ikke er kode, kun kommentarer. Derfor må du være forsiktig med å ikke fjerne verken /* før eller */ etter kommentarer.
Skulle du være så uheldig å rote til designet når du gjør endringer kan du tilbakestille designet ditt under Design -> Designarkiv.

Nyttige linker
– RRH Webdesign: Generell bruksanvisning for designmaler
– W3Schools: Fargekoder til bruk i stilsettet
– Blogg.no: Designhjelp til bloggen
Css-tricks.com

Steg 4 – Fornøyd med designet?

Dersom du har endret i koden og fått et resultat du liker kan du enkelt legge designet inn på din egen blogg ved å velge designet «Bloggno», og deretter lime inn stilsettkoden fra testbloggen din inn i din vanlige blogg.

Noen siste ord
Det er veldig normalt å ønske å få til alt på en gang når man først begynner å redigere i designet på sin blogg. Dette er dessverre ikke mulig. Å lære seg koding krever tid og tålmodighet, men denne guiden gir deg forhåpentligvis grunnlag for å begynne med litt  redigering i stilsettet.

Du lurer kanskje på hvordan du kan legge inn eller fjerne ting som ligger i bloggen din, f.eks legge inn en meny under headeren, fjerne «Siste kommentarer» fra sidemenyen eller lignende. I stilsettet kan vi bare endre størrelse, posisjon og utseende på ting som allerede finnes i bloggen; Skal vi fjerne noe eller legge til noe nytt må vi inn i malene(HTML-koder) og gjøre endringer. Min sterkeste anbefaling er at du starter med å lære deg mest mulig CSS (stilsettkoden) før du begynner med HTML.