HTML koder

Jeg har nå søka litt runft omkring på nettet, og funnet disse html kodene. Jeg bruker ikke alle selv, men noen har jeg faktisk brukt. Håper 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 får lagt dem ut :) 

FARGEKODER KAN DU FINNE HER: http://www.myspacedev.com/color-codes/

RAMME RUNDT BLOGGEN 

Hvordan gjør 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. sånn her skal det se ut:
(Du kan også legge koden 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 for solid, som betyr helstrukken linje rundt bloggen, kan du putte inn disse:
dotted
dashed 
solid 
double 
groove 
ridge 
inset 
outset


border-bottom = ramme eller strek kun på bunnen
bordet-top = ramme eller strek kun på toppen
border-left / border-right = ramme eller strek kun til venstre eller høyre

For å få tykkere ramme, så kan du for eks. skrive 3px og hvis rammen skal være mindre, så skriver du bare 1px


MENYEN FRA HØYRE TIL VENSTRE


Hvordan gjør 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 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;

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 sånn 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 måtte ø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 søte små" istedenfor "2 kommentarer", så gjør du dette:
Design -> Rediger -> Maler 

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


MINDRE/STØRRE 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 å gjøre nå er å endre tall, vil du ha større skrift skriver du for eksempel 12, eller hvis du vil ha mindre skrift, så skriver du f.eks 8 eller mindre.


ENKEL KNAPPEMENY 
(for en litt mer penere knappemeny, den som jeg har, bla litt ned)
(Det er mange som ikke skjønner hvordan de linker til noen plass på knappene, det har jeg nå prøvd å utdype lenger ned i dette innlegget)

Først må du gå inn på "design" så "rediger" og så "stilsett". Helt nederst 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å forhåndsvisningen, ikke vær 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 søk 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 står 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 står Valgfritt. for eksempel slik:

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



PENERE KNAPPEMENY 
(samme som jeg har)
Først må du gå inn på "design" så "rediger" og så "stilsett". Helt nederst 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>

Når du har gjort dette, lagrer du, og går videre til "Maler". Finn så denne linja:

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

(Hvis du ikke finner den, trykk CTRL + F, og søk 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 i alle kategoriene! Så er det bare å lagre ! 



(Det er mange som ikke skjønner hvordan de linker til noen plass på knappene, det har jeg nå prøvd å 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 besøkende!!!) og klikke deg dit du vil linke knappen til. Da ser du url-adressen i søkelinja. La oss si at du vil ha en knapp som står "Konkurranser" på, der ALLE konkurransene du har, ligger inne på. Altså FLERE INNLEGG PÅ KNAPPEN. Da MÅ du ha en KATEGORI som heter Konkurranser. Når du har laget kategorien, går du på framsiden av bloggen din og trykker på kategorien "konkurranser". Når siden er ferdig opplastet der, kan du trygt og godt kopiere URL-linken oppe i søkefeltet, og lime den inn i koden. På denne måten får du da alle innleggene du lager i kategorien "konkurranser", inn på menyknappen. Hvis du BARE vil ha 1 INNLEGG PÅ KNAPPEN, går du rett inn på innlegget og kopierer linken til bare innlegget, og legger inn i koden.

Når 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å gjøre 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 går du inn på "design", "rediger" også "stilsett". Sånn ca sånn 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 koden margin: 0px 0px 10px 0px; slik som jeg har gjort over. Vil du ha større eller mindre mellomrom, bare endrer du der det står 10px, 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; }
selvfølgelig der det står #FFCCCC; setter du inn den fargekoden du har lyst på.
Det skal ca se sånn 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 gjør du det:
Design -> Rediger -> Maler.
CTRL + F. Søk 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 være 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 være.
URL = Der skal du sette inn adressen for profilbildet ditt.

Hvor skal jeg legge inn koden?
Design -> Rediger -> Maler.
Søk (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å først gå til maler (Design -> Rediger -> Maler). 
Når du har gjort det så søker 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 gjør du med 'Arkiv', 'Kategorier' osv. Du fjerner de du vil. 

Etter det så trykker du på Lagre Malen, og da skal de være borte.

BAKGRUNN SOM STÅR "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 NÅR DU LEGGER MUSEPEKEREN OVER LINKER


Vil du ha ny farge på linker når du holder musa over? 
Sånn 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 sånn ut:
a:link {color: #000000;}
a:visited {color: #000000;}
a:hover {color: #FFFFFF;}
a:active {color: #000000;}

Du kan jo selvfølgelig ha andre farger, det er bare å sette inn en annen fargekode!


MELLOMROM MELLOM BOKSTAVENE NÅR DU LEGGER MUSEPEKEREN OVER LINKEN


Alt du trenger å gjøre er å legge inn denne koden:
a:hover {letter-spacing:2px}

Sånn at det ser ca sånn her ut:
a:link {color: #000000;}
a:visited {color: #000000;}
a:hover {letter-spacing:2px}
a:active {color: #000000;}

Der det står 2px kan du endre til f.eks 1px eller 5px. Dette bestemmer hvor stort mellomrommet mellom hver bokstav da skal være.

Kilder: catthrinegjbenedictehh og 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 sånt?

Fridaaaaaa :)

29.jan.2010 kl.10:41

Anna: Ja, jeg jobber nå med å lage design som jeg kan legge ut, skrive koder å sånt. 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 gjøre bloggingen bedre for både dere og med selv. Har dere noen spørsmål så kan dere sende mail til meg på: fridaaaaaa_blogg@hotmail.com, ikke sikkert jeg svarer på alle :)

Kategorier

Arkiv

hits