Sandrus

Hei dere! nå har jeg lest litt rundt på forskjellige blogger og fant masse html koder som jeg ville være snill å dele med dere!

Midstille bloggen din

Du skal bruke koden:
margin-left: auto;
margin-right: auto;

Koden legger du inn i stilsettet under:
 #header, #wrapper og #footer.

Sånn 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

Du skal bruke koden:
width: 720px;

Koden legger du inn i stilsettet under:
#header, #wrapper og #footer.

Da skal det se sånn ut:
#header {
background-color: #FFFFFF;
height: 236px;
margin-left: auto;
margin-right: auto;
width: 720px;
}
#wrapper {
background-color: #FFEFFC;
margin-left: auto;
margin-right: auto;
width: 720px;
}
#footer {
background-color: #FFFFFF;
margin-left: auto;
margin-right: auto;
width: 720px;
}

Dersom du vil ha siden breiere eller smalere endre du bare tallet høyere eller lavere.

--------------------------------------------------------------------------------

Ramme rundt bloggen

Du skal bruke koden:
border: 2px solid #000000;

Koden legger du inn i stilsettet under:
#wrapper og #footer
Dersom du vil ha ramme rundt headeren din også limer du koden inn under #header også, og hvis du vil ha ramme rundt hele siden tar du under #body og.

Ca sånn skal det se ut:
body {
border: 2px Solid #000000;
}
#header {
border: 2px Solid #000000;
}
#wrapper {
border: 2px Solid #000000;
}
#footer {
border: 2px Solid #000000;
}

Der det står solid, kan du enten ha solid for linje, double for dobbel linje, dashed for stripete linje, eller dotted for prikker. Og for å endre tykkelsen på rammen, bytter du ut 2px med f.eks. 1px eller 3px.

--------------------------------------------------------------------------------

Meny fra høyre til venstre

Koden du skal legge inn er:
}
#main {
float: right;
}
#side {
float: left;

Den legger du inn i stilsettet ditt under:
#wrapper.

Ca sånn skal det se ut:
#wrapper {
background-color: #FFFFFF;
border: 2px solid #000000;
}
#main {
float: right;
}
#side {
float: left;
}
#footer {
background-color: #FFFFFF;
border: 2px solid #000000;

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

Da skal det se ca sånn ut:
#wrapper {
background-color: #FFFFFF;
border: 2px solid #000000;
}
#main {
float: right;
}
#side {
float: left;
border: 1px solid #000000;
background-color: #4D4D4D;
}

--------------------------------------------------------------------------------

Endre bakgrunn for overskrifter

Koden du skal bruke er:
h2 {
cursor:default;
background-color: #000000;        <-- (her endrer du bakgrunnsfarge)
color: #16CC16;
font-size:9pt;
font-family:tahoma;
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;

Koden legger du inn nederst i stilsettet ditt
Og så er det bare og trykk epå lagre.

--------------------------------------------------------------------------------
Bakgrunnsbilde som "står fast"

Kodendu skal bruke er:
background-image: url("her skal URL'en til bildet stå");
background-attachment: fixed;
background-position: right bottom;
background-repeat: repeat;
}

Den skal du lime inn øverst i stilsettet. Du kan endre hvor den skal stå der det står right bottom. Du kan endre den til øverst til venstre, nederst til venstre, øverst til høyre eller nederst til høyre. Url'en til bilde kan du få på www.tinypic.com, der bare laster du opp bilde og kopierer Direct Link for Layouts.

Sånn skal det se ut:
BODY {
background-image: url("her skal URL'en til bildet stå");
background-attachment: fixed;
background-position: right bottom;
background-repeat: repeat;
}
Meny under headeren

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

Det første du må gjøre er å lage et bilde i f.eks. paint, photoshop etc. Du kan lage det akkurat som du vil, f.eks. som trekant, hjerte, firkant, blomst osv, det er helt opp til deg! Husk å skrive hva det gjelder, f.eks. du kan skrive på det ene bildet; KONTAKT MEG. Når du har gjort det så må du laste bildet opp på en nettside. Det kan du gjøre på www.tinypic.com.  Da er det bare å legge inn koden. Og som du ser under så har jeg bare lagt inn en link som vises under headeren. Men hvis du vil ha flere så er det bare å lage flere bilder og legge inn flere av koden under den første du la inn.

Koden skal du legge inn i:
Design - Rediger - Maler.
Søk (CTRL + F) på " BlogDescription ". Og da skal du legge inn koden under </div> .

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

Nå trykker du på Lagre Malen og da skal det ha kommet en meny under headeren din.

--------------------------------------------------------------------------------

Ramme rundt hvert innlegg

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

Den legger du inn helt nederst i stilsettet ditt.

--------------------------------------------------------------------------------

Annonser over headeren din

Hvis du vil ha en annonse over headeren så bare gå inn på Design - Rediger - Maler og legge inn koden til annonsen under der det står:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:tag="http://blogg.no/ns/tag" xml:lang="no" lang="no">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>${BlogTitle} - ${BlogDescription}</title>
<meta name="description" content="${BlogDescription}" />
<script type="text/javascript">var domainName = ".${AppDomain}";</script>
<script type="text/javascript" src="http://static.blogg.no/blogs/script.js"></script>

