HTML-koder

HTML-Koder

N har jeg vrt litt rundt og funnet HTML-koder, har brukt noen av dem selv!

Godt forklart, s det er lett og skjnne!

S til dere som trenger litt hjelp med HTML-koder, s kan dere lese litt her!

Mye du kan forandre p bloggen, med disse kodene.

S hper du fr dette til, og hvist du lurer p noe, bare spr!:-)

NOEN TIPS:
CTRL + A = Merk alt
CTRL + C = Kopier
CTRL + V = Lim inn
CTRL + F =Sk

FARGEKART: http://www.myspacedev.com/color-codes/



RAMME RUNDT BLOGGEN

Hvordan gjr jeg dette?
Du limer bare inn koden i Stilsettet.
Koden du skal legge inn er:
border: 2px dotted #000000;

Hvor legger jeg den inn?
Du legger den inn under #wrapper og #footer. Ca. snn her skal det se ut:
(Du kan ogs leggekoden inn under #header, hvis du vil ha en ramme rundt headeren ogs).

#wrapper {
background-color: #FFFFFF;
border: 2px dotted #000000;
}
#footer {
background-color: #FFFFFF;
border: 2px dotted #000000;

Hvis du ikke vil ha en 'prikkete' ramme, s skriver dusolid istedenfordotted. For endre tykkelsen p rammen, s kan du for eks. skrive3px eller hvis rammen skal vre mindre s skrive du bare1px.


MENYEN FRA HYRE TIL VENSTRE

Hvordan gjr jeg dette?
Du limer bare inn koden i Stilsettet.
Koden du skal legge inn er:
}
#main {
float: right;
}
#side {
float: left;

Hvor legger jeg den inn?
Du legger den inn under #wrapper.
Slik skal det se ut snn 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;

}


MIDTSTILLE BLOGGEN DIN

Koden du skal bruke:
margin-left: auto;
margin-right: auto;

Hvor legger jeg den inn?
Den skal du legge inn under #header, #wrapper og #footer.

Slik skal det se ut:
#header {
background-color: #FFFFFF;
height: 236px;
margin-left: auto;
margin-right: auto;

}
#wrapper {
background-color: #FFEFFC;
margin-left: auto;
margin-right: auto;

}
#footer {
background-color: #FFFFFF;
margin-left: auto;
margin-right: auto;


SMAL BLOGG

Koden:
width: 610px;

Hvor legger jeg den inn?
Du legger den under #header, #wrapper og #footer.

Slik skal det se ut da:
#header {
background-color: #FFFFFF;
height: 236px;
margin-left: auto;
margin-right: auto;
width: 700px;
}
#wrapper {
background-color: #FFEFFC;
margin-left: auto;
margin-right: auto;
width: 700px;
}
#footer {
background-color: #FFFFFF;
margin-left: auto;
margin-right: auto;
width: 700px;
}

N er det bare endre tallet til hva du mtte nske. 600px eller kanskje 800px. Du bestemmer.


BAKGRUNNSBILDE SOM "STR FAST"

Koden:
BODY {
background-image: url("her skal URL'en til bildet st");
background-attachment: fixed;
background-position: right bottom;
background-repeat: repeat;
}

Hvor legger jeg den inn?
Den skal du lime inn verst i stilsettet.


ENDRE "X ANTALL KOMMENTARER"

Vil du at for eksempel at det skal st "x ste sm" istedenfor "x kommentarer", s gjr du dette:
Design -> Rediger -> Maler

- Trykk p CTRL + F tasten p tastaturet.
- Sk p "comment".
- Derskal det st:" <a href="${EntryPermaLink}#comment">${EntryCommentCount} kommentarer</a> "
- Det du skal gjre er endre litt p koden slik:
<a href="${EntryPermaLink}#comment">${EntryCommentCount}ste sm</a>


ENDRE BAKGRUNN FOR OVERSKRIFTER

