html og css

Koder, og design

Sidemeny fra høyre til venstre.
Bakgrunn som står stille.
Endre "musepila".
Bakgrunnsfarge i overskriften.
 





Gratisdesign #1:

//Forhondsvisning
Stilsett.
Forside.
Innlegg.
Kategorier.
Arkiv. 

Gratisdesign #2:

(info: 800px)
//Forhondsvisning.

Stilsett.

Forside.
Innlegg.
Kategorier.
Arkiv.

Gratisdesign #3:

STILSETT   
FORSIDE   
INNLEGG   
KATEGORIER   
ARKIV 

Gratisdesign #4:
(info: stillestående sidemeny, lilla bakgrunn, skygger, ingen header)
Gratisdesign #5:
(info: to sidemenyer, den til venstre er stillestående, skygger, 700px)
Stilsett        
Forsiden            
Innlegg           
Kategori            

Testinnlegg





Sorterte koder:

Design #2 - koder (innlegg)

<!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>${EntryTitle} (${BlogTitle})</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>
<link rel="alternate" href="http://feeds.blogg.no/${BlogId}/post.rss" title="Siste innlegg" type="application/rss+xml" />
<link rel="alternate" href="http://feeds.blogg.no/${BlogId}/comment/${EntryID}.rss" title="Kommentarer til dette inlegget" type="application/rss+xml" />
<link rel="stylesheet" href="http://design.blogg.no/builder/screen.css" type="text/css" />
<link rel="stylesheet" href="${BlogUrl}style.css" type="text/css" />
<link rel="shortcut icon" href="http://static.blogg.no/blogs/favicon.gif" type="image/gif" />
</head>
<body>
<div id="doc2">
<div id="header" onclick="document.location='${BlogUrl}';">
<h1>
<a href="${BlogUrl}">${BlogTitle}</a>
</h1>
<p>${BlogDescription}</p>
</div>
<div id="wrapper" class="yui-gc">
<a href="${BlogUrl}">${BlogTitle}</a> »
<a href="${EntryCategoryLink}">${EntryCategoryName}</a> » ${EntryTitle}</div>
<div id="main" class="yui-u first">
<tag:entry>
<div class="entry">
<a name="a${EntryNum}" id="a${EntryNum}"></a>
<h2>${EntryTitle}</h2>
<div class="meta">
</div>
<div class="content">${EntryBody}</div>
<div class="meta">
<ul>
<li>${EntryDate} klokken${EntryTime}.
<a href="${EntryCategoryLink}">${EntryCategoryName}</a></li>
<li>
<tag:if test="${EntryCommentCount == 0}">
<a href="${EntryPermaLink}#comment">Ingen kommentarer</a>
<tag:elseif test="${EntryCommentCount == 1}" />
<a href="${EntryPermaLink}#comment">Én kommentar</a>
<tag:else />
<a href="${EntryPermaLink}#comment">${EntryCommentCount} kommentarer</a>
</tag:if>
</li>
<li>
<a href="${EntryPermaLink}">Permalenke</a>
</li>
<li class="share">
<a href="http://share.blogg.no/share?url=${EntryPermaLink}&amp;title=${EntryTitle}">Tips en venn</a>
</li>
</ul>
<tag:if test="${EntryHasTags == 'true'}">
<div class="tags">Stikkord:
<ul><tag:taglist><li><a href="${TagURL}">${TagName}</a></li></tag:taglist></ul></div>
</tag:if>
<tag:include module="postentry"></tag:include>
</div>
</div>
</tag:entry>
<tag:if test="${Comments == 1}">
<a name="comment" id="comment"></a>
<h3>
<tag:if test="${EntryCommentCount == 0}">Ingen kommentarer
<tag:elseif test="${EntryCommentCount == 1}" />Én kommentar
<tag:else />${EntryCommentCount} kommentarer</tag:if>
</h3>
<div id="comments">
<tag:commentlist>
<div class="comment ${CommentClass}">
<div class="meta">
<tag:if test="${CommentProfileUrl != ''}">
<a href="${CommentProfileUrl}">
<img class="avatar" src="http://i.blogg.no/50x50/${CommentProfileImageUrl}" alt="" />
</a>
<tag:else />
<tag:if test="${CommentAuthorUrl != ''}">
<a rel="nofollow" href="${CommentAuthorUrl}">
<img class="avatar" src="http://i.blogg.no/50x50/http://www.gravatar.com/avatar.php?gravatar_id=${CommentAuthorEmailHash}&amp;default=http%3A%2F%2Fstatic.blogg.no%2Fblogs%2Favatar.png&amp;size=50" alt="" />
</a>
<tag:else />
<img class="avatar" src="http://i.blogg.no/50x50/http://www.gravatar.com/avatar.php?gravatar_id=${CommentAuthorEmailHash}&amp;default=http%3A%2F%2Fstatic.blogg.no%2Fblogs%2Favatar.png&amp;size=50" alt="" />
</tag:if>
</tag:if>
<h4>${CommentAuthorLinkIf}</h4>
<p>${CommentDate} kl.${CommentTime}</p>
</div>
<div class="content">${CommentText}</div>
</div>
</tag:commentlist>
</div>
<div id="newcomment" class="clearfix">
<h3>Skriv en ny kommentar</h3>
<form action="${AppUrl}index.bd?fa=comment.insert" id="commentform" method="post" onsubmit="doSubmit(this)">
<div id="comment_author_wrapper">
<label for="comment_author">Navn:</label>
<input id="comment_author" type="text" name="author" onchange="doChange(this)" value="" maxlength="100" />
</div>
<div id="comment_authoremail_wrapper">
<label for="comment_authoremail">E-post:</label>
<input id="comment_authoremail" type="text" name="authoremail" onchange="doChange(this)" value="" maxlength="100" />
</div>
<div id="comment_authorurl_wrapper">
<label for="comment_authorurl">URL:</label>
<input id="comment_authorurl" type="text" name="authorurl" onchange="doChange(this)" value="http://" maxlength="100" />
</div>
<div id="comment_text_wrapper">
<label for="comment_text">Din kommentar:</label>
<textarea id="comment_text" name="comment" onchange="doChange(this);" cols="40" rows="10"></textarea>
</div>
<div id="comment_submit_wrapper">
<input type="hidden" name="commentid" value="${CommentID}" />
<input id="comment_submit" class="submit" type="submit" name="submit" value="Send kommentar" />
</div>
<div id="comment_remember_wrapper">
<input id="comment_remember" name="comment_remember" onclick="doCheck(this)" type="checkbox" value="1" />
<label for="comment_remember">Husk meg ?</label>
<br>
Design by:
<a href="http://br0wniee.blogg.no/">Julie Halvorsen</a>
<br>
</div>
</form>
</div>
</tag:if>
</div>
<div id="side" class="yui-u">
<tag:profile>
<tag:if test="${ProfileExists == 'true'}">
<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>
</tag:if>
<tag:include module="sidebar"></tag:include>
<br>
<h3>Meny</h3>
<br>
<a href=" http://designbyjulie/ "> FORSIDEN </a>
<br>
<a href=" http://designbyjulie.blogg.no/1299334993_endre_musepila.html "> Endre "musepila" </a>
<br>
<a href=" http://designbyjulie.blogg.no/1299335408_bakgrunnsfarge_i_over.html "> Bakgrunnsfarge i overskriftene </a>
<br>
<a href=" http://designbyjulie.blogg.no/1295283195_sidemeny__fra_hyre_ti.html "> Sidemenyen til venstre </a>
<br>
<a href=" http://designbyjulie.blogg.no/1295292919_bakgrunnsbilde_som_st.html "> Stillestående bakgrunn </a>
<br><br>
<a href="${ProfileUrl}">Legg meg til som venn</a>
<br><br>
<div>
<h3>Kategorier</h3>
<ul>
<tag:categorylist>
<li>
<a href="${CategoryLink}">${CategoryName}</a>
</li>
</tag:categorylist>
</ul>
</div>
<div>
<h3>Arkiv</h3>
<ul>
<tag:archivelist>
<li>
<a href="${ArchiveLink}">${ArchiveName}</a>
</li>
</tag:archivelist>
</ul>
<br>
Design by:
<a href="http://br0wniee.blogg.no/">Julie Halvorsen</a>
<br>
</div>
</div>
</div>
<div id="footer" class="yui-gb">
</div>
</div>
</div>
</body>
</html>

