>> DESIGN HJELP, KJÆRE BLOGGERE

HER ER DET LITT AV EN REKKE MED HTML-KODER DERE BARE KAN VRAKE OG VELGE IMELLOM. IKKE NOK MED DET, MEN DET ER OGSÅ ANDRE TIPS TIL HVOR MAN KAN FINNE FARGEKODER OG ANDRE BLOGGERE SOM HAR DESIGN HJELP. SÅ, OM DU KANSKJE IKKE FINNER NOE HER, KANSKJE DU FINNER NOE DER. DET ER BARE Å KOMMENTERE OM DET ER NOE DU LURER PÅ, ELLER LIGNENDE. JEG SYNS DET BARE ER KOSELIG Å HJELPE, SÅ FOR HÅPE JEG ER TIL HJELP FOR NOEN. Katrine



Enkle og grunnlegende koder:

Legg til et bilde - <img src="adressen til bildet">
Fet tekst   -   <b> tekst </b>
Midtstill    -   <center> tekst eller bilde </ center>
Kursiv   -   <i> Din tekst </ i>
Link   -   <a href="adressen til sidan"> Link Text </ a>
Større tekst - <font size=" Størrelsen (eks. 5) ">
CTRL + A = Merk alt
CTRL + C = Kopier
CTRL + V = Lim inn
CTRL + F = Søk


Hvordan legge inn en video fra Youtube?

Du må gå inn som vanlig på Post eller Nytt innlegg sånn du gjør når du lager et innlegg.
På Youtube er det et felt som heter embed ved hvert enkelt videoklipp.
Det som står i feltet kopierer du og limer inn i vinduet som kommer opp når du trykker på HTML-knappen.
Viktig at du STÅR i HTML-vinduet når du limer inn koden.
Når du går ut av HTML-vinduet og er tilbake i innleggsfeltet vil du fortsatt ikke se videoen, men en rute som representeres hvor videoen er limt inn. Du kan skrive tekst rundt der du ønsker det i forhold til videoen.
Trykk Lagre+publiserknappen og din video er på plass!
Skal du laste opp en video fra pcen din må du gå på video og ikke nytt innlegg.


Hvordan få markert ramme rundt header og innhold:

Denne koden skal du bruke: border: 2px solid #000000;

Hvor du skal legge den inn:

Den skal legges inn under #wrapper og #footer,
som du finner når du går inn i Design>Rediger>Stilsett .

Det vil da se slik ut:

#wrapper {
background-color: #FFFFFF;
background-image: url();
border: 2px solid #000000;
}
#footer {
background-color: #FFFFFF;
background-image: url();
border: 2px solid #000000;

Du kan skrive dotted istedet for solid dersom du ønsker en ramme som er prikket og ikke markert og hel.

Dashed = Mindre Prikker

Trykk på Lagre stilsett og du er ferdig.


Hvordan få bloggen sin midtstilt:

margin-left: auto;
margin-right: auto;

Denne kode skal du legge under header, #footer og #wrapper,
som du finner når du går inn i Design >Redige>Stilsett.

Den vil da se slik ut:
#header {
background-color: #FFFFFF;
background-image: url('LINK TIL DIN HEADER');
height: 236px;
margin-left: auto;
margin-right: auto;
background-repeat: repeat;
}
#wrapper {
background-color: #FFEFFC;
margin-left: auto;
margin-right: auto;
}
#footer {
background-color: #FFFFFF;
margin-left: auto;
margin-right: auto;

Trykk på Lagre stilsett og du er ferdig.


Hvordan få bloggen sin smalere:

Du må legge til denne koden: width: 770px;
som du vil finne når du går inn i Design>Rediger>stilsett.
Den skal du sette inn rett under der det står heigh165px;

Den vil da se slik ut:
#header { background-color: #FFFFFF;
background-image: url (linken til din header)
height: 165px;
width: 610px;
Etter du har gjort dette gjør du nøyaktig det samme der det står #wrapper og #footer.
Da vil det se ut som dette:
#wrapper {
width: 610px;
background-color: #FFFFFF;
}
#footer {
width: 610px;
background-color: #FFFFFF;


Trykk på Lagre stilsett og du er ferdig.


