Denne siden er en del av blogg.no-support Kontakt support  |  Infobloggen  |  Forsiden

hjelp.blogg.no



Å endre på designet

Bloggdesign

På denne siden finner finner du hjelp til enkle endringer du selv kan gjøre i bloggen din, inne i designbyggeren, og i CSS og HTML-malene.
Velg temaet du vil lese mer om i toppmenyen, eller bare scroll nedover.
Vi kommer til å utvide med flere tutorials og koder etterhvert.



Lære mer om html og css

Ønsker du å lære mer om css og html anbefaler vi disse sidene (på engelsk):

CSS:

HTML:

Du finner fargekoder her: Fargekart - hexkoder.


Designbyggeren

Med designbyggeren kan du endre på farger og skrifttyper, og du kan legge inn bakgrunnsbilder i bloggen din. Du kan også laste opp et bilde til headeren, og lage rammer rundt bloggen og innleggene
Den beste måten å lære seg på er å prøve seg fram selv.



CSS

CSS (cascading style sheets) eller "stilark" er et sett koder som forteller nettleseren din hvordan en webside skal se ut.

Stilarket for din blogg er det første du ser når du går inn på "Design" >> "Rediger"
(dersom du bruker et av våre standarddesign ser du ikke css-kodene, men en tekst med urlen til der selve stilarket ligger)

Her er stilarket for "Plain Blue". Du kan kopiere koden og lime den inn i "Stilark" hos deg for å ha et utgangspunkt.

Du finner fargekoder her: Fargekart - hexkoder.



HTML-malene

Dersom du vil legge til noe, eller fjerne noe fra bloggen, kan du gjøre det her. Vi anbefaler ikke ikke at du fjerner eller flytter på ting dersom du ikke er sikker på hva du holder på med. :)

Det er fire maler. En for forsiden, en for innlegg, en for arkivsidene og en for kategorisidene. Dersom du vil at en endring du gjør skal vises på alle sidene, må du endre i alle malene.

Malene består av koder, som bygger opp og setter inn elementer på siden. Det er css som gir utseendet på siden.

Slik ser html-malen ut:



Layout - hva betyr taggene i html?

De mest brukte taggene i bloggdesignet, og hva man kan gjøre med dem...

Jeg har ikke lagt alle de mulige kodene inn alle stedene. Du kan for eksempel bruke samme linje for bakgrunnsfarge på footer som jeg har vist i body. De fleste fungerer på nesten alt.

Du kan finne flere koder her: http://www.w3schools.com/cssref/


Se på bildet under for hva som ligger hvor i bloggen/hva områdene i bloggen heter
(trykk på bildet for større versjon med lesbar tekst).


Klikk på bildet for å se større versjon

Teksten inni /* slike tegn */ kalles for en kommentar. Den kan være med i css for å forklare, og vil ikke vises noen andre steder.

Css-koder:

body {
background-color: #cccccc; /* bestemmer bakgrunnsfargen i bloggen */
background-image: url('http://adressentilbildether.jpg'); /* setter inn bakgrunnsbilde */
background-attachment:fixed; /* gjør at bakgrunnsbildet står stille når man scroller */
background-position: top right; /* plasserer bakgrunnsbildet oppe til høyre. Variér med center, bottom og left */
backround-repeat: no-repeat; /* repeat-x vil repetere bortover, repeat-y vil repetere nedover */
color: #000000; /* setter tekstfargen på hele siden */
font-family: Arial, Tahoma, Helvetica, Sans-serif; /* bestemmer skrifttypen */
}
.doc2 { /* doc2 er boksen som bestemmer bredden på bloggen din og holder ting "på plass" */
width: 950px; /* her bestemmer du bredden på bloggen */
margin-left: auto; /* sett høyre og venstre marg til auto for å midtstille bloggen */
margin-right: auto;
}
#header {
width: 950px; /* setter bredden på headeren - bør være samme som bloggen */
height: 200px: /* setter høyden på headeren */
background-color: #cccccc; /* bestemmer bakgrunnsfargen i bloggen */
background-image: url('http://adressentilbildether.jpg'); /* setter inn bakgrunnsbilde */
backround-repeat: no-repeat; /* repeat-x vil repetere bare bortover, repeat-y vil repetere bare nedover */
}
#breadcrumbs { /* linjen under headeren, med link til blogg.no, forsiden din osv */
background-color: #cccccc; /* bruk background-color: transparent; om du ikke vil ha bakgrunn */
text-transform:uppercase; /* gjør alle bokstavene til blokkbokstaver (caps) */
}
#wrapper { /* dette er boksen som holder main og side sammen */
background-color: transparent; /* transparent bruker du dersom du vil at boksen skal være gjennomsiktig */
}
#main { /* dette er innholdsdelen av bloggen */
width: 700px; /* bredden på main - husk at main + side ikke må være større enn wrapper eller doc2 */
float: left; /* bruk float: right; for å ha bloggen til høyre og menyen til venstre */
}
#side { /* dette er sidemenyen */
width: 230px; /* bredden på side - husk at main + side ikke må være større enn wrapper eller doc2 */
float: right; /* bruk float: left; for å ha bloggen til høyre og menyen til venstre */
}
.entry { /* blogginnleggsdelen */
margin: 10px; /* gir deg en marg på 10 pixler rundt innleggene */
}
#profile {
display: none; /* fjerner profiltaggen helt - NB! det fjerner også linken til profilen og bli venn med */
}
h1, h2, h3, h4, h5 { /* Overskriftene. Du kan dele denne opp slik at det er forskjellig på hver */
color: #000000; /* bestemmer fargen på overskrifter (som ikke er linker) */
font-weight: bold; /* gjør teksten bold */
font-family: Arial, Tahoma, Helvetica, Sans-serif; /* bestemmer skrifttypen */
}
a, a:link, a:active, a:visited {
color: #ff0000; /* bestemmer fargen på linker */
}
a:hover {
color: #ffcccc; /* bestemmer fargen på linker når du holder pekeren over dem */
}
.entry img {
max-width: 580px; /* gjør at ingen bilder blir bredere enn 580px i bloggen. Justér tallet til bredden som passer for deg */
border-color: 5px solid #ff0000; /* setter ramme rundt bilder */
}
#footer { /*den nederste delen av bloggen */
font-size: 10px; /* setter størrelsen på teksten */
}
#comments .owner { /* kommentarer fra bloggeier */
background-color:#ffcccc;
border-bottom: 2px solid #bb0000; /* dette er streken over kommentaren */
border-top: 2px solid #bb0000; /* dette er streken under kommentaren */
}
#comments .user { /* kommentarer fra innloggede brukere */
background-color:#ffbbbb;
border-bottom: 1px dotted #000000;
border-top: 1px dotted #000000;
}
#comments .other { /* kommentarer fra andre (ikke innlogget) */
background-color: transparent;
border-bottom: 0px dotted #000000;
border-top: 0px dotted #000000;
}



Legge en meny under headeren

For å plassere en toppmeny under headeren må du legge inn koder i selve malene.
Her får du hjelp til å lage en enkel toppmeny som ser slik ut:

Du velger selv hva det skal stå på linkene, og du kan bytte ut fargene om du ønsker det.



Dette er CSS-koden som skal legges inn i css (kopier og lim inn nederst i css):
Legg denne inn først, ellers vil ikke menyen se riktig ut i forhåndsvisningen når du kontrollerer malen din.



/* START TOPPMENY */
#toppmeny {
width:950px;
height:44px;
/* De tre neste linjene lager den buede kanten nederst på menyen. Fjern disse tre linjene for å ha rette hjørner i stedet. */
-moz-border-radius: 0px 0px 10px 10px;
-webkit-border-radius:0px 0px 10px 10px;
border-radius:0px 0px 10px 10px;
}
div#toppmeny{
font-size: 28px;
/* linjen under denne setter fargen på menyen, og linker til bildet som lager den mørkegrå stripen */
background:#ececec url('http://design.bloggfiler.no/gyldenskau/vero/menu_transp_gray.png') repeat-x;
text-align:center;
padding:12px 0 14px 0;
}
div#toppmeny li {
display:inline;
/* dersom du får for lite plass mellom linkene endrer du det bakerste tallet på linjen under til noe lavere */
padding:0 40px;
}
div#toppmeny a, a visited, a links {
/* linjen under denne setter fargen på linken i menyen */
color:#000;
display:inline;
text-decoration:none;
text-align: center;
padding-bottom:8px;
}
div#toppmeny a:hover, div.toppmeny a:active {
/* linjen under denne setter fargen teksten får når du drar musepekeren over linken */
color:#000;
text-align: center;
/* linjen under denne setter fargen på stripen som kommer fram når du drar musepekeren over linken */
border-bottom:7px solid #f81865;
}
/* END TOPPMENY */



Og dette er koden som skal legges inn i malene:
Har du flere eller færre linker fjerner du eller legger til linjer etter behov (og plass).

<!-- START TOPPMENY -->
<div id="toppmeny">
<ul class="topmenu">
<li><a href="url_til_ditt_innlegg_her">Link 1</a></li>
<li><a href="url_til_ditt_innlegg_her">Link 2</a></li>
<li><a href="url_til_ditt_innlegg_her">Link 3</a></li>
<li><a href="url_til_ditt_innlegg_her">Link 4</a></li>
<li><a href="url_til_ditt_innlegg_her">Link 5</a></li>
</ul>
</div>
<!-- END TOPPMENY -->

