HTML koder

Jeg har n ska litt runft omkring p nettet, og funnet disse html kodene. Jeg bruker ikke alle selv, men noen har jeg faktisk brukt. Hper at kodene faller i smak. Om det er noen jeg har glemt, eller noen dere vil jeg skal legge ut, s skriv det i kommentarfeltet, s kan jeg skjekke om jeg fr lagt dem ut :)

FARGEKODER KAN DU FINNE HER: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 solid #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 solid #000000;
}
#footer {
background-color: #FFFFFF;
border: 2px solid #000000;

Istedet forsolid, som betyrhelstrukken linjerundt bloggen, kan du putte inn disse:
dotted
dashed
solid
double
groove
ridge
inset
outset


border-bottom = ramme eller strek kun pbunnen
bordet-top= ramme eller strek kun ptoppen
border-left / border-right = ramme eller strek kun tilvenstreellerhyre

For f tykkere ramme, s kan du for eks. skrive3pxog hvis rammen skal vre mindre, s skriver 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;

Da er det bare lagre!


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: 700px;

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

Slik skal det snn ca. 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. Jo mindre tallet foran "px" er, jo smalere blir bloggen. Og omvendt.


ENDRE "X ANTALL KOMMENTARER"


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

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


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 hvis du vil ha mindre skrift, s skriver du f.eks 8 eller mindre.


ENKEL KNAPPEMENY
(foren litt mer penere knappemeny, den som jeg har, bla litt ned)
(Det er mange som ikke skjnner hvordan de linker til noen plass p knappene, det har jeg n prvd utdype lenger ned i dette innlegget)

Frst m du g inn p "design" s "rediger" og s "stilsett".Heltnederst i stilsettet ditt setter du inn denne koden:


<style type="text/css">

/*Credits: Dynamic Drive CSS Library */

.mattblacktabs{
width: 100%;
overflow: hidden;
border-bottom: 1px solid black; /*bottom horizontal line that runs beneath tabs*/
}

.mattblacktabs ul{
margin: 0;
padding: 0;
padding-left: 10px; /*offset of tabs relative to browser left edge*/
font: bold 12px Verdana;
list-style-type: none;
}

.mattblacktabs li{
display: inline;
margin: 0;
}

.mattblacktabs li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px; /*padding inside each tab*/
border-right: 1px solid white; /*right divider between tabs*/
color: white;
background: #414141; /*background of tabs (default state)*/
}

.mattblacktabs li a:visited{
color: white;
}

.mattblacktabs li a:hover, .mattblacktabs li.selected a{
background: black; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */
}

</style>

N m du lagre stilsettet (selv om det ikke vises noe p forhndsvisningen, ikke vr redd). For at disse skal vises m du n g inn i "maler". Finn s denne linja:

<div id="wrapper" class="yui-gc">

(Hvis du ikke finner den, trykk CTRL + F, og sk p den)

Rett under den linja setter du inn denne koden:

<div class="mattblacktabs">
<ul>
<li><a href="URL-ADRESSE">Valgfritt</a></li>
<li><a href="URL-ADRESSE">Valgfritt</a></li>
<li><a href="URL-ADRESSE">Valgfritt</a></li>
<li><a href="URL-ADRESSE">Valgfritt</a></li>
<li><a href="URL-ADRESSE">Valgfritt</a></li>
</ul>
</div>


Pass p at dette alltid str p slutten av koden:
</ul>
</div>

S m du redigere litt i koden. La oss si at du vil ha en "knapp" som heter f.eks FORSIDEN og som linker til fremsiden din. Da m du skrive inn url-adressen til fremsiden din, der jeg har skrevet URL-ADRESSE, og skrive FORSIDEN der det str Valgfritt. for eksempel slik:

<li><a href="http://www.catthrinegj.blogg.no/">FORSIDEN</a></li>



PENERE KNAPPEMENY
(samme som jeg har)
Frst m du g inn p "design" s "rediger" og s "stilsett".Heltnederst i stilsettet ditt setter du inn denne koden:

}
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.underlinemenu{
font-weight: bold;
width: 100%;
}
.underlinemenu ul{
padding: 6px 0 10px 0;
margin: 0;
text-align: center;
}
.underlinemenu ul li{
display: inline;
}
.underlinemenu ul li a{
color: black;
padding: 6px 3px 4px 3px;
margin-right: 20px;
text-decoration: none;
border-bottom: 3px solid grey;
}
.underlinemenu ul li a:hover, .underlinemenu ul li a.selected{
border-bottom-color: black;
}
</style>

Nr du har gjort dette, lagrer du, og gr videre til "Maler". Finn s denne linja:

<div id="wrapper" class="yui-gc">

(Hvis du ikke finner den, trykk CTRL + F, og sk p den)

Under den legger du denne koden:

<div class="underlinemenu">
<ul>
<li><a href="BLOGGURL">VALGFRITT</a></li>
<li><a href="BLOGGURL">VALGFRITT</a></li>
<li><a href="BLOGGURL">VALGFRITT</a></li>
<li><a href="BLOGGURL">VALGFRITT</a></li>
<li><a href="BLOGGURL">VALGFRITT</a></li>
</ul>
</div>

Lagre denne koden iallekategoriene! S er det bare lagre !