Design #2 - koder (arkiv)

<!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>${ArchiveName} (${BlogTitle})</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>
<link rel="alternate" href="http://feeds.blogg.no/${BlogId}/post.rss" title="Siste innlegg" type="application/rss+xml" />
<link rel="stylesheet" href="http://design.blogg.no/builder/screen.css" type="text/css" />
<link rel="stylesheet" href="${BlogUrl}style.css" type="text/css" />
<link rel="shortcut icon" href="http://static.blogg.no/blogs/favicon.gif" type="image/gif" />
</head>
<body>
<div id="doc2">
<div id="header" onclick="document.location='${BlogUrl}';">
<h1>
<a href="${BlogUrl}">${BlogTitle}</a>
</h1>
<p>${BlogDescription}</p>
</div>
<div id="wrapper" class="yui-gc">
<div class="breadcrumbs"><a href="http://blogg.no/">blogg.no</a> »
<a href="${BlogUrl}">${BlogTitle}</a> » ${ArchiveName}</div>
<div id="main" class="yui-u first">
<h2>${ArchiveName}</h2>
<tag:entrylist limit="1000" >
<div class="entry">
<h3>
<a href="${EntryPermaLink}">${EntryTitle}</a>
</h3>
<div class="content">${EntryBody}</div>
<div class="meta">
<ul>
<li>${EntryDate} kl.${EntryTime} i
<a href="${EntryCategoryLink}">${EntryCategoryName}</a></li>
<li>
<tag:if test="${EntryCommentCount == 0}">
<a href="${EntryPermaLink}#comment">Ingen kommentarer</a>
<tag:elseif test="${EntryCommentCount == 1}" />
<a href="${EntryPermaLink}#comment">Én kommentar</a>
<tag:else />
<a href="${EntryPermaLink}#comment">${EntryCommentCount} kommentarer</a>
</tag:if>
</li>
<li>
<a href="${EntryPermaLink}">Permalenke</a>
</li>
<li class="share">
<a href="http://share.blogg.no/share?url=${EntryPermaLink}&amp;title=${EntryTitle}">Tips en venn</a>
</li>
</ul>
</div>
</div>
</tag:entrylist>
</div>
<div id="side" class="yui-u">
<tag:profile>
<tag:if test="${ProfileExists == 'true'}">
<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>
</tag:if>
</tag:profile>
<tag:include module="sidebar"></tag:include>
<br>
<h3>Meny</h3>
<br>
<a href=" DIN BLOGGADRESSE!! "> FORSIDEN </a>
<br>
<a href=" LINK "> VALGFRITT!! </a>
<br>
<a href=" LINK "> VALGFRITT!! </a>
<br>
<a href=" LINK "> VALGFRITT!! </a>
<br><br>
<a href="${ProfileUrl}">Legg meg til som venn</a>
<br><br>
<div>
<h3>Kategorier</h3>
<ul>
<tag:categorylist>
<li>
<a href="${CategoryLink}">${CategoryName}</a>
</li>
</tag:categorylist>
</ul>
</div>
<div>
<h3>Arkiv</h3>
<ul>
<tag:archivelist>
<li>
<a href="${ArchiveLink}">${ArchiveName}</a>
</li>
</tag:archivelist>
</ul>
</div>
</div>
</div>
<div id="footer" class="yui-gb">
<div class="yui-u first">
<tag:profile><a href="http://blogg.no/">blogg.no</a> leverer teknologien bak <a href="${BlogUrl}">${BlogTitle}</a>. Bloggen
<tag:if test="${ProfileExists == 'true'}">skrives av ©
<a href="${ProfileUrl}">${ProfileName}</a> og </tag:if> er underlagt
<a href="http://www.lovdata.no/all/nl-19610512-002.html">Lov om opphavsrett til åndsverk</a>. Det betyr at du ikke kan kopiere tekst, bilder eller annet innhold uten tillatelse. Forfatter
er selv ansvarlig for innhold. Henvendelser kan rettes til
<a href="mailto:hjelp@blogg.no">hjelp@blogg.no</a>.</tag:profile>
</div>
<div class="yui-u">
<h4>Arkiv</h4>
<ul>
<tag:archivelist limit="5">
<li>
<a href="${ArchiveLink}">${ArchiveName}</a>
</li>
</tag:archivelist>
</ul>
</div>
<div class="yui-u">
<p>Denne tjenesten er levert av blogg.no. Hos oss finner du:</p>
<ul>
<li><a href="http://blogg.no">blogg.no</a> - Få din egen blogg, helt gratis.</li>
<li><a href="http://bloggrevyen.no">bloggrevyen</a> - Oversikt over nye norske blogginnlegg.</li>
<li><a href="http://miniblogg.no">miniblogg</a> - Kjapp blogging i miniformat.</li>
<li><a href="http://bloggblogg.no">bloggblogg</a> - Her blogger vi selv om stort og smått.</li>
<li><a href="http://forum.blogg.no/">forum</a> - Tips, råd og hjelp om blogging og design.</li>
</ul>
</div>
</div>
</div>
</body>
</html>

