Här kan du läsa hur man gör.

för att gra en header behöver du ett redigersprogram tex gimp(gratis) eller photoshop. Du gör till en början en bild och sedan laddar upp bilden på bloggen. Du kan själv välja vilken storlek du ska ha på headern i programet.

#2 ahaa… jag försökte att bara ladda upp en bild i bloggen, spara adressen och klippa in….

äh… jag klarar inte av det tydligen… fniss… jag lägger ner hela projektet

Ja visst går det. Jag har gjort min.

Var fastnar du?

ok, jag har lyckats installera Gimp, laddat ner en bild där… och sen är det som att jag inte får det längre…. provar ladda upp bilden på bloggen, och jo det går ju.. men klistra in i stilmall? inom vilka paranteser?

Vad har du sparat i för filformat? har du sparat i jpg format? du kan som sagt lägga in en bild från någon sida det är bara att du kopierar adressen från sidan. Koden ska läggas in i stilmallen under #header { koden. Då skriver du alltså background: url(bildadressen);

Känns det något klarare?

#7 tycks ju göra precis så… men det händer inget

hm.. du har inte glömt något tecken?

jag vet inte ens om jag är på rätt ställe och skriver, eller om jag har gjort rätt. Eller,att jag inte har gjort rätt fattar jag ju, annars skulle det ju BLIVIT rätt… hahahaha

body {
margin: 0px;
padding:0px;
background: #fff;
}

a {color: #809FFF;}
a:hover {color: #80FF9F;}

#wrapper {
clear:none;
height: 1%;
}

p {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}

#header {background:http:url(fk1 044)
padding-left: 30px;
padding-bottom:5px;
padding-top:20px;
margin: 0px;
border-bottom:1px dashed #000;
}

#side {
width: 20%;
margin-top: 50px;
margin-left: 10px;
margin-bottom:10px;
padding: 24px 12px 0px 12px;
background: transparent;
}

#content { 
width: 55%;
float: right;
background: transparent;
margin-top:50px;
margin-right:5%;
padding: 20px;
voice-family:"\"}\"";
voice-family:inherit;
width:55%;  
}html>body #content { width: 55%; }

#header a { color: #000; text-decoration: none; }

h1 {
font-family: arial, verdana, sans-serif;
font-size: 1em;
font-weight: bold;
color: #000;
text-transform:uppercase;
}

h2 {
font-family: arial, verdana, sans-serif;
font-size: .7em;
font-weight: normal;
color: #333;
}

/** Entry headers **/
h3 {
background: #9FFF80;
font-family: arial, verdana, sans-serif;
font-size: .8em;
font-weight: bold;
padding:4px;
color: #000;
margin: 0px 0px 10px 0px; 
text-transform:uppercase;
}

.navheader {
font-family:  Arial, Helvetica, Sans-serif;
font-size: 1em;
font-weight: bold;
color: #fff;
padding:5px;
margin-bottom:5px;
background-color:#809FFF;
text-transform: uppercase;
}

.nav {
font-family: verdana, Arial, Helvetica, Sans-serif;
font-size: .7em;
font-weight: bold;
}

.nav ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 6px 0px;
font-weight: normal; 
}

.nav li {
list-style: none;
padding: 0px 0px 6px 0px;
font-weight: normal; 
}