Koden:
h2 {
cursor:default;
background-color: #000000; <- Her endrer du bakgrunnsfarge
color: #16CC16;
font-size:9pt;<- Her endrer du strrelsen
font-family:tahoma;<- Her endrer du for skrift typen
letter-spacing:1px;
line-height:13pt;
text-align: center;
padding: 1px;
font-weight: bold;
text-transform: uppercase;
border-bottom: 2px solid #16CC16;<- Her endrer du fargen p linja under overskrifta.
margin-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-left: 0px;

Hvor legger jeg den inn?
Den skal du lime inn nederst i stilsettet ditt.

Og s er det bare og lagre stilsettet.


SLIK SER DU 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=LINK TIL DIN BLOGG HER!!! mce_src=http://fastonlineusers.com/on4.php?d=LINK TIL DIN BLOGG HER!!!></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. :)

---> Dette skal nok vre en feil kode, etter som jeg har sett og ftt mye kommentarer fra dere. Str f.eks at det er 300 inne p bloggen DIN, men snn egentlig er det ikke p din blogg... Vanskelig forklare, menher har jeg beskrevet hvordan du kan se hvor mange som er inne p DIN blogg.


RAMME RUNDT HELE SIDEN

Koden:
border: 8px solid #000000;

Hvor skal jeg legge deninn?
Helt verst i stilsettet.

Slik skal det se ut;
body {
background-color: #FFFFFF;
font-family: times new roman;
border: 8px solid #000000;
}


GOOGLE OVERSETTER P DIN BLOGG

Frst gr du inn p; http://translate.google.com/translate_tools?hl=no
Der henter du koden.

Hvor skal jeg legge deninn?
Design -> Rediger -> Maler

Nr du er inne pMaler, s trykker du pCTRL + F tastene. Der skal du ske p "sidebar". Under der, skal du lime inn koden du hentet p nettsiden. Og s er det bare lagre malen.


ENDRE FOR HVA DET STR P KOMMENTAR KNAPPEN

Slik gjr du det:
G inn p Design -> Rediger -> Maler.. Nr du er pMaler, s ser du at det strIndex (forsiden). Trykk der og velg; Enkeltinnlegg. Deretter trykker du CTRL + F p tastaturet dittog s sker du p " Send kommentar ". Istedet for at det str 'Send kommentar', s kan du jo skrive hva du enn vil. Kanskje "N blir jeg glad :)" eller noe annet.


HVORDAN F HEADEREN(BILDE) P PLASS DER OPPE

Koden du skal bruke er:
#header {
background-image: url(http://www.settinnlenkeher.jpg);
background-repeat: no-repeat;
height: 100px;
width: 800px;
}

Hvor skal jeg legge den inn?
Design -> Rediger
S limer du bare inn koden i stilsettet ditt.


SHOUTBOX P DIN BLOGG

Du trykker verst der det str: ShoutMix Chat. Da kommer det opp et nytt vindu. N skal du trykke p 'CREATE YOUR SHOUTBOX NOW'. Deretter skriver du inn informasjon osv, du skjnner det nok. :)

Hvor skal jeg legge inn koden?
Design -> Rediger -> Maler.
Trykk CTRL + F p tastaturet ditt, og sk p 'sidebar'. Under der legger du inn koden.
N er det bare trykke p Lagre Malen og da skal den ligge p framsiden av bloggen din.


STRRE PROFILBILDE

Koden du skal bruke er:
<img src="PICTURE URL" height="100">

Forklaring:
Picture url skjnner du sikkert. Der du skal legge inn linken til bildet ditt.
100, der kan du sette inn et tall, og det bestemmer hvor stort bildet ditt blir.

