Bloggdesign - 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">
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/ADRESSEN TILL FÖRSTA BILDEN" width="BREDDEN PÅ BILDERNA" height="HÖJDEN PÅ BILDERNA" id="EmilyPicture"> </div>
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!♥
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/ADRESSEN TILL FÖRSTA BILDEN" 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!♥
Bloggdesign - Dela upp dina kategorier
<font face="Georgia" size="3" color="#c5b9b3"><b>Personligt</b></font><br>
<b style="font-weight: normal;">
<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>
<div id="Foto"><ul>
<font face="Georgia" size="3" color="#c5b9b3"><b>Foto</b></font><br>
<b style="font-weight: normal;">
<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>
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>
KATEGORI 2</a> <br>
<a href="#">
KATEGORI 3</a><br><br>
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å!)
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!♥
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!♥
Bloggdesign - 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, eller efter #side i mitt fall.
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!
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, eller efter #side i mitt fall.
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!
Bloggdesign - Ändra utseende på ett visst ord/mening
Jag fick en design fråga innan och jag tänkte att jag kunde sammanfatta den i det här inlägget. Koden är alltså till för att man ska kunna byta färg, storlek eller typsnitt på ett visst ord eller en viss mening.
KODEN:
<font color="färgkod här" size="siffra mellan 1-6 här" face="typsnittets namn här">
ORDET/MENINGEN DU VILL ÄNDRA PÅ SKRIVER DU HÄR
</font>
FÖRKLARING:
Där det står "färgkod här" får ni inte glömma att sätta ut detta tecknet: #, innan färgkoden. Sen om man inte vill ha någon speciell färg (t.ex. svart) så räcker det med att man skriver "black" istället för färgkoden. Koden fungerar bara i kodmallen!
Sen tror jag att ni förstår det mesta! :)
P.S Jag har även fått en "foto fråga" som jag lovar att jag ska svara på så fort jag får tid!
KODEN:
<font color="färgkod här" size="siffra mellan 1-6 här" face="typsnittets namn här">
ORDET/MENINGEN DU VILL ÄNDRA PÅ SKRIVER DU HÄR
</font>
FÖRKLARING:
Där det står "färgkod här" får ni inte glömma att sätta ut detta tecknet: #, innan färgkoden. Sen om man inte vill ha någon speciell färg (t.ex. svart) så räcker det med att man skriver "black" istället för färgkoden. Koden fungerar bara i kodmallen!
Sen tror jag att ni förstår det mesta! :)
P.S Jag har även fått en "foto fråga" som jag lovar att jag ska svara på så fort jag får tid!
Bloggdesign - Bild i menyn
Fick en fråga för ett tag sedan en fråga om hur om man får i in bilder i menyn. Så det hade jag tänkt att visa nu!
1. Börja med att ladda upp bilden du vill ha i menyn på din blogg (Gå först in på Skapa > sen Bild). Tänk på att menyn oftast inte är så bred, så att ladda upp bilden i 200px bredd räcker nog.
2. När bilden är uppladdad trycker du på den två gånger. Då kan du kopiera bildens url adress, d.s.v koden längst upp. Spara den koden någonstans (t.ex. i en anteckning) för du ska snart använda den.
3. Kopiera sedan den här koden:
2. När bilden är uppladdad trycker du på den två gånger. Då kan du kopiera bildens url adress, d.s.v koden längst upp. Spara den koden någonstans (t.ex. i en anteckning) för du ska snart använda den.
3. Kopiera sedan den här koden:
<img src="BILDENS URL ADRESS HÄR">
4. Klistra sen in den i dina kodmallar någonstans under <div id="side"> för att den ska hamna i menyn. Där det står "bildens url adress här" ska du klistra in bilden url adress som du sparade innan.
5. Glöm nu inte att spara allt och så är det klart! :)
4. Klistra sen in den i dina kodmallar någonstans under <div id="side"> för att den ska hamna i menyn. Där det står "bildens url adress här" ska du klistra in bilden url adress som du sparade innan.
5. Glöm nu inte att spara allt och så är det klart! :)
Tips - Från Molly!
Hallooo alla Novalas bloggläsare, nu är Molly här och gästbloggar lite!
Hade tänkt att tipsa er om denna produkten! Det är en hårspray från got 2b. Den luktar typ hallon/hallonsoda, med andra ord riktigt gott. Frisyren håller bra men det blir inte "super stelt". Yes box, det var väl allt för mig denna gången. Som jag brukar säga hope you like it♥
Hade tänkt att tipsa er om denna produkten! Det är en hårspray från got 2b. Den luktar typ hallon/hallonsoda, med andra ord riktigt gott. Frisyren håller bra men det blir inte "super stelt". Yes box, det var väl allt för mig denna gången. Som jag brukar säga hope you like it♥
Min kommer ifrån H&M ca 70:- finns antagligen på kicks, livsmedelsaffärer, åhlens osv.
Bloggdesign - Enkel bloggdesign
Det fick bli tre videos för att hela klippet var så långt heheee...
Koden för #header (headern)
Koden för #Side (menyn)
Koden för #content (inläggen)
Koden för din header i kodmallen:
<img src="Adressen till din bild/header här">
Hoppas ni förstår vad jag babblar om, det blev väldigt rörigt. Ni får kommentera annars så kan jag hjälpa er!