Du limer inn hele denne koden inn i forsidemalen, rett over linjen som ser slik ut:
<div id="wrapper" class="yui-gc">
NB! Det er viktig at du plasserer koden på riktig sted. Bruk forhåndsvisningen til å sjekke før du lagrer.

Når du har lagt inn url til sidene/innleggene du vil linke til, og teksten du vil bruke, kopierer du hele koden din og limer den inn på samme sted i de andre malene også.
Eventuelt kan du redigere koden i notisblokk først, og så lime alt inn i malene.

Du finner fargekoder her: Fargekart - hexkoder.



Bytte ut kommentarteksten

For å endre teksten fra "Ingen/x antall kommentarer" til tekst av eget ønske, går du til designbyggeren og trykker "Rediger".

Der går du videre inn på "Maler (HTML)" og finner denne koden:

<tag:if test="${EntryCommentCount == 0}">
<a href="${EntryPermaLink}#comment">Ingen kommentarer</a>
<tag:elseif test="${EntryCommentCount == 1}" />
<a href="${EntryPermaLink}#comment">Én kommentar</a>
<tag:else />
<a href="${EntryPermaLink}#comment">${EntryCommentCount} kommentarer</a>
</tag:if>
</li>
</ul>
</div>
<div class="content">${EntryBody}</div>
<div class="meta">
<ul>
<li>${EntryDate} kl.${EntryTime} i
<a href="${EntryCategoryLink}">${EntryCategoryName}</a></li>
<li>
<tag:if test="${EntryCommentCount == 0}">
<a href="${EntryPermaLink}#comment">Ingen kommentarer</a>
<tag:elseif test="${EntryCommentCount == 1}" />
<a href="${EntryPermaLink}#comment">Én kommentar</a>
<tag:else />
<a href="${EntryPermaLink}#comment">${EntryCommentCount} kommentarer</a>

Der hvor det står "Kommentarer" kan du endre teksten til det du selv ønsker.



Lag din egen header i MS Paint

Du kan lage din egen header i et bildebehandlingsprogram. Her viser vi hvordan du gjør det i Paint (Win7). Paint er litt annerledes i XP og Vista, men prinsippet er det samme.
Headeren bør være like bred som selve bloggen din.



Under tabben "Komme i gang" kan du se hvordan du laster opp headeren til bloggen din. Du kan også laste den opp til arkivet og kopiere adressen derfra og lime rett inn i css.


Hvordan vet jeg om jeg har profiltaggen i bloggen?

Profiltaggen er den lille kodesnutten som setter profilen din inn i bloggen når profilen er fylt ut. Den styrer også den lille reklamen øverst i sidemenyen og om widgets skal vises i bloggen eller ikke. Vi tillater ikke at du fjerner reklamen i bloggen, så dersom du gjør endringer i designet bør du ikke fjerne profiltaggen.

Profiltaggen ser slik ut:

<tag:profile>
</tag:profile>

Mellom de to linjene ligger koden til selve profilen (den kan du fjerne om du vil).

Dersom du kan se den lille reklamen i sidemenyen din har du profiltaggen i bloggen. Du kan også se i html-malene om den ligger der.

Har du "mistet" den lille reklamen i høyremenyen kan du legge den inn igjen ved å kopiere koden over og lime den inn i html-malene. Den skal ligge mellom profilen og arkiv/kategorier.



Reklame i bloggen

Det er ikke tillatt å fjerne eller flytte reklamen blogg.no har plassert i bloggen. Toppbanneret skal ligge øverst i bloggen. Den lille annonsen skal ligge i øverste del av bloggen, rett under profilen. Har du fjernet profilen eller hele sidemenyen skal reklamen ligge øverst til høyre i wrapperen. Netboard skal ligge rett under første innlegg.
Du kan legge til inntil tre egne reklamebannere/sponsorbannere i bloggen.



Sette inn et sponsorbanner

Det enkleste er å lime koden inn i "Widgets". Da kommer banneret i høyremenyen din. "Widgets" finner du inne på "Avansert design" >> "Widgets". Dette passer for små, eller smale og høye bannere. NB! For at widgets skal fungere må du ha profiltaggen i bloggen.
Har du et lavt og bredt banner som ikke passer i høyremenyen må du plassere det et annet sted.


Her lærer du å sette inn et banner (bilde eller flash) rett over det øverste innlegget ditt. Du kan selvfølgelig velge å sette det inn et annet sted også, men vær obs på at om banneret er bredere eller mye smalere enn stedet der du setter det inn, vil det kunne gjøre rare ting med designet ditt.

