Not seeing a Scrolla upp till toppen? Go to our FAQ page for more info.

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!


HTML-koder

 

Ibland kan det vara nödvändigt att ändra koderna i dina kodmallar. Du kanske vill ändra färg på texten i din meny eller fetstila en länk. Här nedan visar jag några HTML-koder som kan vara bra att använda.

» Ändra färg på texten:
<font color="#färgkod">Text här</font>


» Ändra storlek på texten:
<font size="siffra mellan 1-6">Text här</font>

(1 är minst, 6 är störst)


» Ändra typsnitt på texten:
<font face="namn på typsnittet">Text här</font>


» Text med fetstil:
<b>Text här</b>

eller

<strong>Text här</strong>


» Kursiv text:
<i>Text här</i>

eller

<em>Text här</rm>


» Understrucken text:
<s>Text här</s>

eller

<u>Text här</u>


» Genomstrucken text:
<strike>Text här</strike>


» Bild:
<img src="http://bildlänk">


» Textlänk:
<a href="http://länken">Text här</a>


» Bildlänk:
<a href="http://länken"><img src="http://bildlänk"></a>


» Länk till mail:
<a href="mailto:Din mailadress här">Text här</a>


» Ändra färg på enskild länk:
<a href="http://länken" style="color: #färgkod">Text här</a>


» Öpnna länk i nytt fönster:
<a href="http://länken" target="_blank">Din text</a>


» Radbyte:
<br>

eller
<br />


» Centrera text:
<div align="center">Text här</div>

eller

<center>


» Högerjustera text:
<div align="right">Text här</div>


» Vänsterjustera text:
<div align="left">Text här</div>


» Mellanrum:
&nbsp;


Ändra utseendet på sökrutan

För att ändra utseendet behöver du redigera i både stilmallen och kodmallarna.
Klicka på kugghjulet uppe i menyn när du är inloggad på blogg.se, välj sedan "Design" och därefter "Redigera stilmall" och "Redigera kodmallar". Stilmallarna och kodmallarna ser olika ut beroende på vilket tema du använder, guiden här nedan visas med temat "Author".

<form action="http://www.google.se/search" name="search" method="get">
<input type="text" name="q" value="" size="12" maxlength="64" />
<input type="hidden" name="sitesearch" value="{{ blog.absolute_url }}" />
<input type="submit" value="Sök" />
</form>

Här ovan ser du hur koden för sökfunktionen ser ut. Den finns i alla dina kodmallar, oftast under "<div id="side">", som med andra ord är menyn.

För att ändra utseendet på sökfunktionen behöver vi lägga till koder i koden för sökfunktionen. Koderna vi ska lägga till är dessa:

KOD 1


KOD 2


Här nedan visar jag var koderna ska sättas in, och det är alltså så koden ska se ut i kodmallen när det är klart.

<form action="http://www.google.se/search" name="search" method="get">
<input class="sokarean" type="text" name="q" value="" size="12" maxlength="64" />
<input type="hidden" name="sitesearch" value="{{ blog.absolute_url }}" />
<input type="submit" class="sokknappen" value="Sök" />
</form>

Spara sedan kodmallen och gör samma sak i de andra. Gå sedan in på din stilmall.

Klistra in denna kod längst ner i stilmallen:


Koden du klistrade in i stilmallen är den som styr utseendet på knapparna. Förhandsgranska och spara när du är nöjd.

Centrera din blogg eller flytta den till höger/vänster

 
För att ändra positionen på din blogg går du in på stilmallen.
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".


Det är det lila-markerade stycket vi ska redigera när vi vill ändra bakgrunden för bloggen, nämligen "wrappern". I wrappern finns hela din blogg, vill säga content (inläggsrutan), side (menyn) och header (sidhuvudet).

Det finns lite olika sätt att centrera din blogg, men jag rekommenderar er att använda koden här över. Den har fungerat bäst för mig alla gånger beroende på vilken stillmall jag använt. Jag anväder dock oftast "Author" när jag designar på Blogg.se.

Men, man kan även ta bort margin: 0 auto 20px auto; och sätta dit float: center;. Om du sedan istället vill ha din blogg till höger/vänster ändrar du antingen till float: left; (till vänster) eller float: right; (till höger).

Ändra din bakgrund till en bild eller annan färg

För att ändra bakgrunden på din blogg går du in på stilmallen.
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".
 
Det är det lila-markerade stycket vi ska redigera när vi vill ändra bakgrunden för bloggen.
Du lägger istället till "background: url(http://länktillbilden) repeat-y;" för "background: #fff;".

Koden ska alltså se ut såhär när du är klar:

body {
background: url(http://länktillbilden) repeat-y;
}

Repeat-y betyder att bilden upprepas neråt. Du kan ändra detta till antingen repeat-x, då de upprepas i sidled, (åt höger), no-repeat, då den inte upprepas alls eller fixed, vilket innebär att bakgrunden är fast.

Om du istället bara vill ändra färg på bloggen så byter du ut #fff; vid background till en annan färgkod. #ccc för ljusgrå eller #000 för svart, exempelvis. Då ska koden se ut såhär istället:

body {
background: #ccc;
}

Om du inte kan din färgkod i huvudet så ta gärna hjälp utav en färgkarta. Här har du en.

Välkommen till min nya blogg!

Mitt första inlägg.