.image {
border: 0px solid #CCCCCC;
background-color:#FFFFFF;
padding:0px;
margin: 0px 0px 0px 0px;
}

Nu ska jag visa er hur ni delar upp eran meny i boxar och hur man gör skugga eller en kant runt. Lycka till! :)

---

(1). Om du startar från mallen "fashion" så tycker jag du borde göra den HÄR saken först. (alltså en helt ny design)

1. Gå till din stilmall och klistra in den här koden under #side { (som på bilden) :
#box {
width: 200px;
padding: 0px 0px 0px 0px;
background: #FFFFFF;
}

2. Gå till dina kodmallar, nu ska du göra så själva boxarna. Och då gör du så att du sätter <div id="box"> i början av din box, sen slutar du boxen med </div></br> Såhär kan det se ut :

3. Gör såhär i alla 4 kodmallar. Sen är det bar att spara och se hur det ser ut.

(4). Om du vill kan du göra skugga/kant runt om varje box. Då går du tillbaka till stilmallen och lägger in de här koderna i box-koden.
Skugga:
-moz-box-shadow:0px 0px 7px #000;
box-shadow: 0px 0px 7px #000;
Kant:
border: 1px #000 solid;

Såhär kan det se ut:

Nu så ska jag visa hur jag gjort mitt bildspel i min header. Jag hoppas ni kommer fatta min beskrivning. Om det krånglar kan det bero på att ni inte utgår från samma stilmall som mig eller att ni bara gjort fel. Jag utgår i alla fall från stilmallen "fashion".

Lycka till! <3 :)

---

1. Gå till "design" sen "kodmallar"

2. Klistra in den här koden just ovanför </head>

<script type="text/javascript">

// Browser Slide-Show script. With image cross fade effect for those browsers

// that support it.

// Script copyright (C) 2004-2011 www.cryer.co.uk.

// Script is free to use provided this copyright header is included.

var FadeDurationMS=1000;

function SetOpacity(object,opacityPct)

{

// IE.

object.style.filter = 'alpha(opacity=' + opacityPct + ')';

// Old mozilla and firefox

object.style.MozOpacity = opacityPct/100;

// Everything else.

object.style.opacity = opacityPct/100;

}

function ChangeOpacity(id,msDuration,msStart,fromO,toO)

{

var element=document.getElementById(id);

var msNow = (new Date()).getTime();

var opacity = fromO + (toO - fromO) * (msNow - msStart) / msDuration;

if (opacity>=100)

{

SetOpacity(element,100);

element.timer = undefined;

}

else if (opacity<=0)

{

SetOpacity(element,0);

element.timer = undefined;

}

else

{

SetOpacity(element,opacity);

element.timer = window.setTimeout("ChangeOpacity('" + id + "'," + msDuration + "," + msStart + "," + fromO + "," + toO + ")",10);

}

}

function FadeInImage(foregroundID,newImage,backgroundID)

{

var foreground=document.getElementById(foregroundID);

if (foreground.timer) window.clearTimeout(foreground.timer);

if (backgroundID)

{

var background=document.getElementById(backgroundID);

if (background)

{

if (background.src)

{

foreground.src = background.src;

SetOpacity(foreground,100);

}

background.src = newImage;

background.style.backgroundImage = 'url(' + newImage + ')';

background.style.backgroundRepeat = 'no-repeat';

var startMS = (new Date()).getTime();

foreground.timer = window.setTimeout("ChangeOpacity('" + foregroundID + "'," + FadeDurationMS + "," + startMS + ",100,0)",10);

}

} else {

foreground.src = newImage;

}

}

var slideCache = new Array();

function RunSlideShow(pictureID,backgroundID,imageFiles,displaySecs)

{

var imageSeparator = imageFiles.indexOf(";");

var nextImage = imageFiles.substring(0,imageSeparator);

if (slideCache[nextImage] && slideCache[nextImage].loaded)

{

FadeInImage(pictureID,nextImage,backgroundID);

var futureImages = imageFiles.substring(imageSeparator+1,imageFiles.length)

+ ';' + nextImage;

setTimeout("RunSlideShow('"+pictureID+"','"+backgroundID+"','"+futureImages+"',"+displaySecs+")",

displaySecs*1000);

// Identify the next image to cache.

imageSeparator = futureImages.indexOf(";");

nextImage = futureImages.substring(0,imageSeparator);

} else {

setTimeout("RunSlideShow('"+pictureID+"','"+backgroundID+"','"+imageFiles+"',"+displaySecs+")",

250);

}

// Cache the next image to improve performance.

if (slideCache[nextImage] == null)

{

slideCache[nextImage] = new Image;

slideCache[nextImage].loaded = false;

slideCache[nextImage].onload = function(){this.loaded=true};

slideCache[nextImage].src = nextImage;

}

}

</script><head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>



<script src="fadeslideshow.js">



/***********************************************

* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)

* This notice MUST stay intact for legal use

* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more

***********************************************/

<script>var slide1foldername='';</script><script charset="utf-8" src="slide1.js"></script>

</script>



<script>



