Galleritva -

Bloggdesign tips

Bildspel i menyn eller headern
Dela upp dina kategorier
Hur stilmallen och kodmallen hänger ihop
Ändra utseende på ett visst ord/mening
Bild i menyn
Tips på en enkel bloggdesign
Länkarna dras isär vid mouseover
Lägg in en egen bild som header
Egen ikon i webbläsaren
Ta bort den vita ramen runt headern
Lägg in Rosa bandet på bloggen
Sträck under rubrikerna i menyn
Bild i kommentarsfältet
Ändra stora bokstäver till små
Fixerad bakgrund (så den ligger stilla när du scrollar ner)
Mouseover bilder
HTML grundkoder
Hur man gör en transparent header
Menyn får samma färg som bakgrunden
Ruta att ha kod/text i, i dina inlägg
Öka bredden på bloggen
Mellanrum mellan menyn och inläggen

Bloggdesign tips från julkalendern 2010

Bilderna visas inte i vissa inlägg och jag har inte kvar dem. Men om det är något ni undrar över kan ni kommentera inlägget eller skicka ett mejl till mig ([email protected]) så ska jag hjälpa er :) Ge gärna förslag på mer tips jag kan visa er också!

2012-01-21 @ 19:11:00 Permalink Allmänt Kommentarer (0) Trackbacks ()

Bildspel i menyn eller headern

Fick ju en fråga i min frågestund innan om jag kunde visa hur man gjorde ett bildspel i menyn t.ex. So here you go!

1. Kopiera denna koden här nedan och lägg in den under </head> i dina kodmallar (framsida, inläggsida, kategorisida och arkivsida).

<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:2500, 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>

2. Sen ska du lägga in koden för själva bildspelet och den lägger du in i dina kodmallar någonstans, beroende på vart du vill ha bildspelet.

Headern: Lägg koden under <div id="wrapper">
Menyn: Lägg koden under <div id="side">

Koden:

<div id="EmilyPictureBackground"> <img alt="slide show" src="ADRESSEN TILL FÖRSTA BILDEN" mce_src="/1032356/entries/article/new/" width="BREDDEN PÅ BILDERNA" height="HÖJDEN PÅ BILDERNA" id="EmilyPicture"> </div>

<script type="text/javascript">

RunSlideShow("EmilyPicture","EmilyPictureBackground",

"ADRESSEN TILL FÖRSTA IGEN;ADRESSEN TILL ANDRA BILDEN;ADRESSEN TILL TREDJE BILDEN;ADRESSEN TILL SISTA BILDEN",5);

</script>

<script type="text/javascript">

RunSlideShow("EmilyPicture","EmilyPictureBackground",

"ADRESSEN TILL FÖRSTA IGEN;ADRESSEN TILL ANDRA BILDEN;ADRESSEN TILL TREDJE BILDEN;ADRESSEN TILL SISTA BILDEN",5);

</script>

3. Nu ska du ladda upp bilderna du vill ha med i bildspelet på din blogg. Kopiera sedan bildadresserna (URL koderna) och lägg in den första bildadressen på tre ställen och sen resten av bilderna (allt står i koden).

Det går att lägga till fler bilder och ta bort, men efter varje adress ska det vara ett ; förutom efter den sista då det ska vara ",5); ja, ni ser i koden! Glöm inte att ändra höjden och bredden på bilderna också!

4. Om headern sitter fel kan du lägga in denna koden:

<div style="position:absolute; width:903px; x-index:0; left: 0px; top:0px;">KODEN HÄR</div>

Ändra width, left och top så att headern passar och lägg in bildspelskoden du kopierade innan där det står "KODEN HÄR"

Om det är något du undrar över så fråga!♥

2012-01-21 @ 19:10:09 Permalink Allmänt Kommentarer (0) Trackbacks ()

Dela upp dina kategorier

<font face="Georgia" size="3" color="#c5b9b3"><b>Personligt</b></font><br>

<a href="http://novalas.blogg.se/category/allmant.html

">Mixed up</a> <br>

<a href="http://novalas.se/category/outfits.html

">Outfit's</a> <br>

<a href="http://novalas.se/category/novala-shoppar.html

">Novala shoppar</a> <br>

<a href="http://novalas.se/category/usa-2011.html

">USA 2011</a><br><br></b>

</ul>

</div>

<a href="http://novalas.blogg.se/category/natur.html

">Natur</a> <br>

<a href="http://novalas.se/category/portratt.html

">Porträtt</a> <br>

<a href="http://novalas.se/category/vatten.html

">Vatten</a> <br>

<a href="http://novalas.se/category/ovrigt.html

">Övrigt</a> <br>

<a href="http://novalas.se/category/dagens-knasbilder-med-molly.html

">Dagens knasbilder med Molly</a><br><br></b>

</ul>

</div>Nu

Nu tänktee jag visa hur man delar in sina kategorier i olika delar så som jag har med rubriker, t.ex. Personligt, Foto o.s.v. Det är rätt komplicerat så man bör ha en viss förkunskap om html kodning! Här finns lite hjälp som kan vara bra att ha!

1. Börja med att skapa alla kategorier du vill ha genom att gå in på Blogg» Kategorier» Ny kategori. Skriv ett ett litet testinlägg i varje kategori så att alla kategorierna syns på din blogg under "Kategorier" i menyn.