(Det er mange som ikke skjnner hvordan de linker til noen plass p knappene, det har jeg n prvd utdype i dette avsnittet.)
HVORDAN LINKER JEG TIL ET ELLER FLERE INNLEGG P BLOGGEN MIN, TIL EN AV MENYKNAPPENE?
Url-adressen finner du ved g inn p din blogg (OBS: som beskende!!!) og klikke deg dit du vil linke knappen til. Da ser du url-adressen i skelinja. La oss si at du vil ha en knapp som str "Konkurranser" p, der ALLE konkurransene du har, ligger inne p. AltsFLERE INNLEGG P KNAPPEN. Da M du ha en KATEGORI som heter Konkurranser. Nr du har laget kategorien, gr du p framsiden av bloggen din og trykker p kategorien "konkurranser". Nr siden er ferdig opplastet der, kan du trygt og godt kopiere URL-linken oppe i skefeltet, og lime den inn i koden. P denne mten fr du da alle innleggene du lager i kategorien "konkurranser", inn p menyknappen. Hvis du BARE vil ha1 INNLEGG P KNAPPEN, gr du rett inn p innlegget og kopierer linken til bare innlegget, og legger inn i koden.

Nr det er gjort er det bare lagre. S m du sette inn alt dette i alle malene. "Forsiden" er den du har satt det inn i n, men du m gjre det i Innlegg, Kategori og Arkiv ogs. Du kommer inn p disse malene ved g til "Maler" og velge rett over koderuten. Da er det bare lagre alt.



MELLOMROM


Har du lyst p mellomrom mellom header og innhold? Da gr du inn p "design", "rediger" ogs "stilsett". Snn ca snn skal det se ut:

#header {
background-color: #FFFFFF;
background-image: url(''HER ER URL'EN TIL DIN HEADER);
height: 480px;
background-repeat: repeat;
margin: 0px 0px 10px 0px;<---HER!

Sett inn denne kodenmargin: 0px 0px 10px 0px;slik som jeg har gjort over. Vil du ha strre eller mindre mellomrom, bare endrer du der det str10px,til f.eks 5px eller 20px.



FARGE BAK OVERSKRIFT


Lyst p farge bak overskriftene dine?
Det eneste du trenger sette inn er:h2 { background-color: #FFCCCC; }
selvflgelig der det str#FFCCCC;setter du inn den fargekoden du har lyst p.
Det skal ca se snn her ut:

a { color: #000000}
a:link { color: #000000}
a:visited { color: #000000}
a:active { color: #000000}
h1, h2, h3, h4, h5 { font-family: Palatino Linotype, Book Antiqua, Palatino, 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; }
h2 { background-color: #FFCCCC; }<---- HER !
h1, h2, h3, h4, h5 { font-family: Trebuchet MS, Helvetica, sans-serif; }

^alt dette ligger UNDER #footer



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 ca 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 BORT LINKEN (BLOGG.NO) UNDER HEADEREN DIN


Slik gjr du det:
Design -> Rediger -> Maler.
CTRL + F. Sk p denne linjen:
<div class="breadcrumbs"><a href="http://blogg.no/">blogg.no</a> ${BlogTitle}</div>
Fjern hele den linjen.
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;
}


Du skal nemlig legge koden der#footer {slutter, alts nedenfor tegnet:}


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>



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 vre borte.

BAKGRUNN SOM STR "FAST"


Koden:background-attachment:fixed;

Hvor skal jeg legge den?
For at bakgrunnen din skal st fast, legg den under#wrapper {, men hvis du nsker at headeren din skal sitte fast, legger du den under#header {


NY FARGE NR DU LEGGER MUSEPEKEREN OVER LINKER


Vil du ha ny farge p linker nr du holder musa over?
Snn ser det ut n:
a:link {color: #000000;}
a:visited {color: #000000;}
a:hover {color: #000000;}
a:active {color: #000000;}

Den eneste koden du skal endre p, er "a:hover". Slik at det ser snn ut:
a:link {color: #000000;}
a:visited {color: #000000;}
a:hover {color:#FFFFFF;}
a:active {color: #000000;}

Du kan jo selvflgelig ha andre farger, det er bare sette inn en annen fargekode!


MELLOMROM MELLOM BOKSTAVENE NR DU LEGGER MUSEPEKEREN OVER LINKEN


Alt du trenger gjre er legge inn denne koden:
a:hover {letter-spacing:2px}

Snn at det ser ca snn her ut:
a:link {color: #000000;}
a:visited {color: #000000;}
a:hover {letter-spacing:2px}
a:active {color: #000000;}

Der det str2pxkan du endre til f.eks 1px eller 5px. Dette bestemmer hvor stort mellomrommet mellom hver bokstav da skal vre.

Kilder:catthrinegj,benedictehhog meg selv.

3 kommentarer

Anna

29.jan.2010 kl.08:15

Kjempe bra du har lagt dem ut. Jeg syns de er bra og har brukt MANGE av dem til min blogg. Kan du hjelpe til med design? Lage design til folk eller noe snt?

Fridaaaaaa :)

29.jan.2010 kl.10:41

Anna: Ja, jeg jobber n med lage design som jeg kan legge ut, skrive koder snt. Men jeg lager IKKE design til folk! Men tusen takk <3 :) skal hjelpe deg s mye jeg kan Anna .

LA10

07.feb.2010 kl.08:18

Jeg har brukt mange av kodene her.

Skriv en ny kommentar

Fridaaaaa - Blogger om det som er positivt!

Fridaaaaa - Blogger om det som er positivt!

13, Agdenes

Hei <3 Du har n ramlet innom bloggen til Frida. Jeg blir veldig glad for kommentarer og tips til hvordan jeg kan gjre bloggingen bedre for bde dere og med selv. Har dere noen sprsml s kan dere sende mail til meg p: fridaaaaaa_blogg@hotmail.com, ikke sikkert jeg svarer p alle :)

Kategorier

Arkiv

hits