Designhjelp og koder

OBS! Kodene blir ikke lagt inn på denne listen før de er oppdatert. Bruk den gamle listen!


Alle forklaringer er skrevet av Christine Mysen, og kopiering av disse er strengt forbudt. Oppdager jeg likevel at noen legger forklaringene ut som sine egne, vil de få en advarsel før de blir rapportert til blogg.no. Slik kopiering er ulovlig i henhold til loven om opphavsrett til åndsverk, og kan politianmeldes!

Headeren:
- Mellomrom over header. FLYTTET TIL HOVEDBLOGGEN!
- Sette inn header uten å ødelegge designet. FLYTTET TIL HOVEDBLOGGEN!
- Fjerne bloggnavn og beskrivelse i header. FLYTTET TIL HOVEDBLOGGEN!
- Mellomrom mellom header og wrapper. FLYTTET TIL HOVEDBLOGGEN!
- Lage meny over, under eller i header.
- Lage dropdown-meny over, under eller i header.
- Fjerne blogg.no-linken under header. FLYTTET TIL HOVEDBLOGGEN!

Hele bloggen:
- Smal blogg. FLYTTET TIL HOVEDBLOGGEN!
- Midtstilt blogg. FLYTTET TIL HOVEDBLOGGEN!
- Stillestående bakgrunnsbilde. FLYTTET TIL HOVEDBLOGGEN!
- Mellomrom mellom sidebar og innlegg. FLYTTET TIL HOVEDBLOGGEN!
- Kort skillelinje mellom sidebar og innlegg. NY KODE PÅ HOVEDBLOGGEN!
- Lang skillelinje mellom sidebar og innlegg. NY KODE PÅ HOVEDBLOGGEN!

Innlegg:
- Dekorere overskriften. FLYTTET TIL HOVEDBLOGGEN!
- Et lite ikon ved siden av dato, klokkeslett, bloggkategori og kommentarer.
- Endre teksten på kommentarlinjen.
- Endre "X kommentarer" til "X søte kommentarer". FLYTTET TIL HOVEDBLOGGEN!
- Endre "X kommentarer" til "Kommentarer (X)". NY KODE PÅ HOVEDBLOGGEN!
- Fjerne infolinjen under overskriften. NY KODE PÅ HOVEDBLOGGEN!
- Sette inn en infolinje under overskriften i kategori og arkiv. NY KODE PÅ HOVEDBLOGGEN!
- Fjerne infolinjen under innlegget. NY KODE PÅ HOVEDBLOGGEN!
- Dekorere infolinjen. NY KODE PÅ HOVEDBLOGGEN!
- Fjerne dato, klokkeslett, bloggkategori og kommentarer øverst og/eller nederst.
- Endre farge, skrifttype og størrelse på teksten i innleggene. FLYTTET TIL HOVEDBLOGGEN!
- Vise hele innlegg i kategori og arkiv. FLYTTET TIL HOVEDBLOGGEN!
- Endre antall innlegg som vises på forsiden. FLYTTET TIL HOVEDBLOGGEN!
- Signatur i alle innlegg.
- Midtstille tekst.

OBS! Kodene blir ikke lagt inn på denne listen før de er oppdatert. Bruk den gamle listen!

Sidebar:
- Bokser i sidebaren.
- Dekorere overskrift på kategori, arkiv osv.
- Flytte sidebaren over på venstre side.
- Skjul sidebaren.
- Større profilbilde.
- Fjerne profilbildet, profiltekst, alder, hjemsted og/eller navn.
- Fjerne rammen rundt profilbildet.
- Fjerne google-reklamen i sidebaren.
- Flytte google-reklamen i sidebaren.
- Fjerne kategori, arkiv, siste kommentarer, siste innlegg og/eller lenker.
- Lag egen link-liste.
- Avsnitt i profilteksten.
- Få bred tekst, kursiv tekst osv. i profilteksten.
- Midtstille tekst.
- Ikon foran linker i kategori, arkiv osv.

OBS! Kodene blir ikke lagt inn på denne listen før de er oppdatert. Bruk den gamle listen!