Slik gjr du det:
Design -> Rediger -> Maler.
Her skal du finne<img src="${ProfileImageUrl}" alt="${ProfileName}" />.
S du kan for eksempel ske (CTRL + F) p 'profilename'. Du skal deretter bytte ut (<img src="${ProfileImageUrl}" alt="${ProfileName}" />) med koden; <img src="PICTURE URL" height="100">.
For legge inn linken til bildet, s m du laste opp bildet ditt pwww.tinypic.com, under "Direct Link for Layouts" henter du linkensom du skal legge inn i koden. Og du kan endre strrelsen for bildet ditt ogs hvis du vil.
N trykker du p Lagre Malen og da skal bildet ditt vre strre.


STRRE OVERSKRIFT (ARKIV, KATEGORIER osv.)

Hvordan gjr jeg dette?
Design -> Rediger -> Maler.
Sk (CTRL + F) p 'arkiv'. Nr du finner denne; <h3>Arkiv</h3>. s kan du istedenforh3, skrive h1.
Det samme gjr du med Kategorier, Arkiv, Siste innlegg, Siste kommentarer og Lenker.
N trykker du p Lagre Malen og da skal overskriftene vre strre.


MINDRE/STRRE SKRIFT P INNLEGGENE DINE

Koden du skal bruke:
font-size: 10pt;

Hvor skal jeg legge den inn?
Den skal du legge inn under wrapper.

Slik for eks. skal det se ut;
#wrapper{
background-color: #FFFFFF;
font-size: 10pt;
}

Det eneste du trenger gjre n er endre tall, vil du ha strre skrift skriver du for eksempel 12, eller kanskje du vil ha mindre skrift, s skriver du 8...


F BORT NAVNET OVER HEADEREN

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

Hvor skal jeg legge den inn?
Den skal du legge nesten helt nederst i stilsettet ditt.

Slik skal det noenlunde se ut;
#header { color: #FFFFFF; }
#header h1, #header p { display:none }
h1 a, h1 a:link, h1 a:visited, h1 a:active { text-decoration: none; color: #FFFFFF; }


F STRRE SKRIFT P NAVNENE I INNLEGGENE

Slik gjr du det:
Design -> Rediger -> Maler -> Enkeltinnlegg
Trykk p ctrl + f, sk p h4. Da skal du finne denne linja; <h4>${CommentAuthorLinkIf}</h4>
Istedet for at det str<h4>, endrer du 4-tallet til 1.

Slik skal det se ut:
<h1>${CommentAuthorLinkIf}</h1>

Trykk lagre malen, og da er navnene p innleggene strre.


F BORT LINKEN (BLOGG.NO) UNDER HEADEREN DIN

Slik gjr du det:
Design -> Rediger -> Maler.
Ctrl + f. Sk p blogg.no, s skal du lete etter linjen;
<div class="breadcrumbs"><a href="http://blogg.no/">blogg.no</a> ${BlogTitle}</div>
Denne skal du fjerne alts.
Etter du har tatt bort den, s skal du lagre malen, og da skal linken under headeren vre borte.


RAMME RUNDT HVERT INNLEGG

Koden:
}
.entry {
border: 1px solid #708090;
background: #FFFFFF;
text-align: center;
}

Hvor skal jeg legge den inn?
Den skal du legge helt nederst i stilsettet ditt.


F ETLITE IKONATTMED 'KOMMENTARER' F.EKS.

Kode:
<img src="http://i43.tinypic.com/2crm3qu.gif">

Hvor skal jeg legge den inn?
Design -> Rediger -> Maler.
Trykk p CTRL + F. Sk p Kommentarer.
Nr du har funnet en linje som dette;<a href="${EntryPermaLink}#comment">${EntryCommentCount} kommentarer</a>
S skal du legge inn koden bak.Slik at det ser utsom dette:
<img src="
http://i43.tinypic.com/2crm3qu.gif"><a href="${EntryPermaLink}#comment">${EntryCommentCount} kommentarer</a>
Trykk Lagre malen, og da skal det vre et lite bilde bak "Kommentarer".

-----

Det samme gjr du, hvis du vil ha bilde attmed dato...

