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

hjelp.blogg.no



Å endre på designet - del 2

Mer om design

På denne siden finner finner du hjelp til mer avanserte endringer du selv kan gjøre i bloggen din, inne i CSS og HTML-malene.
Vi kommer til å utvide med flere tutorials og koder etterhvert.

NB! Vår supportavdeling kan dessverre ikke hjelpe deg med avanserte designendringer i bloggen, det har vi ikke kapasitet til, men du kan gjerne sende inn forslag til ting du ønsker at vi skal legge ut tutorials for her i FAQ.



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.


Sette inn et søkefelt

Du kan legge inn et søkefelt i bloggen, slik at leserene dine kan søke på ord for å finne bestemte innlegg. Søkefeltet kan du plassere i sidemenyen, men du kan også velge å plassere det et annet sted. Her forklarer vi hvordan du legger et søkefelt inn i sidemenyen.



Gå til "Bloggdesign" >> "HTML" og velg siden du vil legge søkefeltet i. Scroll nedover til du finner kodelinjen for widgets:

<tag:include module="sidebar"></tag:include>
og lim inn denne koden rett over eller under:
(dobbeltklikk på koden for å markere hele)

<br />
<div>
<h3>Søk i bloggen</h3>
<form action="${AppUrl}index.bd?fa=search.do" name="search" method="post">
<input type="hidden" name="bl_id" value="${BlogID}" />
<input type="text" name="criteria" value="" size="14" maxlength="180" style="width: 150px;" id="soek" />
<input type="submit" value="Søk" />
</form>
</div>
<br />

Husk å lagre.
Du kan besøke infobloggen om du vil teste hvordan søket fungerer, før du legger det inn selv.
NB! Søket kan ikke ligge i "Widgets" eller i profilteksten ("Beskrivelse av deg"), da fungerer det ikke.



Enkle css-koder

Disse kodene fungerer på blogg.nos standarddesign, og på de fleste gratisdesign. Legg dem nederst i css/stilark for å "overskrive" koden som ligger der fra før, eller rediger i riktig tag om du heller vil det.


Ikke vise profilen:

#profile {
display:none;
}

Endre linjeavstand i innlegg:

.entry p {
line-height:16px;
}

Endre på innleggstittel:

.entry h2, .entry h2 a {
font-family: arial, tahoma, sans-serif;
font-size: 24px;
color: #bb0000;
}



Avansert html-redigering

Det finnes en rekke tags og variabler du kan bruke i bloggen.

Dette er en tag:
<tag:categorylist limit="50"> (start-taggen)
</tag:categorylist> (slutt-taggen)
Tags forteller bloggapplikasjonen hva den skal legge inn mellom dem.

Dette er en variabel:
${CategoryLink}
Variabler forteller bloggapplikasjonen hva den skal hente fram.

Eksempel:
Koden

<tag:categorylist limit="50">
  <ul><li>
  <a href="${CategoryLink}">${CategoryName}</a>   
  </li></ul>
</tag:categorylist>
vil vise listen over kategorier og linke til hver av dem. I dette tilfellet lister den inntil 50 kategorier.

Du kan flytte rundt på disse og plassere dem akkurat der du vil i bloggen din.
NB! Noen tags og variabler virker bare på bestemte sider, eller gir forskjellig innhold alt etter hvilken side de er på.

Her er listen over de tilgjengelige taggene og variablene:

archivelist

Viser lenker til arkivesidene (månedlige, ukentlige etc.) for bloggen.

<tag:archivelist limit="1-300">
${ArchiveName}
${ArchiveLink}
</tag:archivelist>


Attributter:

Navn Påkrevet Standard Beskrivelse
limit Nei 300 Maks. antall arkivsider som skal vises (1-300)

Variabler:

${ArchiveName} Navn på arkivet, f.eks Mai 2007
${ArchiveLink} Lenke til arkivet

Eksempel:

<tag:archivelist limit="50">
<a href="${ArchiveLink}">${ArchiveName}</a> <br />
</tag:archivelist>

categorylist

Viser liste over kategoriene du har laget i bloggen.

<tag:categorylist limit="maks">
${CategoryName}
${CategoryLink}
</tag:categorylist>


Attributter:

Navn Påkrevet Standard Beskrivelse
limit Nei 100 Maks antall elementer som skal vises (1-100)