Kommentarfeltet:
- Annen bakgrunnsfarge på kommentarer og kommentarboks.
- Dekorere linjen med navn, dato og klokkeslett.
- Endre det som står på linjen med navn, dato og klokkeslett.
- Fjerne profilbildet til den som kommenterer.
- Flytte profilbildet til den som kommenterer.
- Endre "send kommentar" knappen.
- Takk for kommentar-bilde.
- Endre det som står i kommentarboksen - navn, e-post, url, din kommentar, husk meg?.

OBS! Kodene blir ikke lagt inn på denne listen før de er oppdatert. Bruk den gamle listen!

Rammer:
- Utseende på rammer - forklaring og tips.
- Rundt hele bloggen.
- Rundt header, wrapper og footer (sammen).
- Rundt header, wrapper og footer (hver for seg).
- Rundt sidebaren.
- Rundt innleggene.

OBS! Kodene blir ikke lagt inn på denne listen før de er oppdatert. Bruk den gamle listen!

Effekter når du legger musepekeren over link:
- Annen farge.
- Mellomrom mellom bokstavene.
- Strek gjennom.
- Strek under, over eller på sidene.
- Ramme rundt.

OBS! Kodene blir ikke lagt inn på denne listen før de er oppdatert. Bruk den gamle listen!

Bloggeffekter:
- Dalende snø (små snøfnugg).
- Dalende snø (store snøfnugg).

OBS! Kodene blir ikke lagt inn på denne listen før de er oppdatert. Bruk den gamle listen!

Widgets:
- Mellomrom mellom widgets.
- Midtstille widgets.
- Legge inn widgets når du har fjernet/flyttet google-reklamen.

OBS! Kodene blir ikke lagt inn på denne listen før de er oppdatert. Bruk den gamle listen!

Annet:
- Hvor mange leser bloggen din nå.
- Hvor mange leser bloggen din nå, i dag, denne uken, denne måneden og totalt.
- Google-oversetter.
- Søk i bloggen-boks.
- Legg meg til som venn-link.
- Facebook liker-knapp.
- You might also like-boks.

OBS! Kodene blir ikke lagt inn på denne listen før de er oppdatert. Bruk den gamle listen!

Ting som ikke vises i nettleseren Internet Explorer:
- Skygger rundt header, innlegg osv.
- Skygge bak tekst.
- Runde hjørner.

OBS! Kodene blir ikke lagt inn på denne listen før de er oppdatert. Bruk den gamle listen!

Savner du noen koder kan du legge igjen en kommentar, så skal jeg prøve å finne ut av det. Jeg setter pris på at du sier ifra om du finner noen feil, slik at jeg kan rette på det.

Lykke til!

Avsnitt i profilteksten.

Gå inn på endre profil, finn stedet du vil ha avsnitt og skriv inn:

- En <br> for ny linje.
- To <br><br> for mellomrom.

Deretter lagrer du. Neste gang du publiserer et innlegg vil endringene vises på bloggen.

Tips:
- Jo flere <br> du skriver inn, jo større mellomrom blir det.

Lag egen linkliste i sidebaren.

Du kan plassere koden akkurat der du vil i sidebaren. Her beskriver jeg hvordan du legger den under Lenker. Jeg bruker denne koden til å lage listen "Blogger jeg liker" i hovedbloggen min.

- Gå inn på design > rediger > maler
- Søk (ctrl + f) etter Lenker
- Lim inn denne koden:

<h3>NAVN PÅ LINKLISTEN</h3>
<a href="ADRESSEN TIL SIDEN DU LINKER TIL" target="_blank">NAVN PÅ LINK</a>


Slik skal det se ut:
<h3>Lenker</h3>
<ul>
<tag:linklist>
<li>
<a href="${LinkURL}">${LinkName}</a>
</li>
</tag:linklist>
</ul>
</div>
</tag:if>
<h3>NAVN PÅ LINKLISTEN</h3>
<a href="ADRESSEN TIL SIDEN DU LINKER TIL" target="_blank">NAVN PÅ LINK</a>

<tag:if test="${HasProducts == 'true'}">

Tips:
- For å legge inn flere linker i listen, limer du bare inn koden flere ganger.

Slik skal det da se ut:
<a href="ADRESSEN TIL SIDEN DU LINKER TIL" target="_blank">NAVN PÅ LINK</a>
<p><p><a href="ADRESSEN TIL SIDEN DU LINKER TIL" target="_blank">NAVN PÅ LINK</a>
<p><a href="ADRESSEN TIL SIDEN DU LINKER TIL" target="_blank">NAVN PÅ LINK</a>
<p><a href="ADRESSEN TIL SIDEN DU LINKER TIL" target="_blank">NAVN PÅ LINK</a>