Vi bruker et banner vi allerede har lastet opp til bildearkivet vårt. Du må selvfølgelig bruke urlen eller koden til det banneret du skal legge inn. Vi anbefaler ikke at du laster bildet/banneret opp i bildearkivet i bloggen, siden det da vil ta veldig lang tid før det lastes inn i menyen. Bruk den banneradressen sponsoren gir deg og hotlink bildet/banneret fra sponsorens nettside.

Legge koden inn i malen

Gå til "Avansert design" og velg ønsket mal. Finn disse linjene i koden (NB! Tallet etter limit kan være et annet hos deg):

<div id="main" class="yui-u first">
<tag:entrylist limit="30">

Mellom disse linjene plasserer du:

<div>

</div>

Så limer du inn koden eller bildeurlen mellom de to div-taggene.

<div>
<a href="http://faq.blogg.no/"><img src="http://bloggfiler.no/demoblogg.blogg.no/images/1082111-10-1300370542063.jpg" /></a>
</div>

Husk å bruke forhåndsvisning til å kontrollere om alt ser riktig ut før du lagrer.

Tips: Om du syns det er vanskelig å lage linken kan du legge bildet inn i et blogginnlegg først, linke det til riktig sted med verktøyet i editoren, og deretter kopiere html-koden til bildet/linken fra html-visning i innlegget.



Suksess! \o/

Og nå ser det slik ut i bloggen:




Ingen suksess? o_0

Dersom du ønsker å tilbakestille designet ditt til slik det var på et tidligere tidspunkt, kan du gjøre dette inne på "Design" >> "Designarkiv".

Dersom du ønsker å tilbakestille designet ditt til slik det var da du startet bloggen, kan du gjøre dette ved å velge et av våre standardtema inne på "Design" >> "Velg".



Sette inn en oversetter

Du kan legge inn en oversetter fra Google i bloggen din. Denne lar leserene dine velge hvilket språk de vil se bloggen i. Oversettelsen blir selvfølgelig i beste Google translate-stil, men om dette er noe du ønsker å ha i bloggen kan du legge den inn slik:

Gå til "Avansert design" >> "Widgets" og lim inn denne koden:
(dobbeltklikk på koden for å markere den)

<script> function googleTranslateElementInit() { new google.translate.TranslateElement({ pageLanguage: 'no' }); } </script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Oversetteren havner da øverst i bloggen din (du må ha profiltaggen i bloggen for at widgets skal fungere).



Om du ikke har profiltaggen i bloggen kan du i stedet legge koden i <head> i html-malene på de sidene du vil ha den på.



Sette inn en Twitterfeed

Du kan legge inn en feed fra Twitter i bloggen din. Koden til denne finner du hos Twitter ("Settings" >> "Widgets" >> "Create new"...). Denne artikkelen forteller hvordan du legger koden inn i bloggen.

Du kan legge den inn i "Widgets" som beskrevet i artikkelen over, og feeden havner da øverst i sidemenyen din, rett under profilen (du må ha profiltaggen i bloggen for at widgets skal fungere).

Om du ikke vil ha feeden så høyt oppe i menyen kan du i stedet legge koden rett inn i html-malene på de sidene du vil ha den på.



Sette inn favicon

Et favicon er det lille bildet som vises i adressefeltet i nettleseren, i bokmerket, og i fanen når du er inne på en nettside. Default favicon når du blogger hos blogg.no er den rosa med en hvit b. Du kan bytte til et mer personlig favicon dersom du ønsker det.

Koden du skal bruke er

<link rel="shortcut icon" href="url_til_bildet_her" type="image/gif" />
og du bytter ut url_til_bildet_her med urlen til bildet du vil bruke. Du må også bytte ut "gif" med henholdsvis "ico", "jpg" eller "png" dersom bildet du bruker er et av disse formatene. Kodelinjen legger du inn i html-malene rett over </head>.

Gratis favicons finner du for eksempel her, eller du kan lage ditt eget her.



Sette inn et slideshow fra Instagram

Du kan bruke Snapwidget til å legge et slideshow av Instagrambildene dine i sidemenyen, eller et annet sted i bloggen. Widgeten finner du her.

Slideboksen kan f.eks. se slik ut:

bilde

Når du har fylt inn informasjonen inne på snapwidget.com kopierer du koden, og legger koden inn i "Avansert design" >> "Widgets", eller plasserer den direkte i malene der du vil ha den.



Tilbakestille designet

Dersom du ønsker å tilbakestille designet ditt til slik det var på et tidligere tidspunkt, kan du gjøre dette inne på "Design" >> "Designarkiv".


Dersom du ønsker å tilbakestille designet ditt til slik det var da du startet bloggen, kan du gjøre dette ved å velge et av våre standardtema inne på "Design" >> "Velg design".

Til toppen