Testinnlegg

Dette er  slik design #2 vil se ut. Bildene lastes opp i 800 px. Kodene til designet kommer om litt, snakkaas.



Testbilde.........

Hva synes dere om designet?

Bakgrunnsfarge i overskriften

Først går du inn på MALER, og søker på EntryTitle, der står det mest sannsynlig dette:

 

<h2>
<a href="${EntryPermaLink}">${EntryTitle}</a>
</h2>

 

Du skal bytte ut 2-tallene med 3.
Så legger du inn denne koden:

h3 {
background: #efefef; url(http://img593.imageshack.us/img593/7708/50852318.jpg);
background-repeat: no-repeat;
background-position: left top;
font-family: times new roman, calibri, verdana, sans-serif;
font-size: 33px;
font-weight: normal;
color: #666666;
vertical-align: top;
text-align: left;
padding: 2px;
margin: 30px 0px 10px;
border: 1px solid #cfcfcf;
}
h3 a:link { color: #414141; text-decoration: none; }
h3 a:visited { color: #414141; text-decoration: none; }
h3 a:hover { color: #000000; font-weight: normal; text-decoration: none; }
h3 a:active { color: #414141; text-decoration: none; }
}

Den skal legges inn NEDERST i stilsettet.

 

Endre "musepila"

Dette er koden du skal bruke:

cursor: url(http://static.tumblr.com/9ji9tiw/iLgl5njtq/cursor.gif), progress;

 

Den skal legges inn helt i bånn av "Body"-delen i stilsettet.
Det skal se skik ut:

 



Bakgrunnsbilde som står fast

Her er koden du skal bruke:

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

 

Body-delen står der alerede, derfor skal du fjerne alt fra BODY og helr ned til den første sånne ->   }
Deretter limer du inn koden der den forrige sto.

Sidemeny - fra høyre til venstre

Design > Rediger > Css/Stilsett

Dette er koden:
}
#main {
float: right;
}
#side {
float: left;
}

Du legger den inn under #wrapper. 
Sånn som dette skal det se ut:
#wrapper {
background-color: #FFFFFF;
border: 2px dotted #000000;
}
#main {
float: right;
}
#side {
float: left;
}
#footer {
background-color: #FFFFFF;
border: 2px dotted #000000;

Her kan du skrive litt om deg selv.
Her kan du legge ut en bilde, eller skrive hva du vil.
hits