Da skal det se sånn ut:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:tag="http://blogg.no/ns/tag" xml:lang="no" lang="no">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>${BlogTitle} - ${BlogDescription}</title>
<meta name="description" content="${BlogDescription}" />
<script type="text/javascript">var domainName = ".${AppDomain}";</script>
<script type="text/javascript" src="http://static.blogg.no/blogs/script.js"></script>
Her setter du inn annonsen din.

--------------------------------------------------------------------------------

Fjern linken (blogg.no) under headeren din

Gå inn på:
Design - Rediger - Maler.
Søk(ctrl+f) på <div class="breadcrumbs"><a href="http://blogg.no/">blogg.no</a> » ${BlogTitle}</div>
Så fjerner du bare denne linjen.

Til slutt klikker du bare på lagre malen, så skal linjen med linken være borte.

--------------------------------------------------------------------------------

Fjern navnet over headeren:

Koden du skal bruke er:
#header h1, #header p { display:none }

Koden skal du legge inn nesten helt nederst i stilsettet ditt.

Ca sånn skal det 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; }

--------------------------------------------------------------------------------

Hvor mange leser bloggen din akkurat nå

Koden du skal bruke er:
<!-- 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>

Den legger du inn i:
Endre profil - Beskrivelse
Du legger den inn i ruten for beskrivelse, husk å legge inn linken til din blogg!

--------------------------------------------------------------------------------

Fjerne menyen (profilbildet, beskrivelse osv..)

Du skal fjerne:
<img src="${ProfileImageUrl}" alt="${ProfileName}" />
<a href="${ProfileUrl}">${ProfileName}</a>
<p>${ProfileAge}, ${ProfileFrom}</p>
<p>${ProfileDescription}</p>

Gå inn på Design -> Rediger -> Maler.
Trykk på ctrl + F på tastaturet ditt og når det kommer opp en liten rute så skal du skrive <tag:profile> også skal du bare fjerne alt det du ikke vil ha der. Hvis du ikke vil ha profilbildet ditt så fjerner du <img src="${ProfileImageUrl}" alt="${ProfileName}" />, hvis du ikke vil ha navnet ditt så fjerner du <a href="${ProfileUrl}">${ProfileName}</a>, hvis du ikke vil ha alder, om meg og hvor du er fra fjerner du <p>${ProfileAge}, ${ProfileFrom}</p> <p>${ProfileDescription}</p>.

Sånn så det ut:
<div id="profile" class="clearfix">
<div>
<a href="${ProfileUrl}" title="${ProfileName}">
<img src="${ProfileImageUrl}" alt="${ProfileName}" />
</a>
</div>
<h3>
<a href="${ProfileUrl}">${ProfileName}</a>
</h3>
<p>${ProfileAge}, ${ProfileFrom}</p>
<p>${ProfileDescription}</p>
</div>

Sånn skal det se ut:
<div id="profile" class="clearfix">
<div>
<a href="${ProfileUrl}" title="${ProfileName}">

</a>
</div>
<h3>

</h3>

</div>

--------------------------------------------------------------------------------

Større profilbilde:

Koden du skal bruke er:
<img src=URL TIL BILDE</center>

Du kan laste opp ditt bilde i www.tinypic.com, så kopierer du den koden som står under Direct Link for Layouts, lim den inn der det står "URL TIL BILDE". Da limer du inn hele den koden over der det står: <a href="${ProfileUrl}" title="${ProfileName}"> <img src="${ProfileImageUrl}" alt="${ProfileName}" />.

Sånn så det ut
<tag:profile>
<div id="profile" class="clearfix">
<div>
<a href="${ProfileUrl}" title="${ProfileName}">
<img src="${ProfileImageUrl}" alt="${ProfileName}" />
</a>
</div>
<h3>
<a href="${ProfileUrl}">${ProfileName}</a>
</h3>
<p>${ProfileAge}, ${ProfileFrom}</p>
<p>${ProfileDescription}</p>
</div>

Sånn skal det se ut:
<tag:profile>
<tag:if test="${ProfileExists == 'true'}">
 <div id="profile" class="clearfix">
<div>
<a
<img src=http://i39.tinypic.com/2mwcq68.jpg</center>
</a>
</div>
<h3>
<a href="${ProfileUrl}">${ProfileName}</a>
</h3>
<p>${ProfileAge}, ${ProfileFrom}</p>
<p>${ProfileDescription}</p>
</div>

--------------------------------------------------------------------------------

Mellomrom mellom header og bloggen

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

Du skal legge inn koden i stilsettet ditt under:
#header.

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

Du velger selv om du vil ha større eller mindre mellomrom ved å endre tallet 10px.

--------------------------------------------------------------------------------

Mellomrom over headeren

Koden du skal bruke er:
<br>

Koden legger du inn under:
Design - Rediger - Maler.
Søk (ctrl+f) etter <div id="doc2">.
Så limer du inn koden etter dette.

Sånn skal det se ut:
<div id="doc2"><br>

Hvis du vil ha større mellomrom limer du bare koden inn flere ganger.

--------------------------------------------------------------------------------

Hvordan få headeren på plass

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

Koden legger du bare inn i stilsettet ditt.

--------------------------------------------------------------------------------

Endre "send kommentar" knappen.

Du går inn på Design - Rediger - Maler.
Når du er inne på maler står det forsiden(index), der trykker du. Så velger du 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 skrive hva du vil. For eksempel "Takk for kommentaren" eller noe.

Var dette til nytte for deg ?

- Sandra