Diverse koder

Noen tips:
CTRL + A = Merk alt
CTRL + C = Kopier
CTRL + V = Lim inn
CTRL + F = Søk

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


RAMME RUNDT BLOGGEN 
Hvordan gjør du 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. 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 dotted #000000;
}
#footer {
background-color: #FFFFFF;
border: 2px dotted #000000;

Hvis du ikke vil ha en 'prikkete' ramme, så skriver du solid istedenfor dotted. For å endre tykkelsen på rammen, så kan du for eks. skrive 3px eller hvis rammen skal være mindre så skrive 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;

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 måtte ønske. 600px eller kanskje 800px. Du bestemmer.


ENDRE "X ANTALL KOMMENTARER" 

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>
ENDRE BAKGRUNN FOR OVERSKRIFTER

Koden:
h2 {
cursor:default;
background-color: #000000; <- Her endrer du bakgrunnsfarge..
color: #16CC16;
font-size:9pt;                                <- Her endrer du størrelsen
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; 
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. :)

ENDRE FOR HVA DET STÅR PÅ KOMMENTAR KNAPPEN

Slik gjør du det:
Gå inn på Design -> Rediger -> Maler.. Når du er på Maler, så ser du at det står Index (forsiden). Trykk der og velg; Enkeltinnlegg. Deretter trykker du CTRL + F på tastaturet ditt og så søker du på " Send kommentar ". Istedet for at det står 'Send kommentar', så kan du jo skrive hva du 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.

STØRRE PROFILBILDE

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