.nav a { color: #809FFF; }
.nav a:hover { color: #80FF9F; }

/** Post's body text **/
.entrybody {
font-family: verdana, arial, helvetica, sans-serif;
font-size: .7em;
font-weight: normal;
color: #000000;
line-height: 150%;
margin: 0px 0px 10px 0px
}

/** 'Posted by' txt **/
.entrymeta {
font-family: verdana, arial, sans-serif;
font-size: .65em;
font-weight: normal;
color: #666;
text-align:right;
}

.entrymeta a { color: #809FFF; }
.entrymeta a:hover { color: #80FF9F; }

.commentheader {
font-family:  arial, helvetica, sans-serif;
font-size: .70em;
font-weight: bold;
background-color:#809FFF;
padding:5px;
color: #fff;
}

.commenttext {
font-family: verdana, arial, sans-serif;
font-size: .70em;
font-weight: normal;
color: #000;
line-height: 130%;
}

.commentmeta {
font-family: verdana, arial, sans-serif;
font-size: .65em;
font-weight: normal;
color: #999;
margin: 10px 0px 20px 0px
}

.commentmeta a { color: #809FFF; }
.commentmeta a:hover { color: #80FF9F; }

.commentform {
font-family: verdana, arial, sans-serif;
font-size: .70em;
font-weight: normal;
color: #333333;
margin: 0px 0px 20px 0px
}

.separator {
border-top: 1px dashed #4271FF;
border-bottom: 0px solid #CED2C8;
margin: 14px 0px 14px 0px
}

.default {
font-family: Arial, Helvetica, Sans-serif;
font-size: 11px;
color: #333;
font-weight: bold;
padding: 0px 0px 10px 0px;
text-transform: uppercase;
}

.subside {
font-family: "Trebuchet MS" Verdana, Arial, Helvetica, Sans-serif;
font-size: .7em;
font-weight: normal;
padding: 0px 0px 0px 0px;
}

.xmlButton {
border:1px solid;
border-color:#FC9 #630 #330 #F96;
padding:0 3px;
font:bold 10px Verdana, Arial, Helvetica, Sans-serif;
color:#FFF;
background:#F60;
text-decoration:none;
margin:0;
}

.image {
border: 1px dashed #ffc105;
background-color:#FFD042;
padding:5px;
margin: 0px 6px 6px 0px;
}

.thumbnail {
border: 1px dashed #ffc105;
background-color:#FFD042;
padding:5px;
margin: 0px 6px 6px 0px;
}

.video{
padding: 0px 0px 0px 0px;
}

.fieldName{
font-family: verdana, arial, sans-serif;
font-size: 11px;
margin: 0px 0px 12px 0px
}

select{
font-family: verdana, arial, sans-serif;
font-size: 11px;
}

/*****************************************************************************
* Calendar                                                      *
*****************************************************************************/

#calendar {
color: #333333;
font-family: 'Trebuchet MS', Verdana, sans-serif;
 padding: 0px 0px 6px 0px;
text-align: left;
}

#calendar table {
padding: 1px;
/*border-collapse: collapse;*/
border: 0px;
}

#calendar table caption {
color: #777;
font-family : Arial, Helvetica, Sans-serif;
font-size : 0.7em;
border-bottom: 1px solid #999999;
text-align: left;
font-weight: bold;
text-transform: uppercase;
padding: 3px;
letter-spacing: .3em;
}

#calendar table th {
text-align: center;
font-weight: bold;
font-size: xx-small;
}

#calendar table tr td {
border: 1px solid #809FFF;
text-align: center;
font-size: xx-small;
}

#calendar table tr ul  {
color: #BBB;
list-style: dot;
margin: 0px 0px 0px 20px;
padding: 4 0 5 0;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 0.7em; 
}

#calendar table tr td.cssDayMouseOver {
border: 1px dotted red;
cursor: hand;
}

#calendar table tr td.cssDayMouseOut {
border: 1px solid #809FFF;
}

#calendar table tr td.cssEntryBox {
border: 1px solid gray;
padding: 6px;
text-align: left;
background: #FFFFFF;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 0.8em;
}

#calendar table tr td ul li {
}

#calendar table tr td div.cssDayEntryHeader {
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 0.8em;
text-align: left;
font-weight: bold;
padding: 4;
}

#calendar table tr td div.cssDayAvailable {
text-decoration: underline;
text-weight: bold;
}

#profile {
font-family: verdana, Arial, Helvetica, Sans-serif;
font-size : 0.7em;
margin-bottom: 10px;
}

#profile h4{
font-family:  Arial, Helvetica, Sans-serif;
font-size: 1em;
font-weight: bold;
color: #fff;
background-color:#809FFF;
text-transform: uppercase;
padding:5px;
margin: 0px 0px 6px 0px;
}

#profile p{
}

Testa att sätta in det här:

#header {
background: #ffffff url(DIN LÄNK) no-repeat right top;
padding-left: 30px;
padding-bottom:5px;
padding-top:20px;
margin: 0px;
border-bottom:1px dashed #000;
}

Du kan behöva ändra på siffrorna.

I vilken storlek har du laddatupp bilden?

Såg att du hade skrivit fel i din kod "background:http:url(fk1 044)" det ska ska background: url(http://adressen) så skriv om den koden och se om det fungerar. Kolla även vad du har för storlek på din bild.

#13 Det är oftast sånt som är felet, så bra att du såg det! =)

Kollade igenom lite fort så hade tur att jag såg det :) Hoppas att det ska fungera nu bara annars kan det vara fel på länken eller storleken på bilden. Men oftast kan man ju se bilden ändå.

Kom på att hon även bör tänka på vilken höjd hedaern har annars syns inte bilden. Höjden ändrar du vid koden height: 0px; där det står noll ändrar du bara till vilken höjd som passar din header.

Å gud va jag provar, jobbar, provar….

#15 jag hittar inte height

#16 Du får du sätta in, height: 0px;

ÅÅHHH…… nä, jag blir vansinnig… måste nog ta hit någon som handgripligen fixar det, för jag blir bara snurrig, men tack alla för att ni försökt hjälpa mig :)

haha! vad förstår du inte? :) kan försöka att förklara på ett annat sätt.

#19   fniss…. du, det är egentligen inte mycket jag förstår…   det är lite av hireoglyfer för mig…    hihihi

#20 haha, bara att fråga på så hjälper jag dig :)

Jag har själv köpt min design, så jag vet vad du menar TS. I början var jag helt lost på koder. Men jag har faktiskt lärt mig mer och mer efter hand. :)

Jag ska på allvar försöka förstå allt det här ni försökt lära mig, senare ikväll. Snart ska jag på hundkurs, sen har jag zumba… men efter det ska jag sätta mig och klura :)

