Bildspel i headern

Det första du ska göra är att ta reda på hur bred din header är.
Klicka på kugghjulet uppe i menyn när du är inloggad på blogg.se, välj sedan "Design" och därefter "Redigera stilmall". Stilmallarna ser olika ut beroende på vilket tema du använder, guiden här nedan visas med temat "Author".

Koden du letar efter ska likna denna:

div#header {
float: left;
clear: left;
display: inline;
border-bottom: 1px solid #ddd;
width: 710px;
}


Och det är det rödmarkerade här som talar om hur bred din header är i pixlar. Här ovan står det att min header är 710 pixlar. I vissa av era koder kan det även finnas en kod som denna, padding: 0 20px 20px 20px;, i #headerstycket. Jag rekommenderar er att ta bort den, så att du får kan arbeta fullt ut med headern i redigeringsprogrammet och inte anpassa dig till avstånd. Här kan du läsa mer om margin och padding.

För att vara säker på att man får exakt rätt bredd brukar jag alltid printscreena min skärm och sedan klistra in i Photoshop, och därefter markera hela headern och beskära bilden - då vet jag 100% säkert att bilden jag har framför mig i Photoshop är lika hög och bred som headern på bloggen.

Det som är jätteviktigt när du gör dina bilder är att se till att alla är lika breda och lika höga. Annars blir det fel och bilderna i bildspelet kommer "hoppa".

1. Så, steg ett är alltså att ta reda på hur bred din blogg är, och sedan se till att bilderna du ska göra i valfritt redigeringsprogram är lika bred som headern.

2. Nu ska du göra dina bilder. De kan se ut precis hur du vill, och vara hur många du vill - så länge de alla har samma storlek. Se sedan till att spara alla dina bilder på samma ställe i en mapp på datorn så du har lätt att hitta dem. Ladda upp bilderna på bloggen eller annan sida där du kan få tag på direktlänken till bilden. Kopiera direktlänken till alla bilderna i ett dokument på datorn så länge.

3. Sedan ska du lägga in tre olika koder. Den första koden här nedan ska in i stilmallen.

#EmilyPictureBackground {
float: left;
margin-left: 0px;
margin-top: 0px;
}

4. Gå in på dina kodmallar och lägg in kod nummer två här nedan innaför </head> i alla dina kodmallar.




5. Sedan ska du lägga till den tredje och sista koden, också i dina kodmallar. Eftersom du vill ha bildspelet i din header lägger du koden innanför <div id="header"> koden </div>

<div id="EmilyPictureBackground">
<img alt="slide show" src="bild 1" width="bredd" height="höjd" id="EmilyPicture">
</div>
<script type="text/javascript">
RunSlideShow("EmilyPicture","EmilyPictureBackground",
"bild 1;bild 2;bild 3",5);
</script>

6. Nu ska vi ändra en del i den sista koden vi la till. Ta fram dokumentet med dina bildlänkar och klistra in den bilden du vill ska synas först där det står "bild1" i koden. Där det står "bredd" och "höjd" fyller du i antalet pixlar bilden har. Om bilden är 700 pixlar bred och 350 pixlar hög, så ska koden se ut såhär:

<div id="EmilyPictureBackground">
<img alt="slide show" src="http://bildlänk" width="700" height="350" id="EmilyPicture">
</div>
<script type="text/javascript">
RunSlideShow("EmilyPicture","EmilyPictureBackground",
"bild 1;bild 2;bild 3",5);
</script>

Sedan ska du klistra in den första bildlänken igen, där det står "bild 1". Och därefter klistrar du in bildlänk 2 där det står "bild 2" i koden och bildlänk 3 där det står "bild 3".

Alla bilderna du vill använda ska alltså ligga mellan " " och det ska vara ett ; mellan varje bild, utom den sista.

Såhär ska koden se ut när du är färdig, fast med dina bildlänkar.

<div id="EmilyPictureBackground">
<img alt="slide show" src="http://cdn1.cdnme.se/4260678/6-3/1_5.jpg" width="700"
height="350" id="EmilyPicture">
</div>
<script type="text/javascript">
RunSlideShow("EmilyPicture","EmilyPictureBackground",
"http://cdn1.cdnme.se/4260678/6-3/1_5.jpg;bild 2;http://cdn1.cdnme.se/4260678/6
3/1_52;http://cdn1.cdnme.se/4260678/6-3/1_5.jpg",5);
</script>

7. Gör detta i alla kodmallar, spara dem och kolla in bildspelet i din header!



Om du vill ändra hastigheten mellan bilderna, så ändrar du siffran 5:

<div id="EmilyPictureBackground">
<img alt="slide show" src="http://bildlänk" width="700" height="350" id="EmilyPicture">
</div>
<script type="text/javascript">RunSlideShow("EmilyPicture","EmilyPictureBackground",
"bild 1;bild 2;bild 3",5);
</script>

Siffran 1 gör att det tar lång tid mellan övergången, och siffran 9 gör att det går snabbt.


Lämna en kommetar om det skulle vara något!



Kommentera inlägget här:

Namn:
Kom ihåg mig?

E-postadress: (publiceras ej)

URL/Bloggadress:

Kommentar:

Trackback