2. Nu ska du kopiera denna koden:

<font face="TYPSNITT" size="STORLEK" color="FÄRG">RUBRIK</font><br>

<a href="#">
KATEGORI 1</a> <br>

<a href="#">
KATEGORI 2</a> <br>

<a href="#">
KATEGORI 3</a><br><br>

</ul>

</div>

3. Sedan går du in i dina kodmallar och gör som bilden säger! För att lättare hitta till det stället kan du trycka Ctrl + F och skriva in början på koden som är gråmarkerad.

(Bry er inte om att det står kategorisida längst upp i rullgardinsmenyn på bilden, ni ska först och främst göra detta i framsidan så det är inget ni behöver ändra på!)

4. Gör som bilden säger! Men sen ska du nu ändra koden så att det blir rätt! Förklaring i koden:

Först ändrar du typsnittet, färgen o.s.v på rubriken och skriver er rubrik där det står "RUBRIK" (den kan t.ex. vara personligt). Ändra också namnen på dina kategorier där det står "KATEGORI 1", alltså de kategorierna som kommer hamna under rubriken personligt (eller vad nu er rubrik ska vara).

Om du sen vill ändra färg m.m på dina kategori namn kan du lägga till denna koden efter "</font><br>" och ändra till det du vill ha:

<font face="TYPSNITT" size="STORLEK" color="FÄRG">RUBRIK</font>

5. När du ska skriva in länken till varje kategori så att man kommer rätt, går du in på din blogg och trycker på kategorin du ska skriva länken till. Kopiera sedan hela URL adressen längst upp i webbläsaren (där man skriver www...).

6. Klistra sedan in URL adressen enligt bilden:

Alltså ersätter du # med din URL adress till din länk.

7. Om du vill ha fler underkategorier kopierar du denna koden:

<a href="#">
KATEGORI 4</a> <br>

Om du vill ha "allt en gång till" d.v.s. både rubriker och underkategorier lägger du bara till hela koden du kopierade först igen!

8. Om du först vill ha en rubrik för allt där det står t.ex. Kategorier och dina rubriker och namnen på alla kategorier hamnar under kan du göra så här: Kopiera koden här nedan och sätt in den precis ovanför hela koden som börjar med <font... (alltså den första koden du kopierade).

<div class="navheader">Kategorier</div>

9. Testa att spara kodmallen nu och se hur det ser ut. Om något ser fel ut kan du testa att ta bort det sista </ul> i koden. Om du INTE har använt koden här ovanför (i nummer 8) kan du testa att ta bort </div> också.

Fråga om det är något du inte förstår! Lycka till!♥

2012-01-15 @ 17:47:17 Permalink Allmänt Kommentarer (1) Trackbacks ()

Hur stilmallen och kodmallen hänger ihop

Här kommer ett väldigt bra designtips enligt mig haha ;) Stilmallen och kodmallen hänger ju ihop och jag tänkte visa hur nu. T.ex. kodavsnittet #side i stilmallen har en kod i kodmallen också. Den börjar med <div id="side"> och slutar med </div>. Emellan där finns själva innehållet. Detta är rätt komplicerat så det gäller att man har lite kunskaper om bloggdesign o.s.v. när man gör detta! Enjoy!

1. Själva koden du använder:

Kodmall:
<div id="ditt namn"> INNEHÅLLET HÄR </div>

Stilmall:
#Ditt namn (måste vara samma namn som i kodmallskoden) {
INNEHÅLLET HÄR
}

2. Innehållet kan vara vad som helst. Du kanske till exempel vill göra en till meny på andra sidan. Då kanske namnet blir "Side2". Då kan du ju kopiera din "Side" kod som redan finns i stilmallen och sätta dit där innehållet ska vara. I kodmallen sen så lägger du in det som ska vara i den andra menyn helt enkelt. Kanske en bild, då skriver du bildkoden som vanligt och så kan du skriva en text o.s.v. Lägg sedan hela koden precis innan <div id="side"> till exempel.

3. Om du nu vill göra en till meny måste du ju kunna placera den där du vill. Då använder du denna koden i kodmallen:

<div style="position:absolute; width:903px; x-index:0; left: 100px; top:350px;">DET DU VILL POSITIONERA HÄR</div>

Där du ska sätta in det du vill positionera sätter du helt enkelt in själva <div id="ditt namn"> koden. Så här kan det se ut i kodmallen:

Som ni ser har jag skrivit <ul> innan menyns innehåll och </ul> efter menyns innehåll för att det ska bli en box.

Så här kan det då se ut i stilmallen:

Det spelar ingen roll vart man sätter denna koden, men till exempel längst ner.

4. Det här med en till meny var ju bara ett exempel. Du kan ju göra massa andra saker, till exempel om du har din meny uppdelad i boxar kanske du vill ha skugga runt boxarna. Då kan du använda denna koden då du lägger in skuggkoden i stilmallen och innehållet i din box i kodmallen.

Väldigt komplicerat att förstå, men om man testar sig fram så kanske det lossnar till slut! Var inte rädd för att ställa frågor nu, för detta är komplicerat!

2012-01-02 @ 17:44:33 Permalink Allmänt Kommentarer (0) Trackbacks ()