Hvordan få liten skrift i innleggene sine, i stedet for standarskriften:

Du må skrive inn denne koden-size: 8pt;
som du finner når du går inn i Design>Rediger>Stilsett.

Den skal plasseres slik og være markert med fet skrift:
#wrapper {
width: 610px;
background-color: #FFFFFF;
font-size: 8pt;
}
#footer {
width: 610px;
background-color: #FFFFFF;
font-size: 8pt;
}
a { color: #000000}
a:link { color: #000000}
a:visited { color: #510300}
a:active { color: #000000}
h1, h2, h3, h4, h5 { font-family: Arial, Helvetica, sans-serif; }
#header h1, #header p { display:none }
#header { color: #000000; #wrapper {background-color: #C4C4FD;border: 2px solid #000000;}#footer {background-color: #C4C4FD;border: 2px solid #000000;}
font-size: 7pt;}
h1 a, h1 a:link, h1 a:visited, h1 a:active { text-decoration: none; color: #000000; }

Trykk på Lagre stilsett når du er ferdig.


Hvordan få overskriften større:

Du må først finne /** Entry headers **/ i stilsettet ditt,
som du finner ved å gå inn i Design>Rediger>Stilsett.
Under der står det f.eks font-size: 20px;
For å få den større må dere bare skrive inn et større tall enn 20.
For å få mindre må du skrive inn et mindre tall en 20.


Litt mer stæsj til din blogg?

Her kommer noen linker til søte sider der du kan finne stæsj og Html-koder for å pynte litt på bloggen din. Du kan lage header i et veldig enkelt program også, mange muligheter for oss som liker stæsj!

- http://www.scrapblog.com/
Her kan du lage headere og bakgrunnsbilder som scrapbooking blant annet. Et eksempel på hva du kan lage finner du i form av denne headeren her som jeg kun brukte 5 minutter på å lage:

- http://www.carrielynnesworld.com/
Her er verdens søteste side hvor du får masse søtt som en liten Hello Kitty-klokke blant annet og Shoutmix, en chatboks som man enkelt og greit kan ha på bloggen sin.

- http://pretty-secrets.net/
Dette er en veldig jenteside altså, men mye koder og annet stæsj.

- http://www.widgetbox.com/
Her finner du veldig mange ting; kalendere, klokker, bakgrunner og mye mer.

 - http://www.photofunia.com/
Dette er en morsom side du kun setter inn bilder i ulike situasjoner. Man kan jo bruke det som header også eller bakgrunnsbilder.


Hvordan får jeg lagt inn URL'en til et bakgrunnsbilde:

Gå inn i Design>Rediger>Stilsett. Sett inn dette:
BODY {

background-image: url(her skal URL'en til bildet stå)
background-attachment: fixed;background-position: right bottom;

background-repeat: repeat;
}

Trykk på Lagre stilsett og du er ferdig.

Se lengre ned hvordan du kan få bakgrunnsbildet ditt til å stå stille.


Hvordan fjerne bloggnavnet i header:

Gå inn i Design > Rediger > Stilsett.

Legg inn denne koden: under h1.
h1 {
display: none;

Trykk på Lagre stilsett og du er ferdig.


Få markert boks over kategorier, overskrifter m. m:

Gå inn i Design > Rediger > Stilsett.
Finn h3, og forann h3 limer du inn denne koden:
{font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;letter-spacing: -1px;LINE-HEIGHT: 20pt;font-size: 15px;font-weight: normal;background-color: #FDE2E2;color: #000000;margin: 0px 0px 10px 0px;}

Trykk på Lagre stilsett og du er ferdig.

Du kan selvfølgelig endre størrelse på boks og skrift, samt skrifttype og farge. Du kan forandre bredde og størrelse på den markerte boksen ved å forandre tallene du ser. Prøv deg fram og lykke til!


Få loddrett skillelinje mellom meny og innlegg:

Gå inn i Design>Rediger>Stilsett. Finn #side.

Her skal du eventuelt ta bort dette:
border-right-width: 3px;
border-right-style: solid;
border-right-color: #CCCCCC;

Har du ikke dette er det jo ingen problem med det. Så skal du under #side sette inn denne koden:
border-left-width: 2px;
border-left-style: solid;
border-left-color: #CCCCCC;

Trykk på Lagre stilsett og du er ferdig.

Skillelinjen sin tykkelse forandrer du som du vil. Min er på 2px, men kan forandres som sagt. Høyere tall blir tykkere skillelinje. Fargen på linjen setter du inn som du vil. #CCCCCC er svart som det står over, men denne kan forandres.
Mulig du må forandre border-left til border-right. Kommer an på hvilken side din meny står på.


Linker til steder du kan finne andre HTML-koder blant annet fargekoder:

http://www.html-koder.org/

http://www.skuisi.net/tutorials/hexcolors.html

http://www.quackit.com/html/codes/html_scroll_box.cfm

Husk at det er lurt å LAGRE de kodene du bruker, for du må legge de inn på nytt dersom du bytter header f.eks.
Det er også lurt å FORHÅNDSVISE de forandringer du gjør FØR du lagrer dine forandringer.
Et design vises ikke alltid likt i alle nettlesere. I Explorer kan det se anderledes ut enn f.eks. i Opera.


Hvordan få mellomrom mellom header og blogg:

#header {
background: url('http://i202.photobucket.com/albums/aa282/meretesandelin/h.jpg');
no-repeat
center;
header-position: center;
padding-left: 0px;
padding-bottom:0px;
padding-top:px;
margin: 30px 90px 70px;
height: 438px;
border: 7px solid #1971F7;

Det er der hvor det står margin: 30px som bestemmer om det er mellomrom mellom header og blogg. Om det hadde stått 0px der så hadde headeren og bloggen vært helt sammen. Her er du bare nødt til å prøve deg litt frem til du får det akkurat slik som du vil ha det. Dette kan være litt komplisert.


Meny fra høyre til venstre eller meny i liten boks:

Du limer bare inn koden i Stilsettet.
Koden du skal legge inn er:

Hvor legger jeg den inn?
Du legger den inn under #wrapper.
Slik skal det se ut sånn ca:
#wrapper {
background-color: #FFFFFF;
border: 2px dotted #000000;
}
#main {
float: right;
}
#side {
float: left;
}
#footer {
background-color: #FFFFFF;
border: 2px dotted #000000;

Hvis du vil ha menyen i en liten boks, så skal du legge inn denne koden:
border: 1px solid #000000;
background-color: #4D4D4D;

Hvor legger jeg den inn?
Hvis du ser under her så ser du hvor du skal lime den inn.

#wrapper {
background-color: #FFFFFF;
border: 2px dotted #000000;
}
#main {
float: right;
}
#side {
float: left;
border: 1px solid #000000;
background-color: #4D4D4D;
}


Endre "x antall kommenarer"

Vil du at for eksempel at det skal stå "x søte små" istedenfor "x kommentarer", så gjør du dette:
Design -> Rediger -> Maler

- Trykk på CTRL + F tasten på tastaturet.
- Søk på "comment".
- Der skal det stå: " <a href="${EntryPermaLink}#comment">${EntryCommentCount} kommentarer</a> "
- Det du skal gjøre er å endre litt på koden slik:
<a href="${EntryPermaLink}#comment">${EntryCommentCount} søte små</a>


Vil du se hvor mange som leser bloggen din akkurat nå?

Koden:
<!-- Start FastOnlineUsers.com --> <a href="http://www.fastonlineusers.com"> <script type="text/javascript" src=http://fastonlineusers.com/on4.php?d=http://leneduus.blogg.no mce_src=http://fastonlineusers.com/on4.php?d=http://leneduus.blogg.no></script> </a> Leser denne bloggen NÅ</a> <!-- End FastOnlineUsers.com --></div>

Hvor legger jeg den inn?
Endre profil - > Beskrivelse
I ruten for beskrivelse skal du lime inn koden, og du må huske på å legge inn linken til bloggen din.


Ramme rundt headeren:

#header {
background-color: #FFFFFF;
background-image: url('Url til header');
height:  200px;
width: 550px;
border: 3px solid #FFFFFF;

Der det står '2px' kan du bestemme hvor tykk rammen skal være.
Solid = Vanelig
Dotted  = Prikkete
Dashed  = Mindre prikker


Større profilbilder:

Denne koden skal limes inn i maler
<img src="PICTURE URL" height="70">

Slik gjør du:
- Gå inn på design>rediger>maler
- Last opp bildet du vil bruke på http://tinypic.com/ og kopier url'en under "Direct Link for Layout".
- Gå på design > rediger > maler og trykk (ctrl+f) å søt etter <img src="${ProfileImageUrl}" alt="${ProfileName}" /> fjern dette og erstatt det med <img src="bilde url" height="størrelse">. Fyll inn der det står bilde url og bytt ut størrelse med den størelsen du ønsker bilde skal være.

Så kan du lagre og du har fått stort profilbilder.
http://de.tinypic.com/view.php?pic=o7q912&s=5


"Takk for kommentaren" bilde under kommentarfeltet:

Denne koden skal limes inn i maler > enkeltinnlegg
<img src="bilde url">

Slik gjør du:
- Du tar "takk for kommentaren" bilde og laster det opp på http://tinypic.com/ og kopier url'en under "Direct Link for Layout".
- Gå inn på design > rediger > maler > enkeltinnlegg og trykk (Ctrl+f) for å søke etter <label for="comment_remember">Husk meg?</lavel>
- Rett under den koden limer du inn <img src="bilde url">

Så kan du klikke lagre også har du fått deg et "takk for kommentaren" bilde.


Få bilde til å stå fast i bakgrunnen:

background-attachment:fixed;

legges under den samme delen som du har lagt inn bilde adressen i stilsettet.


Fjerne menyen fra bloggen din:

}
#side {
display: none;
}