Jeg har markert <p> for å vise at dette må skrives inn, hvis ikke blir linkene lagt på linje og ikke under hverandre. Grunnen til at det er to <p><p> på andre linje er for at mellomrommet skal bli like stort som på resten - dette ser du når du legger ut koden.

Obs!
- Husk å skrive inn ditt eget navn på linklisten, adressen til siden du linker til og navn på linken.

Fjerne dato, klokkeslett, osv. under overskriften.

Fjerne "datoen" under overskriften:
- Gå inn på design > rediger > maler
- Søk (ctrl + f) etter EntryDate
- Fjern denne linjen: ${EntryDate}

Fjerne "klokkeslett" under overskriften:
- Gå inn på design > rediger > maler
- Søk (ctrl + f) etter EntryTime
- Fjern denne linjen; kl.${EntryTime}

Fjerne "bloggkategorinavn" under overskriften:
- Gå inn på design > rediger > maler
- Søk (ctrl + f) etter EntryCategoryLink
- Fjern denne linjen: i <a href="${EntryCategoryLink}">${EntryCategoryName}</a>

Fjerne "x kommentarer" under overskriften:

- Gå inn på design > rediger > maler
- Søk (ctrl + f) etter EntryCommentCount
- Fjern alt dette:

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


Tips:
- Du kan gjøre det samme med den nederste linjen under innlegget også. Da fjerner du akkurat det samme, men disse linjene finner du litt lenger ned på siden.
- Husk å fjerne det både på forsiden og innlegg. Hvis du skal fjerne den nederste linjen må du også fjerne det fra kategorier og arkiv.
- På linjen under innlegg har du også permalenke og tips en venn. Under ser du forklaringer på hvordan du fjerner disse.

Fjerne "permalenke" under innlegg:
- Gå inn på design > rediger > maler
- Søk (ctrl + f) etter Permalenke
- Fjern denne linjen: <a href="${EntryPermaLink}">Permalenke</a>

Fjerne "tips en venn" under innlegg:
- Gå inn på design > rediger > maler
- Søk (ctrl + f) etter tips en venn
- Fjern denne linjen:

<a href="http://share.blogg.no/share?url=${EntryPermaLink}&amp;title=${EntryTitle}">Tips en venn</a>

Flytte Google-reklamen i sidebaren.

Siden det ikke er lovlig å fjerne google-reklamen vil jeg forklare dere hvordan dere flytter den. Dere kan legge den nesten hvor dere vil på bloggen, men her forklarer jeg hvordan du legger den nederst i sidebaren.

 For å endre det på forsiden:
- Gå inn på design > rediger > maler
- Søk (ctrl + f) etter </tag:profile>
- Kopier linjen og fjern den
- Søk (ctrl + f) etter lenker
- Lim inn koden etter </tag:if>

Slik skal det se ut:
<h3>Lenker</h3>
<ul>
<tag:linklist>
<li>
<a href="${LinkURL}">${LinkName}</a>
</li>
</tag:linklist>
</ul>
</div>
</tag:if>
</tag:profile>
<tag:if test="${HasProducts == 'true'}">

For å endre det på innlegg, kategorier og arkiv:
- I stede for å søke på lenker, søker du på arkiv
- Lim koden inn under </tag:archivelist>

Slik skal det se ut:
<h3>Arkiv</h3>
<ul>
<tag:archivelist>
<li>
<a href="${ArchiveLink}">${ArchiveName}</a>
</li>
</tag:archivelist>
</tag:profile>
</ul>

Tips:
- Ønsker du et større mellomrom mellom det over kan du skrive inn <br> over </tag:profile>. Jo flere <br><br> du setter inn, jo større mellomrom.

Obs!
- Hvis du flytter google-reklamen vil også alle widgets flyttes.

Dette må du gjøre for å løse problemet:
- Gå inn på design > rediger > widgets
- Kopier alt, fjern det og lagre
- Gå inn på forsiden
- Søk (ctrl + f) etter ProfileDescription
-
Lim inn dine widgetskoder som vist under