Tack igen för hjälpen!

byt tilll stilmallen fashion innan du försöker med headen är mitt tips, i den stillmallen behöver man inte lägga till några koden….

#24  Åhh, tack för tipset :)

Vilket format är headern sparad i? :) PNG,JPG o.s.v

ok. Nu har jag bytt till fashion … ser bra ut så långt. Nu skulle jag bara vilja byta de foton som ligger i headern, till mina egna foton.

#25 och 27

http://www.designadinblogg.se/lagg-till-en-egen-bild-som-header/

kola länken det var där jag lärde mej

ÅÅHHHH…. nä…. gu va jag känner mig trög. Jag tycker ju att jag gör allt rätt… men det kommer inte upp någon bild . Det enda som hänt nu, är att de befintliga bilderna i stilmallen fashion, är borta….

#29 Testa att ta bort det jag skrev i #11 i din stilmall & sätt in:

#header {
background: #ffffff url(LÄNK TILL DIN HEADER) no-repeat right top;
padding-left: 90px;
padding-bottom:14px;
padding-top:30px;
margin: 0px;
width: 810px;
height: 410px;
}

Då kan jag lova att det kommer synas en bild, men du lär behöva ändra siffrorna, då det där är så det passar i min blogg.

Nä…. fortfarande ingen bild

#31 Men tar du adressen till bilden då? Kan du ju nästan inte göra.

japp, jag laddar upp bilden i bloggen och kopierar adressen

#33 Då vet jag inte vad du gör fel, det ska fungera.

Ja, nåt blir ju bevisligen fel eftersom det inte funkar.

Vad menar du med att jag lär få ändra siffrorna? Vilka siffror, och till vad?

background: #ffffff url(LÄNK TILL DIN HEADER) no-repeat right top;
padding-left: 90px;
padding-bottom:14px;
padding-top:30px;
margin: 0px;
width: 810px;
height: 410px;
}

Siffrorna så headern hamnar rätt. Om du ger mig din stilmall + bilden så kanske jag kan få det att fungera? Har gjort en del designer.

Har börjat förstå lite nu, och har kommit dithän att jag fått ett utrymme som är vitt, men får inte dit bilden. Den kommer inte upp helt enkelt.

#37 Härligt att det går framåt! :)

Lägg upp din kod så får vi se om du har glömt några tecken el dylikt..

#header {
background: #FFFFFF url(http://publishme.se/1595181/images/173013737/) no-repeat right center;
padding-left: 90px;
padding-bottom:14px;
padding-top:30px;
margin: 0px 0px 20px;
width: 810px;
height: 410px;

Ser varför det inte fungerar :) du måste trycka på bilden och sedan kopiera adressen du har inte klickat på bilden. Efter att du har klickat på bilden och kopierat den adressen ska det fungera :)

#40 Precis som #41 skriver så måste du tycka på bilden, sen ska det nog fungera!

YYYYEEEEEEEEEEEEEEEEESSSSSSSSSSSS :) :) :)   Tusen tack!!! Nu kommer nästa fråga: Jag skulle vilja ha in flera bilder bredvid varandra… fniss…. hur fixar jag det i redigeringsprogrammet?

#43 Beror på vilket program du har. I dom flesta är det väl bara att öppna fler bilder…

Jag har Gimp :)   Nu är det ju rent skoj, när man så smått börjat fatta… men bildredigering har jag aldrig någonsin hållit på med, så där får jag nog harva på ett tag innan jag förstår. Så det där med att det "bara" är, är inte så "bara" för mig :) :) men jag ska fanimig lära mig :)

#45 på min Gimp måste man spara i JPG eller PNG om det ska fungera,då den sparar i något annat filformat annat auotomatiskt  :)

#46 ok. så man laddar bara upp en bild till, på samma sätt som den första? och då kläms den in BREDVID den man laddat upp?

Nu förstår jag inte riktigt vad du menar :)

det jag menar är att man måste spara headern/teckningen i ett annat format. T ex: minheader.PNG eller minheader.JPG

Det är bara gå in på teckiningen,klicka på spara som och sen bara ändra formatet :)

#47 Nu har jag inte gimp men jag kan tänka mig att man måste kopiera & klistra in bilden på samma lager?

#48 Varför måste man det? Det spelar väl ingen roll vad den heter?

#49 på mitt Gimp spelar det roll, annars funkar det inte :) Men kanske beror på vilket Gimp man har, den finns ju olika :)

#50 Vilket gimp har du?

#51 Gimp till mac, vet dock inte vad det heter exakt :)

Hmm. Ok… försöker förstå det där med lager….  om jag laddar upp en bild i Gimp…  så mycket klarar jag. Hur ska jag kunna klistra in andra bilder på samma lager, utan att bilderna hamnar på varandra?

#53 Du får göra båda bilderna mindre så dom får plats, eller så klistrar du in bilderna du ska ha på ett tomt blad.

#54 Ok, ska pyssla med det där sen ikväll :)    Tack så mycket för hjälpen!