Takk (♥)

Bokser i sidemenyen


Start med å gå inn på design → rediger → maler.


Bla et godt stykke nedover til du finner <div id="side" class="yui-u"> eller trykk på Ctrl (command) + F for å få opp en søkeboks og skriv side i den.


Under side skriver du inn <div id="box"><div id="box"> er koden som bestemmer hvor boksen skal starte.


Under <div id="box"> skriver du innholdet du vil ha i boksen. Vil du ha noe av det som allerede ligger i silsettet ditt limer du <div id="box"> over det innholdet istedet. Om du blar helt ned i denne tutorialen er det bilde og litt bedre forklaring på det. For å avslutte boksen skriver du inn </div>.

#side {
width: 200px;
background: transparent;
font-size: 10px;
font-family: verdana;
color: #000000;
}
#box {
width: 180px;
padding: 10px;
background: #ffffff;

Gå inn i stilsettet og lim inn koden i kodeboksen. Du kan endre på bredden, skriftstørrelsen, bakgrunnsfargen, fonten osv. til det blir slik du ønsker.


Om du vil lage flere bokser, og for eksempel ha en boks med kategoriene inni endrer du <div>'en over <h3>Kategorier</h3> til <div id="box">. Du kan gjøre det samme med arkiv, lenker osv. Du kan lage så mange bokser du vil så lenge du starter dem med <div id="box"> og avslutter dem med </div>.

Håper det var til hjelp, og er det noe dere lurer på er det bare å spørre!

    EIRINHS © 2012 - 2015
    17.04.2014 - 10:13 - Designtips
    1

Slideshow i headeren

Det er mange som lurer på hvordan jeg får til slideshow (byttende bilder) i headeren. Jeg har planlagt å skrive en tutorial lenge, men jeg vet ikke helt hvordan jeg skal få den til å bli enkel å følge og godt beskrevet, så jeg har gruet meg og utsatt det. Jeg skal prøve så godt jeg kan, så får dere heller si ifra om det er noe dere ikke får til.


Det første du gjør er å gå inn på design → rediger → maler.

<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>

Lim koden i kodeboksen under <head>, helt øverst i malen. Kopier koden ved å markere hele og trykke Ctrl + C om du har pc eller Command + C om du har mac. Du limer inn ved å trykke istedet for C.


Scroll litt nedover til du finner <div id="header"> og slett de to linjene jeg har markert.

<div id="EmilyPictureBackground">
<img src="BILDE 1" width="BREDDE" height="HØYDE" id="EmilyPicture">
</div>
<script type="text/javascript">
RunSlideShow("EmilyPicture","EmilyPictureBackground",
"BILDE 1; BILDE 2; BILDE 3; BILDE 4",5);
</script>

Lim inn koden i kodeboksen der de to linjene du slettet var. Der det står bredde skal du skrive antall px bildene er, og samme med høyden. Det er viktig at bildene er like mange px som headeren skal være. Den høyden og bredden som står i stilsettet er 40px mindre enn headerbildene må være. Det tallet jeg har ringet rundt og skrevet hastighet ved kan du endre om du ønsker at bildene skal bytte oftere eller sjeldnere. Om du vil ha mere enn 4 bilder legger du bare inn flere bildeadresser.


For å få bilder i slideshowet laster du dem opp på blogg.no, kopierer bildeadressen (høyreklikk → kopier bildeadresse) og limer dem inn der det står BILDE 1, BILDE 2 osv. Det skal være en ; etter hver bildeadresse, bortsett fra den siste og den første bildeadressen skal limes begge stedene jeg har ringet rundt. Lagre malen.


Pass på at kodene ligger i alle malene og selvfølgelig at de ligger på riktig sted. Du kan gjøre det litt mer lettvint om du kopierer koden du allerede har lagt inn bildeadresser og sånt i fra forsidemalen istedet for å gjøre alt helt fra bunnen av fire ganger. Pass på å lagre alle malene.

Gå inn i stilsettet. 

#EmilyPictureBackground {
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;

Lim koden i kodeboksen under #head avsnittet, slik som på bildet.

Tilpass paddingen til det blir slik du ønsker. Du kan legge inn skygge og alt annet du ønsker å "pynte" slideshowet med under paddingene. Så er det veldig viktig å huske å lagre. Det er alltid viktig å huske å lagre.

Voilà! Håper du fikk det til, og er det noe du lurer på er det bare å spørre!
Noen flere designtutorials dere ønsker dere?

    EIRINHS © 2012 - 2015
    15.04.2014 - 07:43 - Designtips
    2

Fargekodeblander for HTML og CSS

 
    EIRINHS © 2012 - 2015
    23.05.2013 - 11:44 - Designtips
    2
Eirin
18
Asker
unicorneirin@gmail.com

2012

2013

2014

2015

Don't steal codes, pictures or text!
EIRINHS © 2012-2015
hits