Variabler:

${CategoryName} Kategorinavn
${CategoryLink} Lenke til kategorisiden

Eksempel:

<tag:categorylist limit="50">
<a href="${CategoryLink}">${CategoryName}</a> <br />
</tag:categorylist>

commentlist

Viser kommentarer for ett eller alle innlegg i bloggen.

<tag:commentlist
limit="1-3000"
sort="asc|desc"
global="true|false"
maxchars="-1-n">
${CommentText}
${CommentAuthor}
${CommentAuthorUrl}
${CommentAuthorEmailHash}
${CommentAuthorLinkIf}
${CommentDate}
${CommentTime}
${CommentDateTime}
${CommentArticleLink}
${CommentProfileUrl}
${CommentProfileImageUrl}
${CommentClass}
</tag:commentlist>


Attributter:

Navn Påkrevet Standard Beskrivelse
limit Nei 3000 Maks antall kommentarer som skal vises (1-3000)
sort Nei asc Sorteringsrekkefølge, asc eller desc
global Nei false Hvis "true", hent kommentarer fra alle innlegg i bloggen.
maxchars Nei -1 (alle) Begrens kommentaren til dette antallet tegn

Variabler:

${CommentText} Selve kommentaren
${CommentAuthor} Navn på kommentator
${CommentAuthorUrl} Url til kommentatorens blogg eller hjemmeside
${CommentAuthorEmailHash} MD5-sum av epostadressen til den som kommenterte
${CommentAuthorLinkIf} Viser en lenke hvis den som kommenterer oppgir en URL i kommentarfeltet. Hvis ikke vises navnet på kommentatoren.
${CommentArticleLink} Lenke til innlegget som er kommentert
${CommentDate} Dato for når kommentaren ble postet
${CommentTime} Tidspunkt for når kommentaren ble postet
${CommentDateTime} Dato + tidspunkt for når kommentaren ble postet
${CommentProfileUrl} Url til brukerprofil for logget inn blogg.no-bruker som postet kommentaren. (tom hvis bruker ikke har profil)
${CommentProfileImageUrl} Url til profilbilde. Se ${CommentProfileUrl} (tom hvis bruker ikke har profil)
${CommentClass} other (annen bruker), user (logget inn blogg.no bruker) eller owner. (bloggeier)

Eksempel:

<ul>
<tag:commentlist global="true" limit="10" sort="desc">
<li>${CommentAuthorLinkIf} om ${CommentArticleLink}</li>
</tag:commentlist>
</ul>

 

entry

<tag:entry>
</tag:entry>


Variabler:

${EntryID} Innleggets unike ID
${EntryTitle} Tittel
${EntryBody} Innhold
${EntryPermaLink} Permanent lenke til innlegget
${EntryHasTags} Om innlegget er tagget eller ikke (true/false)
${EntryTags} Liste over tagger
${EntryCategoryName} Navn på kategorien innlegget er postet i
${EntryCategoryLink} Lenke til kategorisiden innlegget er postet i
${EntryDate} Publiseringsdato
${EntryTime} Publiseringstidspunkt
${EntryDateTime} Publiseringsdato + tidspunkt
${FirstImage} Det første bildet i et innlegg
${EntryCommentCount} Antall (godkjente) kommentarer

Eksempel:

<tag:entry>
<h3>${EntryTitle}</h3>
<p>${EntryBody}</p>
<small>Postet ${EntryDate} @ ${EntryTime} i
<a href="${EntryCategoryLink}">${EntryCategoryName}</a>
<a href="${EntryPermaLink}">Permalink</a></small>
<tag:if test="${HasTags == 'true'}">
<tag:taglist>
<a href="${TagURL}" rel="tag">${TagName}</a>
</tag:taglist>
</tag>
</tag:entry>

Firstimage (variabel)

Viser det første bildet i et innlegg, for eksempel i kombinasjon med "maxchars" (som ikke viser bilder) - må brukes innenfor samme entry.