var mygallery=new fadeSlideShow({

wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow

dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image

imagearray: [

["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],

["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],

["http://i30.tinypic.com/531q3n.jpg"],

["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!

],

displaymode: {type:'auto', pause:500, cycles:0, wraparound:false},

persist: false, //remember last viewed slide and recall within same session?

fadeduration: 500, //transition duration (milliseconds)

descreveal: "ondemand",

togglerid: ""

})





var mygallery2=new fadeSlideShow({

wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow

dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image

imagearray: [

["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],

["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],

["http://i30.tinypic.com/531q3n.jpg"],

["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!

],

displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false},

persist: false, //remember last viewed slide and recall within same session?

fadeduration: 500, //transition duration (milliseconds)

descreveal: "always",

togglerid: "fadeshow2toggler"

})



</script>

---

3. Leta upp <div id="header"> och gör som bilden säger:


4. Nu ska du kopiera den här koden och klistra in den just under <div id="header">
<div id="EmilyPictureBackground">
<img src="FÖRSTA BILDEN" width="BREDDEN" height="HÖJDEN" id="EmilyPicture">
</div>
<script type="text/javascript">
RunSlideShow("EmilyPicture","EmilyPictureBackground",
"FÖRSTA BILDEN;ANDRA BILDEN; TREDJE BILDEN, FJÄRDE BILDEN",5);
</script>

---

5. Nu kan du spara, sen ladda upp alla bilder du ska ha i ditt bildspel. Kopiera koderna till varje bild sen klistrar du in dom i den lilla koden, såhär kan det se ut när du är klar:



6. Efter varje bild så är det en ; och så ska det vara förutom efter sista bilden där det ska vara ",5
Så om du vill ha fler bilder är det bara att skriva efter sista bilden ett ; och sen bild kod

7. Nu kan du göra såhär i alla kodmallar, sen är du klar.

Många av er har frågat angående just denna grej. Så här kommer tipset! Hoppas ni tycker om det, och fattar hur man ska göra. Har ni något mer ni skulle vilja lära er, så skicka gärna en kommentar! :)

PS: Om det inte funkar för er, kan jag tyvärr inte hjälpa er.

---

1. Om du startar från en helt "ny" design så borde du börja med att göra det här.

2. Öppna ditt photoshop/gimp och gör en bild som är 400x400.

3. Gör hela bilden vit, sen drar du ner opacity/genomskinlighet till 30-50 något sånt.

4. Spara bilden i dittnamn.png



5. Nu kan du ladda upp din bild på bloggen, ladda upp den i 1000px.

6. Nu ska du ta den hära koden:

background: transparent url(HÄR SKA DU LÄGGA IN DIN BILDKOD);

7. Den koden ska du lägga in längst ner i #wrapper { koden, så här ska det se ut:

8. Om du vill justera hur stor kanten ska vara så kan du ändra:

#wrapper {
clear:none;
margin: 30px auto;
padding: 20px; <-- Där kan du ändra hur stor kanten ska vara, desto större tal, desto större kant.
width: 830px;
background: transparent url(HÄR SKA DU LÄGGA IN DIN BILDKOD);
}

9. Nu är det bara att spara! :)

Klicka HÄR för att läsa hur man gör.

Kommer att börja länka till tips. Istället för att jag ska göra egna. Det var i alla fall där jag lärde mig hur man gör. Hoppas ni också förstår.

---

1. Gå till "Design" sen "Redigera Stilmall".

2. Leta upp den här koden:

text-shadow: 0px 0px 6px #000;

4. Nu är det bara att fixa hur du vill ha din skugga.

text-shadow: 0px 0px 6px #000;

0px 0px = Om du höjer talet på dom här så kommer skuggan vara från sidan.

6px = Hur mycket skugga det ska vara. Desto högre tal mer skugga.

#000; = Vilken färg du vill ha på skuggan.

 

5. Nu kan du spara och kolla om det blev bra! (: KLAR!

---

Om det är något du undrar om är det bara att slänga in en kommentar! (:

 

1. Först ska du gå till "design" sen "redigera stilmall".

2. Skrolla tills du är längst ner i stilmallen. Då ska du klistra in den här koden (och spara):
#datum {
font-family:  Arial;
font-size: 14px;
color: #000;
padding: 15px 5px 3px 5px;
margin: 0px 10px 0px;
text-align: right;
}
3. Nu ska vi gå till "kodmallar". Sen så skrollar du ner till den här koden och gör som bilde säger.

4. Nu ska du sätta koder på vardera sida om själva "datum och tid" koden. Såhär ska det se ut. Koden :

<div id="datum"> ${EntryDate} @ ${EntryTime}</div>

5. Nu kan du spara och kolla om det blev bra. Du kan också gå tillbaka till din stilmall och ändra textstil och sånt:

#datum {
font-family:  Arial; <<Ändra textstil
font-size: 14px; <<Ändra storlek på texten
color: #000; <<Ändra färg på texten
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px;
text-align: right; <<Ändra på vilken sida datum och tid ska vara på. left, center, right
}

6. Nu är du klar. Om du vill ha det extra snyggt så kan du gå tillbaka till kodmallen och leta upp koden:

<div id="datum"> ${EntryDate} @ ${EntryTime}</div>

Ta bort @ och sätt dit ett snestreck eller något du tycker passar.

---

Hoppas ni fick hjälp av det här! (: Tånting annat ni vill lära er? Skriv en kommentar!

1. Gå till "Design" sen "Redigera Stilmall".

2. Nu ska du klistra in den här koden: text-decoration:none; Klistra in den på samma ställe som på bilden.

1. Skapa dina kategorier. ("blogg" , "kategorier" sen "skapa kategori")

2. Gör ett inlägg till alla din kategorier som du gjort.

3. Nu ska du öppna din blogg. Sen ska du klicka på dina kategorier och kopiera koden.

Fick ett mail från en tjej som undrade hur man delar upp menyn i boxar. Så jag tänkte visa hur jag brukar göra.

---

1. gå till "design" sen "redigera stilmall".

2. gör som bilden säger...

3. gör dom bilden säger...

background: #fff;

4. Kolla så att menyn är uppdelad, sen är det bara att fixa till den så den sitter där man vill ha den. (:

---

Hoppas ni förstår, fråga om det är något som blev tokigt.