Du bruker da denne koden; <img src="URL-adressen til bildet">
For finne Url-adressen til et bilde gjr du ved hyreklikke eller laste opp bildet p tinypic.
Og s m du inn p Maler for legge inn koden.


MENY UNDER HEADEREN

Koden du skal bruke:
<a href=LINK TIL INNLEGGET><img src=URL-ADRESSEN TIL BILDET></a>

Hvor skal jeg legge inn koden?
Design -> Rediger -> Maler.
Sk (CTRL + F) p " BlogDescription ". Og da skal du legge inn koden under </div> .

Slik skal de se ut:
<h1>${BlogTitle}</h1>
<p>${BlogDescription}</p>
</div>
<a href=www.dinblogg.blogg.no><img src=http://dittbilde.jpg></a>
<div id="wrapper" class="yui-gc">

N trykker du pLagre Malen og da skal det vre en meny under headeren din.


MELLOMROM MELLOM HEADER OG SELVE BLOGGEN

Koden du skal bruke:
margin: 0px 0px 10px 0px;

Hvor skal jeg legge den inn?
Design -> Rediger
Koden skal du legge inn under header.

Det skal ca. se slik ut:
#header {
background-color: #FFFFFF;
background-image: url(url-adressen til bildet);
background-repeat: no-repeat;
height: 420px;
width: 800px;
margin: 0px 0px 10px 0px;

Hvis du vil ha strre eller mindre mellomrom, s endrer du tallet der hvor det str 10.


F BORT RAMMEN RUNDT PROFILBILDET DITT

Koden du skal bruke:
<img style="float: left; border: 0;" src="URL-ADRESSEN TIL BILDET DITT" height="200">

Forklaring:
200 = der kan du velge hvor stort bildet skal vre.
URL = Der skal du sette inn adressen for profilbildet ditt.

Hvor skal jeg legge inn koden?
Design -> Rediger -> Maler.
Sk (ctrl + f) p "profile".

Slik skal det ca. se ut:
<div id="profile" class="clearfix">
<div>
<a href="${ProfileUrl}" title="${ProfileName}">
<img style="float: left; border: 0;" src="URL-ADRESSEN TIL BILDET DITT" height="200">
</a>
</div>

Trykk lagre malen, og da skal den bl rammen vre borte rundt profilbildet.


FJERNE "SISTE KOMMENTARER", "AKIV"...

Du m frst g til maler (design -> Rediger -> Maler).
Nr du har gjort det s sker du p f.eks. 'siste kommentarer'.Da skal du finne dette fram i maler:
<h3>Siste kommentarer</h>
<ul>
<tag:commentlist global="true" limit="10" sort="desc">
<li>${CommentAuthorLinkIf} om ${CommentArticleLink}</li>
</tag:commentlist>
</ul>
</div>
---
Dette skal du fjerne rett og slett. Det samme gjr du med 'Arkiv', 'Kategorier' osv. Du fjerner de du vil.

Etter det s trykker du p Lagre Malen, og da skal de "boksene" vre borte.


F MELLOMROM OVER HEADEREN

Koden du skal bruke:
<br>

Hvor skal jeg legge inn koden?
Design -> Rediger -> Maler.
Sk etter 'doc2'. Eller bla litt ned til du ser denne linja; <div id="doc2">
Det du skal gjre er lime inn koden etter dette.

Slik skal det se ut:

<div id="doc2"><br>

(Du limer inn koden s mange gang du vil, sprs hvor stort mellomrom du vil ha.. Det er bare prve seg frem).
Det samme m du gjre med Kategori, Arkiv og Enkeltinnlegg.


MIDTSTILLE MENYEN UNDER HEADER

Du gr inn p Maler. Og s setter du inn dette; <center> </center>

Slik skal det ca. se ut:
<center>KODEN TIL MENYEN SKAL ST I MELLOM HER</center>

Hper dere fikk den hjelpen dere trengte!