<tag:if test="${FirstImage != ''}">   (NB! de røde '' er to ', ikke ")
  <img src="${FirstImage}" />
  <tag:else />
  <img src="url-til-et-standard-bilde" />
</tag:if>

 

entrylist

Viser liste over innlegg i bloggen.

Viser ulike innlegg basert på hvor taggen brukes:

  • Forsidemalen: Alle innlegg
  • Arkivmalen: Kun innlegg fra aktuell periode
  • Kategorimalen: Kun innlegg fra aktuell kategori
<tag:entrylist limit="maks" offset="start" maxchars="antall tegn">
</tag:entrylist>

Attributter:

Navn Påkrevet Standard Beskrivelse
offset Nei 0 Start med innlegget i denne posisjonen i listen
limit Nei 30 (forside), 10 (arkiv og kategorier) Maks. antall innlegg som skal vises (1-500 (forside, arkiv), 1-1000 (kategori))
maxchars Nei -1 (alle) Begrens innleggets innhold til N antall tegn
mediaExclude Nei false Skjuler media (f.eks. video/podcast)
mediaTitle Nei false

Viser videotittel

mediaShare Nei true Viser deleknappen oppe i høyre hjørne på videoen
mediaShareBtn Nei false Vis "Del"-knappen under videoen/podcasten
mediaProfile Nei true Viser overlay med profilbilde og blogg nede i venstre hjørne på video
mediaShowCount Nei true Viser telleren (sett antall ganger) under video/podcast

Variabler:

${EntryID} Innleggets unike ID
${EntryTitle} Tittel
${EntryBody} Innhold
${EntryPermaLink} Permanent lenke til innlegget
${EntryHasTags} Om innlegget er tagget eller ikke (true/false)
${EntryTags} Liste over tagger
${EntryCategoryName} Navn på kategorien innlegget er postst i
${EntryCategoryLink} Lenke til kategoriesiden innlegget er postet i
${EntryDate} Publiseringsdato
${EntryDateRFC822} Publiseringsdato (formatert for RSS)
${EntryTime} Publiseringstidspunkt
${EntryDateTime} Publiseringsdato + tidspunkt
${EntryCommentCount} Antall (godkjente) kommentarer
${mediaInfo} Brukes sammen med mediaExclude="true" når man ønsker å dele opp video/podcast og teksten i "Beskrivelse". Video/podcast vil da ligge i ${mediaInfo} og teksten i ${EntryBody}

Eksempel:

<tag:entrylist>
<h3>${EntryTitle}</h3>
<p>${EntryBody}</p>
<small>
Postet ${EntryDateTime} @ ${EntryTime} i
<a href="${EntryCategoryLink}">${EntryCategoryName}</a>
<a href="${EntryPermaLink}">Permalink</a>
</small>
<tag:if test="${hasTags == 'true'}">
<tag:taglist>
<a href="${TagURL}" rel="tag">${TagName}</a>
</tag:taglist>
</tag>
</tag:entrylist>

 

if

Lar deg bruke if, else og elseif til å vise forskjellig innhold.

<tag:if test="condition">
<tag:elseif test="condition">
...
<tag:elseif test="condition">
...
<tag:else>
...
</tag:if>


Attributter:

Navn Påkrevet Standard Beskrivelse
test Ja Uttrykk

Eksempel:

<tag:entrylist>
<tag:if test="${EntryCommentCount == 0}">
Ingen kommentarer
<tag:elseif test="${EntryCommentCount == 1}">
En kommentar
<tag:else>
${EntryCommentCount} kommentarer
</tag:if>
</tag:entrylist>

 

include

Viser en modul.

<tag:include module="modul-navn" />

Attributter:

Navn Påkrevet Standard Beskrivelse
module Ja Navn på modulen

Eksempel:

<tag:include module="header" />

linklist

Viser lenker fra lenkearkivet i bloggen.


<tag:linklist limit="1-300">
${LinkName}
${LinkURL}
${LinkDescription}
${LinkHasDescription}
</tag:linklist>


Attributter:

Navn Påkrevet Standard Beskrivelse
limit Nei 300 Maks. antall lenker som skal vises (1-300)

Variabler:

${LinkName} Lenkens navn
${!LinkURL} Lenkens url
${LinkDescription} Lenkens beskrivelse
${LinkHasDescription} Om lenken har en beskrivelse (true/false)


Eksempel:

<tag:linklist limit="50">
<div>
<p><a href="${LinkURL}">${LinkName}</a></p>
<tag:if test="${LinkHasDescription == 'true'}">
<p>{LinkDescription}</p>
</tag>
</div>
</tag:linklist>

 

profile

Viser profilen din

<tag:profile>
${ProfileID}
${ProfileName}
${ProfileImage}
${ProfileGender}
${ProfileDescription}
${ProfileFrom}
${ProfileBirthDate}
${ProfileAge}
</tag:profile>


Variabler:

${!ProfileID} Profil-ID
${ProfileName} Nick/Brukernavn
${ProfileImage} Profilbilde (url)
${ProfileGender} Kjønn ('m' eller 'f')
${ProfileDescription} Beskrivelse
${ProfileFrom} Stedet du er fra
${ProfileBirthDate} Fødselsdato
${ProfileAge} Alder

Eksempel:

<tag:profile>
<tag:if test="${ProfileExists == 'true'}">
<div id="profile" class="clearfix">
<div>
<a href="${ProfileUrl}" title="${ProfileName}">
<img src="${ProfileImageUrl}" alt="${ProfileName}" />
</a>
</div>
<h3>
<a href="${ProfileUrl}">${ProfileName}</a>
</h3>
<p>${ProfileAge}, ${ProfileFrom}</p>
<p>${ProfileDescription}</p>
</div>
</tag:if>
</tag:profile>

 

rss

Viser innholdet fra en rss-feed.

<tag:rss url="feed-url" limit="maks">
${ItemLink}
${ItemDescription}
${ItemLink}
</tag:rss>


Attributter:

Navn Påkrevet Standard Beskrivelse
url Ja URL til feeden.
limit Nei 100 Maks. antall elementer som skal vises (1-100)

Variabler:

${ItemTitle} Navn
${ItemLink} Lenke
${ItemDescription} Beskrivelse

Eksempel:

<tag:rss url="http://miniblogg.no/blogg/rss" limit="10">
<div>
<p><a href="${ItemLink}">${ItemTitle}</a></p>
<p>${ItemDescription}</p>
</div>
</tag:rss>

 

 

video

Viser video

<tag:video></tag:video>


Attributter:

Navn Påkrevet Standard Beskrivelse
title Nei false Viser videotittel i videoen
share Nei true Viser deleknappen oppe til høyre i videoen
profile Nei true Viser profiloverlay nede til venstre i videoen
shareBtn Nei true Viser deleknapp under videoen
showCount Nei true Viser telleren under videoen

Eksempel:

<tag:video shareBtn="false" showCount="false"></tag:video>

 

Lykke til! :)

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å "Bloggdesign" >> "Velg design".