Slik skal det se ut:
<p>${ProfileAge}, ${ProfileFrom}</p>
<p>${ProfileDescription}</p>
</div>
DINE WIDGETSKODER
</tag:if>
<tag:include module="sidebar"></tag:include>

- Gjør deretter det samme på innlegg, kategorier og arkiv.

Dalende snø på bloggen.

- Gå inn på design > rediger > maler
- Søk (ctrl + f) etter body
- Lim inn denne koden under:

<script src="http://snow-effect.googlecode.com/files/snow.js" type="text/javascript">
/***********************************************
* Snow Effect without images-by Kurt Grigg at http://www.btinternet.com/~kurt.grigg/javascript
* Script featured & available at Dynamic Drive at http://www.dynamicdrive.com/
* Please keep this notice intact
***********************************************/
</script>

- Gjør det samme på innlegg, kategori og arkiv

Slik skal det se ut:
<body class="front">
<script src="http://snow-effect.googlecode.com/files/snow.js" type="text/javascript">

/***********************************************
* Snow Effect without images-by Kurt Grigg at http://www.btinternet.com/~kurt.grigg/javascript
* Script featured & available at Dynamic Drive at http://www.dynamicdrive.com/
* Please keep this notice intact
***********************************************/

</script>
<div id="doc2">

Obs!
- Det er kun på forsiden det står <body class="front">, på innlegg, kategori og arkiv står det bare <body>

Strek over og under linken når du legger musepekeren over.

- Gå inn på design > rediger
- Søk (ctrl + f) etter hover
- Lim inn denne koden der hvor fargekoden står:

{COLOR:#000000; text-decoration:underline overline}

Slik skal det se ut:
a:link {color: #000000;}
a:visited {color: #000000;}
a:hover {COLOR:#000000; text-decoration:underline overline}
a:active {color: #000000;}

Tips:
- Hvis du ikke har hover skriver du bare inn hele linjen
- Endre 000000 til den fargekoden du ønsker

Strek på hver side av linken når du legger musepekeren over.

- Gå inn på design > rediger
- Søk (ctrl + f) etter hover
- Lim inn denne koden der hvor fargekoden står:

{color: #000000797B0;text-decoration:none; border-left:solid 1px; border-right:solid 1px;}

Slik skal det se ut:
a:link {color: #000000;}
a:visited {color: #000000;}
a:hover {color: #000000;text-decoration:none; border-left:solid 1px; border-right:solid 1px;}
a:active {color: #000000;}

Tips:
- Hvis du ikke har hover skriver du bare inn hele linjen
- For tykkere streker setter du inn et større tall, slik: {letter-spacing:5px}
- Endre 000000 til den fargekoden du ønsker

Ramme rundt linken når du legger musepekeren over.

- Gå inn på design > rediger
- Søk (ctrl + f) etter hover
- Lim inn denne koden der hvor fargekoden står: border:#000000 1px solid;

Slik skal det se ut:
a:link {color: #000000;}
a:visited {color: #000000;}
a:hover {border:#000000 1px solid;}
a:active {color: #000000;}

Tips:
- Hvis du ikke har hover skriver du bare inn hele linjen
- For tykkere ramme setter du inn et større tall, slik: {letter-spacing:2px}
- Endre 000000 til fargekoden du ønsker

Strek under linken når du legger musepekeren over.

- Gå inn på design > rediger
- Søk (ctrl + f) etter hover
-  Lim inn denne koden der hvor fargekoden står: text-decoration: underline;

Slik skal det se ut:
a:link {color: #000000;}

a:visited {color: #000000;}
a:hover {text-decoration: underline;}
a:active {color: #000000;}

Tips:
- Hvis du ikke har hover i ditt stilsett kan du lime inn hele linjen
Les mer i arkivet » Februar 2012 » Januar 2012 » Desember 2011

Søk i bloggen

Christine Mysen

23, Lunner

Jeg har skrevet bokserien "Hest og hemmeligheter" og er Norges yngste serieforfatter gjennom tidene!

Christines hovedblogg.

Ukens fineste bloggdesign

Her kårer jeg ukens fineste bloggdesign.

Meld deg på til neste ukes kåring!

Facebook

Bloglovin'

bloglovin

bloglovin

Andre sider med designhjelp

Annonser

hits