Legges i stilsettet


Stor skrift på navnene som kommenterer:

Det skal du få til om du går på design -> Rediger -> Maler -> Enkeltinnlegg.
Trykk på ctrl + f, søk på h4. Da skal du finne denne linja; ${CommentAuthorLinkIf}
Istedet for at det står , endrer du 4-tallet til 1.
Så det bli seende slik ut ; ${CommentAuthorLinkIf}
Da er det bare å lagre mal, og navnene i kommentarene skal være større.


Strek under overskriften:

under footer
}
h2 {
font-size: 15px;
font-weight: auto;
padding: 4px 4px 4px 4px;
margin: 0px 0px 10px 0px;
color: #000000;
border-bottom: 1px solid #000000;
text-align: center;


Midtstille kommentarer osv.

under header, wrapper og footer
margin-left: auto;
margin-right: auto;


Meny under header slik jeg har om "Katrine", "Kontakt" osv.

For å plassere denne må du først:
Gå inn på Design -> Rediger -> Maler. Deretter trykker du Ctrl + F (samtidig) og skriver inn BlogDescription å trykker på Enter. Rett under BlogDescription står det </div>, under </div> er hvor du skal plassere koden:

<br><a href="LINKEN DIN!!" class="box">Kontakt</a><a href="LINKEN DIN!!" class="box">Om Meg</a> <a href="LINKEN DIN!!" class="box">Design</a> <a href="LINKEN DIN!!" class="box">Spørsmål</a> <a href="LINKEN DIN!!" class="box">Sponsor</a>

Der det står "linken din" plasserer du linken til de forskjellige innleggene.

Skal du ha f.eks 1 til knapp så føyer du på denne:
<a href="LINKEN DIN!!" class="box">NAVNET TIL KNAPPEN</a>
Du kan endre navn sånn at det står andre ting istedetfor kontakt, om meg osv.
Når du har plassert den koden må du ta og plassere denne nederst inne på Maler.

<style>a.box, a.box:link, a.box:active, a.box:visited {
text-decoration: none;
font-family: calinga;
font-weight:bold;
font-size:15px;
line-height:20px;
color: #FFFFFF;
padding: 1px;
display:;
letter-spacing:0px;
border-bottom: 6px solid #000000;
border-top: 6px solid #000000;
border-left: 20px solid #000000;
border-right: 20px solid #000000;
padding: 0px;
text-align: middle;
background: #000000;
text-transform: none;
}
</style>

Har du gjort alt rett nå så skal du ha en meny under headeren. For andre farger endrer du bare på de plassene det står #000000.

TIL DERE SOM LURER PÅ HVORDAN MAN FÅR INNHOLD PÅ KNAPPENE:

Vel, hvis dere har en knapp der det står "Kontakt" så må dere skrive ett blogg innlegg hvor den plassen dere kan kontaktes på står. Å linken til det blogginnlegget skal limes inn her:
<a href="LINKEN DIN!!" class="box">Sponsor</a>

Så hvis jeg har en knapp hvor det står Nettby, blir den seende sånn her ut:
<a href="http://www.nettby.no/user/" class="box">Nettby</a>


ANDRE BLOGGER MED DESIGN HJELP:

carolinebjerkan.blogg.no
benedictehh.blogg.no
hannelizabeth.blogg.no



Har du også design hjelp?
Kommenter i innlegget og jeg skriver linken din også opp her!

32 herlige kommentarer

KATRINE PEDERSEN:

21.jul.2009 kl.22:48

OG BARE HYGGELIG!

Hanna

21.jul.2009 kl.23:18

Gode tips :D

saratran

21.jul.2009 kl.23:58

takk for tips! ;D

Maria :D

22.jul.2009 kl.11:48

Oii , du er flink ! ;:D

28.jul.2009 kl.01:46

fixmeta.blogg.no !

STINE PEDERSEN

01.aug.2009 kl.11:38

dette var masse bra tips, du er flink:)