Bytte fonter (Google Fonts)

Har du lyst til å ha en kul skrifttype i bloggen din kan du enkelt bruke Google Fonts til dette.


Gå til Google Fonts
og finn den fonten du vil bruke. De har over 600 font-familier å velge blant.


Når du har funnet fonten du vil bruke trykker du på "Quick-use"-knappen.


Scroll ned til punkt 3. og velg "@import". Kopiér koden.


Så går du til "Bloggdesign" >> "HTML" >> "CSS" og limer koden inn helt øverst i stilarket.


Finn kodelinjen du vil endre font på.
Dette er kodelinjen som endrer fonten i bloggtittelen og på overskriftene i innleggene (NB! Det kan stå andre fonter og farge der hos deg. Se etter h1 og h2):

h1, h2 { font-family: Tahoma, Geneva, sans-serif; color:#4883d2; }

Legg din valgte font inn foran de andre. Er fontnavnet to eller flere ord må du bruke en ' på hver side, slik:
h1, h2 { font-family: 'Cinzel Decorative', Tahoma, Geneva, sans-serif; color:#4883d2; }

Nå kan du se resultatet i forhåndsvisningen. Husk å lagre når du er fornøyd.





Social Icons

Vi har laget 20 egne knapper/ikoner du kan bruke for å linke til dine sider på andre nettsteder. De ser slik ut:


NB! Dette er et bilde av dem. Klikk her for å se hvordan de ser ut "live"



Her er html-kodene du skal bruke:

<div id="sosiko">
<ul>
<li><a href="${ProfileUrl}"><div class="rund-social" id="bloggnosocial" title="Følg meg på blogg.no">
<span><img src="http://design.bloggfiler.no/gyldenskau/icons/white3232/bloggno.png" />
</span></div></a></li>
<li><a href="URL_TIL_DIN_BLOGLOVIN_HER"><div class="rund-social" id="bloglovinsocial" title="Bloglovin">
<span><img src="http://design.bloggfiler.no/gyldenskau/icons/white3232/bloglovin.png" />
</span></div></a></li>
</ul>
</div>
Lag flere <li> etter behov. Ikonene har logiske navn slik at det er lett å legge dem inn.

EKSEMPLER:

blogg.no:

<a href="${ProfileUrl}"><div class="rund-social" id="bloggnosocial" title="Følg meg på blogg.no">
<span><img src="http://design.bloggfiler.no/gyldenskau/icons/white3232/bloggno.png" /></span></div></a>

RSS:

<a href="${BlogUrl}index.rss"><div class="rund-social" id="rsssocial" title="Abonnér på RSS">
<span><img src="http://design.bloggfiler.no/gyldenskau/icons/white3232/rss.png" /></span></div></a>

Eksempel på andre (her bytter du bare ut tjenestenavnet og urlen):

<a href="DIN URL HER"><div class="rund-social" id="bloglovinsocial" title="Følg meg på bloglovin">
<span><img src="http://design.bloggfiler.no/gyldenskau/icons/white3232/bloglovin.png" /></span></div></a>

<a href="DIN URL HER"><div class="rund-social" id="youtubesocial" title="Følg meg på Youtube">
<span><img src="http://design.bloggfiler.no/gyldenskau/icons/white3232/youtube.png" /></span></div></a>

<a href="DIN URL HER"><div class="rund-social" id="githubsocial" title="Følg meg på Github">
<span><img src="http://design.bloggfiler.no/gyldenskau/icons/white3232/github.png" /></span></div></a>

Her er en liste over de tilgjengelige ikonene:
blogg.no, blogglisten.no, bloglovin, facebook, flickr, github, google+, instagram, linkedin, paypal, pinterest, prezi, RSS, skype, steam, tumblr, twitch, twitter, vimeo, youtube

CSS for social icons:

.rund-social {
border-radius: 50%;
width: 50px;
height: 50px;
position: relative;
background: #aaa;  /* ENDRER FARGEN PÅ SIRKELEN */
word-wrap: break-word;
display:inline-block;
}
.rund-social span a {
color: #fff;
}
.rund-social span a:hover {
color: #f81865;
text-decoration:none;
}
#sosiko ul li {
display:inline-block;
float:right;
margin-left:10px;
list-style-type: none;
}
.rund-social:hover {
background-color:#F9CFDD;
}
#bloggnosocial:hover {
background-color:#f81865;
}
#bloglovinsocial:hover {
background-color:#2EA9ED;
}
#instagramsocial:hover {
background-color:#3C6C92;
}
#googleplussocial:hover {
background-color:#DD4C39;
}
#facebooksocial:hover {
background-color:#415E9B;
}
#twittersocial:hover {
background-color:#00ACEE;
}
#linkedinsocial:hover {
background-color:#1B86BD;
}
#pinterestsocial:hover {
background-color:#D73532;
}
#youtubesocial:hover {
background-color:#D8281E;
}
#vimeosocial:hover {
background-color:#1BB6EC;
}
#steamsocial:hover {
background-color:#000;
}
#githubsocial:hover {
background-color:#000;
}
#rsssocial:hover {
background-color:#F2600B;
}
#flickrsocial:hover {
background-color:#FF0080;
}
#paypalsocial:hover {
background-color:#00457C;
}
#skypesocial:hover {
background-color:#00B0F6;
}
#tumblrsocial:hover {
background-color:#35506B;
}
#prezisocial:hover {
background-color:#1966CC;
}
#blogglistensocial:hover {
background-color:#FF656D;
}
#twitchsocial:hover {
background-color:#6441A5;
}
.rund-social span {
color: #fff;
padding: 9px 9px 0px;
display: block;
font-size: 14px;
letter-spacing: -1px;
text-align: center;
text-transform: uppercase;
vertical-align:baseline;
}



Tilbakestille designet

Dersom du ønsker å tilbakestille designet ditt til slik det var på et tidligere tidspunkt, kan du gjøre dette inne på "Bloggdesign" >> "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å "Bloggdesign" >> "Velg design".