Gratis design #1 - Enkelt med striper.
01:43 
Det er greit at dere endrer eller fikser på kodene på designet. Men IKKE fjern der det står at jeg har laget det, for grunnkodene er ifra meg.
På dette designet er det ikke noe header, men om du vil ha header går du inn på stilsett og blar ned til du ser #header { under den har jeg satt "URL TIL HEADER HER" mellom de to klammene skal du lime inn url'en til headeren din. Headeren din kan du laste opp på tinypic.com for og få url'en til den.
Det er mange som har spurt om hvordan man skifter bildet på siden. Først så klikker du på design-rediger-maler, også trykker på ctrl+f og søker på <div id="side"> og under den er koden til bildet. Du laster opp det bildet du vil ha i sidemenyen på tinypic.com, og kopierer urlen til bildet og limer da den inn mellom de to klammene under der. Om dere ikke får det til, er det bare og ta kontakt med meg!
Bildestørrelse i innlegg; 800 px.
Stilsettet og maleren som står under her kopierer dere og limer inn på stilsettet/maleren på deres blogg. Husk og ta vekk de kodene som står der ifra før av.
STILSETTET;
body {
background-attachment: fixed;
background-image: url('http://i54.tinypic.com/4hz4t2.png');
}
a { color: #F2D4D2; text-decoration: none;}
a:link { color: #666666; text-decoration: none;}
a:visited { color: #666666; text-decoration: none;}
a:active { color: #F2D4D2; text-decoration: none;}
a:hover {color: #F2D4D2; text-decoration: none;}
#wrapper {
border: solid 0px #E6E6E6;
clear:none;
padding: 0px;
width: 1040px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
}
#wrapper:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#header {
background-image: url(URL TIL HEADER HER);
border: solid 0px #E6E6E6;
height: 100px;
width: 1040px;
margin: 0px 0px 10px 0px;
float: right;
margin-left: auto;
margin-right: auto;
}
#side {
border-radius: 10px; -khtml-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
border: solid 1px #E6E6E6;
float: left;
width: 50px;
background-color: #ffffff;
font-family: tahoma;
font-size: 10px;
color: #7e7e77;
padding: 2px;
line-height: 150%;
margin-left: auto;
margin-right: auto;
}
#content {
border-radius: 15px; -khtml-border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px;
border: solid 1px #E6E6E6;
overflow: hidden;
float: right;
width: 820px;
padding: 0px 15px 20px 15px;
margin: 0px 0px 0px 0px;
line-height: 150%;
background-color: #ffffff;
margin-left: auto;
margin-right: auto;
}
h1 {
font-family: georgia;
font-size: 14px;
text-transform:uppercase;
margin: 0px;
padding: 0px;
height: 30px;
}
h2 {
border-bottom: 1px dashed #E2E6DD;
color: #999999;
font-family: Vijaya;
font-size: 22px;
font-weight: normal;
margin-bottom: -7px;
margin-top: 3px;
padding-bottom: 2px;
}
/** Entry headers **/
h3 {
font-family: georgia;
font-size: 23px;
color: #626262;
text-transform: normal;
font-weight: normal;
font-style: italic;
letter-spacing: 0px;
padding: 9px 9px 9px 9px;
margin-bottom: -20px;
margin-top: 15px;
line-height: 50%;
}
}
.navheader {
font-family: georgia;
font-size: 11px;
font-weight: normal;
color: #666666;
padding:30px 30px 0px;
margin-bottom:0px;
background-color:#FFFFFF;
text-transform: uppercase;
}
.nav {
font-family: georgia;
font-size: 11px;
font-weight: normal;
color: #000000;
margin: 0px;
}
.nav ul {
margin: 0px 0px 30px;
padding: 5px 10px 10px;
font-weight: normal;
background-color: #FFFFFF;
}
.nav li {
list-style: none;
padding: 0px 0px 6px 0px;
font-weight: normal;
}
.nav a { color: #000000; }
.nav a:hover { color: #F2F2F2; }
/** Post's body text **/
.entrybody {
font-family: arial;
font-size: 12px;
font-weight: normal;
color: #7e7e77;
line-height: 150%;
margin: 0px 0px 5px 0px;
background-color: #FFFFFF;
padding: 10px;
}
/** 'Posted by' txt **/
.entrymeta {
font-family: tahoma;
font-size: 10px;
font-weight: normal;
text-transform: uppercase;
color: #7e7e77;
text-align: left;
line-height: 20%;
border-bottom: 0px dotted #E2E6DD;
}
.entrymeta a { color: #7e7e77; }
.entrymeta a:hover { color: #F2D4D2; text-decoration: none;}
.commentheader {
font-family: arial;
font-size: 11px;
font-weight: normal;
color: #7e7e77;
line-height: 130%;
margin: 10px 10px 0px 15px;
}
.commenttext {
font-family: arial;
font-size: 11px;
font-weight: normal;
color: #7e7e77;
line-height: 100%;
margin: 10px 10px 0px 0px;
}
.commentmeta {
font-family: arial;
font-size: 11px;
font-weight: normal;
color: #999999;
margin: 10px 10px 10px 0px;
padding-bottom: 10px;
line-height: 130%;
border-bottom: 1px dashed #E7E0D6;
}
.commentmeta a { color: #7e7e77; }
.commentmeta a:hover { color: #d8c6cb; text-decoration: none}
.commentform {
font-family: arial;
font-size: 11px;
text-transform: normal;
font-weight: normal;
color: #7e7e77;
margin: 10px 10px 20px 15px;
line-height: 130%;
}
#header h1, #header p { display:none }
#header { color: #7e7e77; }
#side {
width: 16%;
}
#main {
border-right: 10px solid #000000;
width: 70%;
}
Background-color, color (farge på teksten), border osv kan endres på.
#navbar {
padding: 5px;
height: 1em;
width: auto;
margin: 0px;
text-align: center;
}
#navbar li {
float: left;
list-style: none;
width: 150px;
background-color: #fff;
}
#navbar li a {
padding: 5px;
display: block;
border-bottom: 0px dashed #F7D7EE;
color: #000000;
text-decoration: none;
font-family: verdana;
font-size: 9px;
line-height: 12px;
}
#navbar li ul {
padding: 5px;
display: none;
width: em;
background-color: #fff;
}
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
z-index: 1;
text-align: left;
}
#navbar li:hover li, #navbar li.hover li {
float: none;
}
#navbar li:hover li a, #navbar li.hover li a {
border-bottom: 1px dotted #E6E6E6;
color: #727272;
}
#navbar li li a:hover {
background-color: #FFFFFF;
}
#meny {
width: 750px;
margin-left: auto;
}
MALEREN - 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">
<head>
<title>${BlogTitle} - ${PageTitle}</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="generator" content="${AppUrl}" />
<link rel="stylesheet" href="${BlogUrl}style.css" type="text/css" />
<script type="text/javascript" src="http://static.blogg.se/public/js/script_blogg.js"></script>
<script type="text/javascript" src="http://static.blogg.se/shared/js/script.js"></script>
<script type="text/javascript" src="http://static.blogg.se/shared/js/comments.js"></script>
</head>
<br>
<body>
<div id="wrapper">
<div id="header" onclick="document.location='${BlogUrl}';">
</div>
<br><div id="meny">
<ul id="navbar">
<li><a href="#">Siste innlegg</a>
<ul>
<tag:recentlist limit="10">
<li><a href="${EntryPermaLink}">${EntryTitle}</a></li>
</tag:recentlist>
</ul>
</li>
<li><a href="#">Kategorier</a>
<ul>
<tag:categorylist>
<li><a href="${CategoryLink}" class="nav">» ${CategoryName}</a></li>
</tag:categorylist>
</ul>
</li>
<li><a href="#">Arkiv</a>
<ul>
<tag:archivelist>
<li><a href="${ArchiveLink}">${ArchiveName}</a></li>
</tag:archivelist>
</ul>
</li>
<li><a href="LINK HER">Overskrift</a>
<ul>
</ul>
</li>
</ul>
</div>
<div id="content">
<tag:entry>
<a name="a${EntryNum}"></a>
<br>
<div class="entrymeta">
${EntryDate} <img src="http://thingsyouremember.blogg.se/design/images/2010/heeart_100769151.png" border="0"> ${EntryTime} </div>
<h3>${EntryTitle}</h3>
<div class="entrybody">${EntryBody}</div>
<div class="entrymeta">
I <a href="${EntryCategoryLink}">${EntryCategoryName}</a>
</div>
</tag:entry>
<!-- Display comments and form if this entry allows comments -->
<tag:if test="${Comments == 1}">
<a name="comment" /><br>
  <font face="Vijaya"><font size="5"><font color="#666666">${EntryCommentCount} kommentarer på "${EntryTitle}"</font><br><br></font></font>
