Gratis design #2 - Sweet dreams
02:05 
Det er greit at dere endrer eller fikser på designet, men IKKE fjern der det står at jeg har laget det. Dere kan få problemer visst jeg finner ut av det. Enkelt og greit er det.
HVORDAN DU SKIFTER HEADER
Det er mange som har slitet med og sette inn header, eller bytte header på det forrige designet. Derfor skal jeg forklare på min beste måte hvordan dere skifter header på dette designet.
1. Først må du ha en header som er 850 i bredden, dette kan du fikse på et redigeringsprogram hvor du kan endre størrelsen og da bare setter du bredden på 850. Husk det! Om det er for lite eller for stort, så går det ikke.
2. Etter du har endret bredden til 850, går du inn på www.tinypic.com og laster opp din header der. Når den er ferdig opplastet skal du kopiere den nederste koden.
3. Når du har kopiert denne koden går du da inn på design og deretter stilsett. Så holder du ctrl knappen inne imens du trykker på F. Da skal det komme opp en sånn søkerute, da søker du på #header {
4. Når du har fått søkt på det og funnet deg frem dit, så skal det stå background-image: url(http://i52.tinypic.com/snm74j.jpg);
Der det står (http://i52.tinypic.com/snm74j.jpg); skal du da bytte ut med din kode.
5. Det er veldig mange som sleit med lengden på headeren. Når du har fått tatt inn koden til headeren din, så skal det stå height: 185px; under denne koden. Der det står 185px; skal du da endre tallet til et større tall om headeren din er lengre i høyden enn den headeren som er her. Så kan du bare finne deg fram og variere litt med tall og se hva som er best. Jo mindre tall du setter, jo lavere blir høyden på headeren. Jo høyere du setter tallet jo større blir høyden på headeren.
HVORDAN SKIFTE TEKST/ENDRE BILDE I SIDEMENYEN
Det er også veldig mange som sleit med dette. Så nå skal jeg forklare for dere.
1. Når du skal endre bilde i sidemenyen, laster du først opp bildet ditt i www.tinypic.com. Når bildet ditt er ferdig opplastet kopierer du den nederste koden. Deretter går du inn på design også maler. Nå som du har klikket på maler er du da på forsiden. Altså framsiden av bloggen. Det du gjør da er og trykke på ctrl knappen også trykke på F. Så skal det komme opp en søkerute, i den søkeruten søker du på dette; <img src="http://bloggfiler.no/katrineaastorpdesign.blogg.no/images/1085391-7-1302044240444.jpg" width="165" border="0
2. Når du har søkt på dette og du har kommet frem i maleren, så tar du koden til bildet ditt og bytter den ut med denne koden http://bloggfiler.no/katrineaastorpdesign.blogg.no/images/1085391-7-1302044240444.jpg.
3. Nå ser du at bildet ditt har kommet opp, men om bildet enten er for stort eller for lite, kan du da endre tallet på width="165". Der kan du da endre tallet til et mindre tall om du vil at bildet skal være mindre. Visst du vil at bildet skal være større så tar du et større tall.
4. Når du driver med dette, så skal det stå "her kan du skrive om deg selv eller hva du vil" rett under den koden. Der kan du bare skrive hva du vil, og da endrer teksten seg! Enklere enn det blir det ikke. Håper dere skjønner og lykke til!
DESIGN-STILSETT
body {
background-attachment: fixed;
background-image: url(http://i51.tinypic.com/16h6tzn.jpg);
}
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(http://i52.tinypic.com/snm74j.jpg);
border: solid 1px #E6E6E6;
height: 185px;
width: 850px;
margin: 0px 0px 10px 0px;
float: left;
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: right;
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: solid 1px #E6E6E6;
overflow: hidden;
float: left;
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: georgia;
font-size: 13px;
font-weight: normal;
margin-bottom: -7px;
margin-top: 3px;
padding-bottom: 2px;
}
/** Entry headers **/
h3 {
font-family: georgia;
font-size: 19px;
color: #626262;
background-image: url(http://i55.tinypic.com/2v9tenr.jpg);
text-transform: uppercase;
font-weight: normal;
font-style: normal;
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: georgia;
font-size: 10px;
font-weight: normal;
text-transform: normal;
color: #7e7e77;
text-align: middle;
line-height: 20%;
border-bottom: 1px dotted #E2E6DD;
}
.entrymeta a { color: #7e7e77; }
.entrymeta a:hover { color: #F2D4D2; text-decoration: none;}
.commentheader {
border-bottom: 1px dotted #E2E6DD;
border-radius: 10px; -khtml-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
-webkit-box-shadow: 0px 0px 20px #7e7e77;
-moz-box-shadow: 0px 0px 20px #7e7e77;
box-shadow: 0px 0px 3px #7e7e77;
-moz-border-radius: 15px;
font-family: arial;
font-size: 11px;
font-weight: normal;
color: #7e7e77;
background-color: #FCF7FC;
border: 1px solid #CCCCCC;
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: arial;
font-size: 9px;
line-height: 11px;
}
#navbar li ul {
padding: 1px;
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: #FBE8FF;
}
#meny {
width: 950px;
margin-left: auto;
}
#side {
margin-top: -198px;
background-color: #ffffff;
}
MALER - FORSIDEN, KATEGORI, 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">
<head>
<title>${BlogTitle} - ${BlogDescription}</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" />
<link rel="alternate" href="${BlogUrl}index.rss" type="application/rss+xml" title="RSS" />
<link rel="shortcut icon" href="http://thingsyouremember.blogg.se/design/images/2010/heeart_100769151.png" type="image/gif"/><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>
</head>
<br>
<br>
<br>
<body>
<div id="wrapper">
<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="header" onclick="document.location='${BlogUrl}';">
</div>
<div id="content">
<tag:entrylist limit="31">
<a name="a${EntryNum}"></a>
<br>
<div class="entrymeta">
<center><h3><a href="${EntryPermaLink}">${EntryTitle}</a></h3></ center>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<center>${EntryDate} <img src="http://thingsyouremember.blogg.se/design/images/2010/heeart_100769151.png" border="0"> ${EntryTime}</div></ center>
<div class="entrybody">${EntryBody}</div>
<div class="entrymeta">
<center><font size="4">[<a href="${EntryPermaLink}#comment">${EntryCommentCount}] kommentarer </a></font></ center>
<br/><br/>
<br>
<br>
</div>
<br>
<br>
</tag:entrylist>
</div>
<div id="side">
<center><img src="http://bloggfiler.no/katrineaastorpdesign.blogg.no/images/1085391-7-1302044240444.jpg" width="165" border="0"</ center>
<br>
<center><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.</ center>
<br>
<br>
<img src="http://designbloggar.blogg.se/blue/images/2011/heart_128008752.png" border="0"> <a href="${ProfileUrl}">Legg meg til som venn</a>
<br>
<br>
<br>
<center><h2><img src="http://designbloggar.blogg.se/blue/images/2011/heart_128008752.png" border="0"> A r k i v</h2></ center>
<tag:archivelist limit="30">
<br/><a href="${ArchiveLink}"mce_href="/922173/entries/article/73622744/
${ArchiveLink}">${ArchiveName}</a></tag:archivelist><br/><br/>
<br>
<center><h2><img src="http://designbloggar.blogg.se/blue/images/2011/heart_128008752.png" border="0"> K a t e g o r i e r</h2></ center>
<br>
<tag:categorylist>
<br/><a href="${CategoryLink}" mce_href="/922173/entries/article/73622744/ ${CategoryLink}">${CategoryName}</a></tag:categorylist><br/><br/>
<center><h2><img src="http://designbloggar.blogg.se/blue/images/2011/heart_128008752.png" border="0"> L i n k e r</h2></ center>
<tag:linklist>
<br><a href="${LinkURL}">${LinkName}</a></tag:linklist><br/><br/>
<center><h2><img src="http://designbloggar.blogg.se/blue/images/2011/heart_128008752.png" border="0"> D e s i g n</h2></ center>
<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>
MALER - 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>
<br>
<br>
<body>
<div id="wrapper">
<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="header" onclick="document.location='${BlogUrl}';">
</div>
<div id="content">
<tag:entry>
<a name="a${EntryNum}"></a>
<br>
<div class="entrymeta">
<center><h3>${EntryTitle}</h3></ center>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<center>${EntryDate} <img src="http://thingsyouremember.blogg.se/design/images/2010/heeart_100769151.png" border="0"> ${EntryTime} </div></ center>
<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="4">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://thingsyouremember.blogg.se/design/images/2010/heeart_100769151.png" border="0"> Dette designet er laget av http://katrineaastorp.blogg.no
<br/>
</form>
</tag:if>
</div>
<div id="side">
<center><img src="http://bloggfiler.no/katrineaastorpdesign.blogg.no/images/1085391-7-1302044240444.jpg" width="165" border="0"</ center>
<br>
<center><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.</ center>
<br>
<br>
<center><img src="http://designbloggar.blogg.se/blue/images/2011/heart_128008752.png" border="0"> <a href="${ProfileUrl}">Legg meg til som venn</a></ center>
<br>
<br>
<br>
<center><h2><img src="http://designbloggar.blogg.se/blue/images/2011/heart_128008752.png" border="0"> A r k i v</h2></ center>
<tag:archivelist limit="30">
<br/><a href="${ArchiveLink}"mce_href="/922173/entries/article/73622744/
${ArchiveLink}">${ArchiveName}</a></tag:archivelist><br/><br/>
<br>
<center><h2><img src="http://designbloggar.blogg.se/blue/images/2011/heart_128008752.png" border="0"> K a t e g o r i e r</h2></ center>
<br>
<tag:categorylist>
<br/><a href="${CategoryLink}" mce_href="/922173/entries/article/73622744/ ${CategoryLink}">${CategoryName}</a></tag:categorylist><br/><br/>
<center><h2><img src="http://designbloggar.blogg.se/blue/images/2011/heart_128008752.png" border="0"> L i n k e r</h2></ center>
<tag:linklist>
<br><a href="${LinkURL}">${LinkName}</a></tag:linklist><br/><br/>
<center><h2><img src="http://designbloggar.blogg.se/blue/images/2011/heart_128008752.png" border="0"> D e s i g n</h2></ center>
<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>
Visst designet blir veldig rotete, så betyr det at dere ikke har limt kodene inn ordentlig. Dere må huske og fjerne de kodene som er der ifra før av, og lime inn riktige koder som jeg har skrevet over!
Visst det er noe dere sliter med så send meg en mail på katrineaastorp.blogg@hotmail.com
Jeg kommer bare til og svare dere der, og hjelpe dere der! ;-)
147 kommentarer på "Gratis design #2 - Sweet dreams"
er ikke så vanskelig, om du prøver deg fram, men om du fortsatt ikke får det til kan du sende meg passord og brukernavn til katrineaastorp.blogg@hotmail.com, så kan jeg fikse det for deg! :-)
Men i hvilken størrelse fungere bildene vi har med på innleggene best? :-)
800px; :-)
Tusen takk<3
bruker det ,og er kjempe fornøyd :)
der skal det stå forklart med hvilken kode du skal da sette inn :-)
om du fortsatt sliter med dette så ta også send meg en mail på katrineaastorp.blogg@hotmail.com, så snakkes vi nærmere om det der! så kan jeg hjelpe deg :-)
koselig og høre forresten! koselig at du bruker det! bare hyggelig vet du :-)
Helt tilfeldig så var jeg innom din blogg, og etter det gikk jeg på en annen blogg, så synes jeg hun hadde samme design som du hadde laget, men la merke til at hun har fjernet bildet hvor det står at du har laget det. Så tenkte bare å si ifra så du vet det :) Bloggen er: http://cillaa.blogg.no/
åh, tusen takk! skal sjekke ut bloggen :-) er veldig takknemlig for at du sier ifra! om du ser noe mere, så bare si ifra!
Men jeg lurer på en ting? Har jeg lov til å endre designet, så lenge det står at du har laget det?
Tusen takk for at du lager å utrolig fine gratis design!
Bruker det jeg! =D
I love it <3
ja, selvfølgelig har du lov til det! du kan endre på så MYE du vil, men ikke ta bort at jeg har laget det :-)
bare hyggelig!
Men jeg leste lengre oppe at det kom til å bli problemer vis vi tar vekk "bevisene" på at det er et av dine gratis design, så lurte jeg på hva problemene blir? Anmelder du dem, eller noe sånn? :-)
ja, om jeg oppdager noen som misbruker de så skriver jeg først en beskjed, og holder litt øye med bloggen i noen dager sånn at han/henne skal få sjans til og skrive at jeg har laga det, eller fjerne det. visst dem ikke gjør det, blir dem anmeldt/rapportert til blogg.no.
bare hyggelig om du vil svare på min blogg (:
Men når jeg har endret bilde og tekst på bloggen, kommer enda det forje bilde og teksten '' her kan du skrive om deg selv ..osv '' ? Jeg prøvde å leite meg frem til å endre det, men får ikke til :s
Men når jeg endret slik at jeg fikk plass til hele headeren, så såg det litt rart ut fordi sidemenyen kom lenger ned på siden... Er det mulig å endre det?
Kjempe fine design du har altså ! :D
Skal jeg lime inn de kodene i alle!? Siden det er en egen for innlegg.
La ikke merke til at jeg sjekka den nye bloggen min, så jeg endra på den gamle. ahaha :L
Får det ikke til.. :\
Tror du att den här designen fungerar på blogg.se ? de svenska alltså :p
kram!
deseine var kjempe fint !!
elsker dine design, men er ikke noe flink på å fikse det.... hvis jeg ga deg passordet mitt på bloggen kunne du da fikse det?????? ikke post kommentaren please :)
tusen takk
Hele bloggen, innhold eller hvert innlegg
Elsker designet ditt! :)
Bruker designet. :)
Arkiv