Om man inte kan bestämma sig för vilken header man vill ha, så går det faktiskt att göra som så att man använder flera olika headers, som det skiftar mellan när man uppdaterar sidan.

Om du vill se hur jag menar, så klicka här: [Flera headers]

Tryck på F5 för att uppdatera sidan så att en ny header visas.

Det är inte så svårt att göra detta faktiskt. Jag ska förklara.

1. Börja med att skapa dina headers och ladda upp den på din blogg. Spara adressen till samtliga bilder i t ex ett textdokument på datorn så länge.

2. Gå nu in i din stilmall, för nu måste du ta bort lite kod.

3. Leta upp början av koden till din header, den ser ut så här:

#header{

eller

div#header{

Om du har en kod där under som heter background, så skall du ta bort hela den koden:

Passa även på att ställa in höjden på din header, den ska vara lika hög som dina bilder är höga.
Det gör du genom att skriva t ex:
height: 150px;

4. Spara nu din stilmall och gå in på kodmallar.
bloggdesign designa din blogg ändra namn på länkar

5. Leta nu upp följande kodrader:
<div id="header">
  <h1><a href="${BlogUrl}">${BlogTitle}</a></h1>
  <h2>${BlogDescription}</h2>
 </div>

6. Ersätt de två raderna i mitten med koden i rutan nedan:

<script language="JavaScript"><!--

//store the quotations in arrays

images = new Array(3);

images[0] = "<img src='adressen till bild 1'>";

images[1] = "<img src='adressen till bild 2'>";

images[2] = "<img src='adressen till bild 3'>";

index = Math.floor(Math.random() * images.length);

document.write(images[index]);

//done

// --></script>

7. Nu ska du fylla i adressen för dina bilder, samt ställa in hur många bilder som du ska ha.

images = new Array(3); <—– Ändra siffran till det antal bilder du har

images[0] = "<img src=’adressen till bild 1 här‘>";

images[1] = "<img src=’adressen till bild 2 här‘>";

images[2] = "<img src=’adressen till bild 3 här‘>";

index = Math.floor(Math.random() * images.length);

Om du ska ha fler än 3 bilder, så lägger du till ytterligare en rad där du skriver adress till en bild. Då ska det se ut så här:

images = new Array(4); <—– Ändra siffran till det antal bilder du har

images[0] = "<img src=’adressen till bild 1 här‘>";

images[1] = "<img src=’adressen till bild 2 här‘>";

images[2] = "<img src=’adressen till bild 3 här‘>";

images[3] = "<img src=’adressen till bild 4 här‘>"; <——- Den raden lägger du till

index = Math.floor(Math.random() * images.length);

Tänk på att det ska öka med ett (1) i images[X] för varje rad du lägger till.

Spara nu din kodmall.

8. Ändra till nästa kodmall, och gör exakt samma sak i de andra tre kodmallarna.

Spara alla dina kodmallar innan du går vidare.

9. Om du har problem med att få dina bilder i mitten av utrymmet, så måste du lägga till en kodrad i din stilmall under #header. Lägg till denna kodrad då:

text-align: center;

Nu är det bara finliret kvar, nämligen att ställa in margin och padding, och hur det fungerar, det hittar du här: Margin & padding

Om Lari

Lari Salminen har skrivit 877 inlägg.

Grundare av Designa Din Blogg. Jobbar heltid som brandman på Medelpads Räddningstjänstförbund och driver den här sidan på fritiden som en hobby.