Forklaring: 
Picture url skjønner 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 gjør du det:
Design -> Rediger -> Maler. 
Her skal du finne <img src="${ProfileImageUrl}" alt="${ProfileName}" />. 
Så du kan for eksempel søke (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 på www.tinypic.com, under "Direct Link for Layouts" henter du linken som du skal legge inn i koden. Og du kan endre størrelsen for bildet ditt også hvis du vil. 
Nå trykker du på Lagre Malen og da skal bildet ditt være større.
STØRRE OVERSKRIFT (ARKIV, KATEGORIER osv.)

Hvordan gjør jeg dette?
Design -> Rediger -> Maler. 
Søk (CTRL + F) på 'arkiv'. Når du finner denne; <h3>Arkiv</h3>. så kan du istedenfor h3, skrive h1
Det samme gjør du med Kategorier, Arkiv, Siste innlegg, Siste kommentarer og Lenker. 
Nå trykker du på Lagre Malen og da skal overskriftene være større.
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 kanskje du vil ha mindre skrift, så skriver du 8...

FÅ BORT LINKEN (BLOGG.NO) UNDER HEADEREN DIN

Slik gjør du det:
Design -> Rediger -> Maler. 
Ctrl + f. Søk 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 være borte.

FÅ ET LITE IKON ATTMED '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. Søk på Kommentarer. Når 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 ut som dette: 
<img src="
http://i43.tinypic.com/2crm3qu.gif"><a href="${EntryPermaLink}#comment">${EntryCommentCount} kommentarer</a>
Trykk Lagre malen, og da skal det være et lite bilde bak "Kommentarer". 

-----

Det samme gjør 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 gjør du ved å høyreklikke eller laste opp bildet på tinypic. 
Og så må du inn på Maler for å legge inn koden.
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 større eller mindre mellomrom, så endrer du tallet der hvor det står 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 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>

Trykk lagre malen, og da skal den blå rammen være borte rundt profilbildet.
FJERNE "SISTE KOMMENTARER", "ARKIV"... 

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 "boksene" være borte.
HORISONTAL MENY

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

Rett under den linja setter du inn denne koden:
<div class="mattblacktabs">
<ul>
<li><a href="URL-ADRESSE">valgfritt</a></li>
<li><a href="ULR-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>


Så må du redigere litt i koden. La oss si at du vil ha en "knapp" som heter f.eks HOME og som linker til fremsiden din. Da må du skrive inn url-adressen til fremsiden der jeg har skrevet URL-ADRESSE, og skrive HOME der jeg har skrevet valgfritt. for eksempel slik:
<li><a href="http://www.eksempel.blogg.no/">HOME</a></li>

Det har lagt til linjer så du kan lage deg 5 knapper i en slik meny, men vil du ha flere legger du til enda ei linje med dette:


<li><a href="URL-ADRESSEN">valgfritt</a></li>


Pass på at dette alltid står på slutten, så du ikke legger til linjer under det:

</ul>
</div>

Når det er gjort er det bare å lagre.



HTML - Stemmeboks.


Stemme boksen kan enkelt legges inn. Du legger den til på samme måte som ATM-boksen, dette kan du lese her.
Denne går ann å endre spørsmål på og svar alternativer. Det popper opp et lite vindu når du har stemt. Dette kan du endre størrelsen på. For spørsmål, send mail eller kommenter ( teeita@hotmail.com )
Her er koden:

<center><script type="text/javascript"> var pollAltSelected = 0; function pollAltMouseOn( id ) { document.getElementById( "pollAlt_" + id ).style.background = "#BBBBBB"; } function pollAltMouseOut( id ) { if ( pollAltSelected == id ) { document.getElementById( "pollAlt_" + id ).style.background = "#acff7a"; } else { document.getElementById( "pollAlt_" + id ).style.background = "#DDDDDD"; } } function pollAltSelect( id ) { if ( pollAltSelected != 0 ) { document.getElementById( "pollAlt_" + pollAltSelected ).style.background = "#DDDDDD"; document.getElementById( "pollAltRadio_" + pollAltSelected ).checked = false; } pollAltSelected = id; document.getElementById( "pollAlt_" + id ).style.background = "#acff7a"; document.getElementById( "pollAltRadio_" + id ).checked = true; } function pollSubmit( pollid ) { pollPopup = window.open("http://stem.start.no/vote.php?id=" + pollid + "&alt=" + pollAltSelected,"","width=100,height=700"); pollPopup.focus(); } function pollResult( pollid ) { pollPopup = window.open("http://stem.start.no/result.php?id=" + pollid,"","width=100,height=700"); pollPopup.focus(); } </script> <style type="text/css"> .votebox{ font-family: verdana; font-size: 12px; background: #dddddd; padding: 10px 10px 10px 10px;} </style><div class="votebox" style="width: 100;"><span style="font-size: 16px; font-weight: bold;">Skal du se på «Paradise Hotel»?</span><div style="padding: 3px 0px;" id="pollAlt_60679" onmouseover="Javascript: pollAltMouseOn( 60679);" onmouseout="Javascript: pollAltMouseOut( 60679);" onclick="Javascript: pollAltSelect( 60679);"><input id="pollAltRadio_60679" type="radio"/> Ja.</div><div style="padding: 3px 0px;" id="pollAlt_60680" onmouseover="Javascript: pollAltMouseOn( 60680);" onmouseout="Javascript: pollAltMouseOut( 60680);" onclick="Javascript: pollAltSelect( 60680);"><input id="pollAltRadio_60680" type="radio"/> Nei.</div><div style="text-align: center;"><input style="border: 1px solid #666666;" type="button" value="Stem" onclick="Javascript: pollSubmit( 11590);"/></div><div style="font-size: 9px; text-align: center;"><a style="color: #333333; font-decoration: none;" href="Javascript: void( 0 );" onclick="Javascript: pollResult( 11590 );">Se resultatet</a></div></div>

ATM-boks


Jeg har laget en At the moment-boks. Dette er min versjon. Det er veldig enkel og endre farge som passer til ditt design. Her er koden:

<center><TABLE><TR><TDBGCOLOR="orange"><PALIGN="CENTER"><FONT FACE="verdana"SIZE="1"COLOR="orange"><center><B>AT THE MOMENT</B></center></FONT></P></TD></TR><TR><TD><p style="width:150px;text-align:CENTER;border:1pxsolid #000000; background:#fFFFFFF; filter:alpha("opacity="100); opacity:.50;"><FONT face="tahoma"><FONT size="1"><FONT color="#ff6d00"><br><img src="http://img65.imageshack.us/img65/6785/i158127199872923sk.gif">-- Tekst her
<BR><IMG SRC="http://i1.tinypic.com/v83jgg.gif"> -- Tekst her
<BR><IMG SRC="http://i50.tinypic.com/2cmrj81.jpg"> -- Tekst her
<BR><IMG SRC="http://i47.tinypic.com/rw49l1.jpg"> -- Tekst her
<BR><IMG SRC="http://i2.tinypic.com/vhs2de.gif"> -- Tekst her
<BR><IMG SRC="http://img221.imageshack.us/img221/3978/k9fcq15tb.gif"> -- Tekst her
<BR><IMG SRC="http://img218.imageshack.us/img218/593/k9ffcj4bs.gif"> -- Tekst her
<BR><IMG SRC="http://i46.tinypic.com/zxljyv.gif"> -- Tekst her
<BR><IMG SRC="http://img210.imageshack.us/img210/3617/k9fcjp7vr.gif"> -- Tekst her
</TABLE></center>
Der det står "orange" kan du bytte ut lett, men og f.eks skrive "grey". Den er midtstilt, der det står #000000 og #ffffff kan du bytte farger, fargekodene kan jeg skaffe til dere, eller dere kan bruke photoshop f.eks og hente fargekoden. Der det står tekst her, skriver du f.eks "Onsdag 10.Mars" eller "kake" eller hva som helst. Der det står "AT THE MOMENT" kan du f.eks skrive "Akkurat nå". Det er veldig enkelt og legge den til. Her er en liten forklaring:


Når du er på "hjem", så velger du design.


Når du er inne på design, velger du rediger.

Velg widgets.


Lim inn koden, rediger fargene om du vil. Og lagre widgets.

Har du problemer eller spørsmål så er det bare å spørre. Det er relativt enkelt. Håper det var til hjelp. Flere koder kommer snart.

Velkommen

Først av alt så skal jeg forklare, jeg har laget den bloggen for å hjelpe dere med HTML og CSS koding. På denne bloggen så kommer det hjelp med forskjellige koder, har en egen blogg for design også. Der kan du skrive en kommertar eller sende mail til teeita@hotmail.com for å bestille gratis design, jeg lager headere, footer, wrappere, altså hele design, i tillegg til det så lager jeg sideflyer, sign osv. Denne bloggen kan du hente HTML-koder til forskjellig ting. Jeg skal prøve å forklare enkelt som mulig.

I tillegg til disse hjelpe bloggene har jeg en egen blogg, hvor jeg skriver om min hverdag og alt som faller meg inn. Sjekk den gjerne ut. Takk for oppmerksomheten.
Les mer i arkivet » April 2010 » Mars 2010
hits