<tag:commentlist>
<div class="commentheader">
<b>Postet av: ${CommentAuthor}</b>
<div class="commenttext">${CommentText}</div>
<div class="commentmeta">
${CommentDate}, ${CommentTime}<br/>
<tag:if test="${CommentAuthorURL != ''}">
<em>URL: <a href="${CommentAuthorURL}">${CommentAuthorURL}</a></font></font></font></em>
<tag:if test="${CommentAuthorEmail != ''}">
<br />E-post: <a href="mailto:${CommentAuthorEmail}">${CommentAuthorEmail}</a><br/><br/>
</tag:if>
</tag:if>
</div>
</div>
</tag:commentlist>
<form class="commentform" action="${AppUrl}index.bd?fa=comment.insert" name="commentForm" method="post" onsubmit="doSubmit(this)">
<input type="hidden" name="commentid" value="${CommentID}" />
<br />
<font color="#e8cfc9"><font face="georgia"><font size="3">Legg igjen en kommentar:</font><br/><br/>
</font></font>
Navn: <br />
<input type="georgia" name="author" onchange="doChange(this)" value="" size="42" maxlength="255" />
<input name="remember" onclick="doCheck(this)" type="checkbox" value="1" id="remember" /> Husk meg?<br />
E-post:<br />
<input type="georgia" name="authoremail" onchange="doChange(this)" value="" size="42" maxlength="255" />
<br />
Bloggadresse: <br />
<input type="georgia" name="authorurl" onchange="doChange(this)" value="http://" size="42" maxlength="255" />
<br />
Kommentar: <br />
<textarea name="comment" onchange="doChange(this)" cols="52" rows="7"></textarea>
<br />
<br/>
<input class="formbutton" type="submit" name="submit" value="Tusen takk!" />
<img src="http://designbloggar.blogg.se/blue/images/2011/heart_128008752.png" border="0"> Dette designet er laget av http://katrineaastorp.blogg.no
<br/>
</form>
</tag:if>
</div>
<div id="side">
<img src="http://bloggfiler.no/katrineaastorpdesign.blogg.no/images/1085391-7-1302044240444.jpg" width="165" border="0"
<br>
<img src="http://designbloggar.blogg.se/blue/images/2011/heart_128008752.png" border="0">
Her kan du skrive om deg selv eller hva du vil.
<br>
<br>
<br>
<h2>arkiv</h2>
<tag:archivelist limit="30">
<br/><a href="${ArchiveLink}"mce_href="/922173/entries/article/73622744/
${ArchiveLink}">${ArchiveName}</a></tag:archivelist><br/><br/>
<br>
<h2>kategorier</h2>
<br>
<tag:categorylist>
<br/><a href="${CategoryLink}" mce_href="/922173/entries/article/73622744/ ${CategoryLink}">${CategoryName}</a></tag:categorylist><br/><br/>
<h2>linker</h2>
<tag:linklist>
<br><a href="${LinkURL}">${LinkName}</a></tag:linklist><br/><br/>
<h2>design</h2>
<br>
<a href="http://katrineaastorp.blogg.no"><img src="http://i54.tinypic.com/sqrq0k.jpg" width="165" border="0"
<br>
Designet er laget av Katrine.
<br><br>
</div>
</div>
</div>
</body>
</html>
Om det er noe dere har problemer med, så si ifra! Så skal jeg hjelpe dere.
264 kommentarer på "Gratis design #1 - Enkelt med striper."
Men hvordan får jeg fikset bilde på siden?:)
jeg har skrevet det øverst der nå om hvordan du gjør det! :-)
det er fordi bildet ditt er for lite til det headeren egentlig skal være. gå innpå stilsett og bla ned til width også ser du på hvilken størrelse det er. så må du gjøre headeren til samme bredde som den størrelsen der på et redigeringsprogram det er mulig og gjøre det i. jeg pleier som regel og bruke photoscape. visst det ikke går så må du endre på hight til en litt større størrelse :-) lykke til!
ååh, så bra! og jeg som ikke er noe flink på og forklare, menmen (a) bra du fikk det inn, hihi :-D
Mvh Andrea
om du fortsatt ikke får det til, så bare send meg en mail på katrineaastorp.blogg@hotmail.com, så skal jeg hjelpe deg! :-)
PS: Utrolig fint desgin!
isåfall, visst du ikke får det bort enda, så får du sende meg en mail på katrineaastorp.blogg@hotmail.com. så snakkes vi der! :-)
ja, det kan jeg gjøre vet du! bare send meg en mail på katrineaastorp.blogg@hotmail.com, så snakkes vi nærmere der om det! :-)
Jeg får ikke satt inn headeren i designet , kunne du hjulpet meg? : )
Help me?!
Hvordan kan jeg endre der det står at jeg kan skrive litt om meg selv helt oppe til venstre på designet?
Og endring av bildene? :)
Liker bloggen din veldig godt!
om du fortsatt har problemer med dette så send meg en mail på katrineaastorp.blogg@hotmail.com, så snakkes vi nærmere om det der! :-)
du går først inn på design og deretter maler. så holder du inn knappen ctrl og klikker på f, da skal det komme opp en sånn søkerute. i den søkeruten søker du på "her kan du skrive om deg selv eller hva du vil" da skal det komme opp, og der kan du da endre den teksten under bildet. koden til bildet skal være over der, og mellom de to klammene skal du da lime inn tinypic koden til profilbildet ditt :-)
aw, tusen takk!
når dere har lastet opp bildet, så skal det jo komme opp endel koder. det er den nederste kode "boksen" dere skal ta. om dere fortsatt sliter med dette, så kan dere godt sende meg bilde på katrineaastorp.blogg@hotmail.com, så skal jeg laste det opp for dere og sende dere koden! :-)
Kan du sende svaret på e-post til meg ? :)
Lellezz@live.no
hehe, ingen årsak vet du! :-)
du går inn på design og deretter maler, så holder du inn ctrl knappen og klikker på f, da skal det komme opp en sånn søkerute. inni den søkeruten skriver du" her kan du skrive om deg selv eller hva du vil" når den kommer opp så skal koden til profilbilde være over. altså ikke den designbloggar, men den som det står navnet mitt på, der kan du endre, mellom de to klammene :-)
Jeg har redigert noe på det, også har jeg bytta ut ''Design laget av Katrine'' til ''Grunndesinget'' hvis det er greit :)
men eg har fått til å legge inn url til header og sidemeny men bilde og headeren kommer ikke opp....
altså dei viser ikke........?
f.eks. I blogg vurderinger ?
vilde.taule@gmail.com
// inetheduck.blogg.no
Men jeg får ikke til å sette inn headeren .. :S
Også går det ann og ta vekk den bakgrunnen slik at jeg bare kan ha en hvit vanlig bakgrunn?:)
Kan du svare på e-post: elinebremseth@hotmail.com
Håper du kan hjelpe.
Eline
men jeg får ikke inn headeren!
supert!
- Takk !
Men eg får ikkje til å endre på bildet på sidemenyen. Eg har prøvd kjempe mykje no :/ Tror du at du kan hjelpe meg?
Lurte bare på hva størrelsen på headeren må være for å passe inn?
Utrolig hyggelig om du svarte <3
Utrolig flotte design du har laget.
Jeg har prøvd meg litt ut med to av de, men etter at jeg var ferdig med å sette inn alle kodene og sånn så ble alle overskriftene på bloggen min (som er på mer en en linje), på en måte oppå hverandre. Hva gjør jeg for å unngå dette?
Jeg er så lite teknisk at dette var til stooor hjelp, og veldig bra forklart!
Tuusen takk! :-)
Fin blogg!
1. Hvordan finner man url'en til "Legg meg til som venn" ?
2. Hvordan fikser jeg slik at det heller er et bilde av meg e.l. isteden for den hånda som holder et smykke? :)
Jeg lurte på om det gikk and og legge inn det man ville på menyen.
Jeg greier ikke legge inn koden til innlegg det kommer opp at malen inneholder en feil og det skjer alltid! jeg greier alt annet enn koden til innlegg. hva skal eg gjøre?
Arkiv