Benedicte

01.aug.2009 kl.23:34

Taaakk for tips ;)

Malin Cecilie ♥

03.aug.2009 kl.11:10

Tusen Takk! ;D Dette hjalp meg mye!

Lene Duus

04.aug.2009 kl.14:17

du er en engel!

helene

05.aug.2009 kl.19:56

hei,det blir alltid noe galt med menyen min. Den blir aldri sånn som den skal se ut. jeg har bare ^"om meg" men den blir bare trykket inn øverst intill kanten. hvordan kan jeg flytte på den, endre størrelsen og sånn :) `?

KATRINE PEDERSEN:

07.aug.2009 kl.12:37

Helene: du må rett og slett bare prøve deg frem og endre på størelsen på tallene som står der. så finner du det nok ut til slutt! Lykke til! :-)

Anne Martha

13.aug.2009 kl.22:23

æ får ikke til å søke når æ trykker ctrl + F : (

KATRINE PEDERSEN:

14.aug.2009 kl.12:23

body {background-color: #FFFFFF;font-family: Arial, Helvetica, sans-serif;color: #413B3B;font-size: 8pt;}#header {background-color: #FFFFFF;background-image: url('http://tikroner.blogg.no/images/css/1a8bca84997813e94e395b9caa4295f0.jpg');height: 350px;width: 770px;margin-left: auto;margin-right: auto;border: 2px solid #000000;}#wrapper {width: 770px;background-color: #FFFFFF;margin-left: auto;margin-right: auto;border: 2px solid #000000;}#main {float: right;}#side {float: left;}#footer {width: 770px;background-color: #FFFFFF;margin-left: auto;margin-right: auto;border: 2px solid #000000;}a { color: #000000}a:link { color: #000000}a:visited { color: #000000}a:active { color: #000000}h1, h2, h3 {font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;letter-spacing: -1px;LINE-HEIGHT: 20pt;font-size: 20px;font-weight: normal;background-color: #A353EE;color:#000000;margin: 0px 0px 10px 0px;}, h4, h5 { font-family: Arial, Helvetica, sans-serif; }#header h1, #header p { display:none }#header { color: #000000; }h1 a, h1 a:link, h1 a:visited, h1 a:active { text-decoration: none; color: #000000; }

itsapicture

16.aug.2009 kl.22:21

tusen tusen takk for kodene, nå er jeg i hvertfall fornøyd med mitt design!:)

elisabeth louise

21.sep.2009 kl.07:54

Thank you :-)) det der hadde jeg bruk for!!

Marie

27.sep.2009 kl.17:29

takk for tips! :)

- r e n a t e

28.sep.2009 kl.20:21

vil du fikse min blogg ? bare send meg en mail ; nate_hest@hotmail.com takk :)

Peena<3

01.okt.2009 kl.16:36

Tusen Takk<3

Vera Nilsen ♥

04.okt.2009 kl.17:24

På koden der det står at man kan få større overskrfit, så finner jeg ikke /** Entry headers **/ noen plass! Hva kan jeg gjøre da?

Vera Nilsen ♥

05.okt.2009 kl.16:20

Tusen takk for tips! Men der man kan få større overskrifter, virker det ikke :-( Finner ikke /** Entry header greia i stilsettet..

Vera Nilsen ♥

06.okt.2009 kl.11:54

Glem det, jeg tok en annen kode ;)

10.okt.2009 kl.01:02

#wrapper {

width: 770px;

background-color: #FFFFFF;

margin-left: auto;

margin-right: auto;

}

#main {

float: right;

}

#side {

float: left;

}

#footer {

width: 770px;

background-color: #FFFFFF;

margin-left: auto;

margin-right: auto;

}

h2 {

font-size: 20px;

font-weight: auto;

padding: 4px 4px 4px 4px;

margin: 0px 0px 10px 0px;

color: #000000;

border-bottom: 1px solid #000000;

text-align: center;

}

a { color: #000000}

a:link { color: #000000}

a:visited { color: #000000}

a:active { color: #000000}

h1, h2, h3, h4, h5 { font-family: Arial, Helvetica, sans-serif; }

#header h1, #header p { display:none }

#header { color: #000000; }

h1 a, h1 a:link, h1 a:visited, h1 a:active { text-decoration: none; color: #000000; }

Trong Nguyen.

11.okt.2009 kl.20:12

GODE tips! :)

jan runar

27.okt.2009 kl.18:27

du har jo bare kopiert å limt inn fra internett da

27.okt.2009 kl.18:28

du bare copy paster fra internett nabb

KATRINE PEDERSEN:

29.okt.2009 kl.11:16

anonym: Ja? Hva ellers hadde du regnet med, at jeg skulle funnet dem opp selv? :p

Har samlet fra andre bloggere og fått fra forskjellige folk, er jo ingen hemmelighet det, sier seg selv :-)

KATRINE PEDERSEN:

29.okt.2009 kl.11:19

og, en ting til, du trenger bare kommentere en gang :- )

anita sæterdal

29.okt.2009 kl.12:03

Kan ikke du hjelpe meg da? får ikke til noe jeg, blir aldri fornøyd :(

anita sæterdal

29.okt.2009 kl.13:18

Jeg trenger hjelp. Jeg får ikke til å lage større overskrift på innleggene. Også henger liksom menyen(arkiv, kategorier osv.) inni innleggene mine, får ikke skilt det av liksom.

KATRINE

30.okt.2009 kl.22:42

katriinepine.blogg.no : D

Jeg har litt design hjelp.

Guro Trydal

08.nov.2009 kl.20:00

TAAKK, DU ER EN SKIKKELIG ENGEL ! : ))
Jeg har http://frklampehtml.piczo.com/?g=1&cr=3

KOMMENTER INNLEGGET ELLER LEGG IGJEN EN HILSEN:

- All form for unødvendig reklamasjon og spam blir slettet eller oversett. Det samme gjelder unødvendige kommentarer. Konstruktiv kritikk er noe annet, gjerne kom med deres egne meninger. Med å slenge med leppa uten grunn, blir bortkasting av egen tid.

KATRINE PEDERSEN:

17, Risør

Hei! Mitt navn er Katrine, og velkommen til bloggen min. Jeg blogger om det meste, slik som; hverdagen min, egne meninger og litt annet forskjellig. Det er rett og slett bare å holde seg oppdatert! Jeg deler også ganske mye om meg selv på bloggen, noe du vil skjønne hvis du følger den over tid. Hvis du har spørsmål kan du enten stille meg det i kommentarfeltet, eller du kan ta kontakt på nettby@katrine93. -over og ut, peace. leser denne bloggen nå :) ____________________________________ Kopiering av identitet kan i værstefall bli politianmeldt. Setter pris på om dere ikke kopierer innleggene mine. Men å kopiere et innlegg og å gi inspirasjon er to forskjellige ting. Blir bare glad om jeg får til noe sånt! Og legg meg gjerne til som venn når du først er inne å titter, så kanskje det ikke blir siste gangen? mvh. Katrine.

Kategorier

Arkiv

hits