Alt har en begynnelse…

8 mar 2010

Derfor er lørdager best

Bildet sier mer enn 1000 ord.

Har dere det også slik?

8 mars, 2010 klokken 14:28

I kategorien: Blogg, Mat, Ting som skjer | 7 Kommentarer »

6 mar 2010

Hvordan gjør de det? Roterende header som TheGiant

Først ut skal vi se på hvordan TheGiant ( http://thegiant.blogg.no ) klarer å få til at header bildet som roterer seg. Du kan legge inn så mange bilder du vil, og plassere dem der du vil.

Dette er ikke vanskelig, men du bør vite hvordan du ordner bilder i rett størrelse og ellers ikke være utålmodig så går dette ganske greit.

Først må du finne de bildene du ønsker å bytte mellom. Du trenger ikke å sette inn hele header bildet, bare den delen som skal rotere/bytte på. Bildene kan være så stor eller små du ønsker, men det som er viktig er at de er like store. Så laster du dem opp til http://tinypic.com og noterer ned direkte adressen til bildene ( nederste feltet ).

Når det er gjort går du inn i stilsett filen, helt nederst setter du inn disse linjene, kopier inn alt:

1
2
3
4
5
6
7
8
9
10
11

#photodiv{

background-repeat: no-repeat;

float: right; /* om du vil ha bildet på venstre ( left ) eller høyre ( right ) siden */

height: 269px;  /* hvor høyt er bildene du skal bruke */

left: 10px; /* for å justere bildet, hvis du vil ha det mer til venstre så bruker du feks -10px */

position: relative;

overflow: hiden;

top: 10px;  /* lenger ned eller opp, kan bruke - ( minus ) for å flytte den lenger opp også */

width: 309px; /* hvor bredd bildene er */

}

Alt er beskrevet i koden over, når du etter på ser at bildene blir forlangt til høyre må du forandre til feks left: 20px; Dette er noe du bare må prøve deg frem til senere.

Da skal vi sette inn koden i male. Dette må gjøres i alle malene, men vi gjør det først i forside malen og tilpasser koden der før du kopiere dem over til de andre malene.

Gå inn i malen og finn denne linjen:

</head> IKKE <head> men </head> Selv om det er bare et tegn i forskjell gjør det stor forskjell. Over linjen </head> limer du inn denne koden, nok en gang, alt skal inn:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112

<script type="text/javascript"><!--

//

// CSS Photo Shuffler v1.0 by

// Carl Camera

// http://iamacamera.org

//

// SetOpacity Function and inpiration from Photo Fade by

// Richard Rutter

// http://clagnut.com

//

// License: Creative Commons Attribution 2.5 License

// http://creativecommons.org/licenses/by/2.5/

//

// Customize your photo shuffle settings

//

// * Surround the target &lt;img /&gt; with a &lt;div&gt;. specify id= in both

// * set background-repeat:no-repeat in CSS for the div

// * The first and final photo displayed is in the html &lt;img&gt; tag

// * The array contains paths to photos you want in the rotation.

// If you want the first photo in the rotation, then it's best to

// put it as the final array image. All photos must be same dimension

// * The rotations variable specifies how many times to repeat array.

// images. zero is a valid rotation value.

var gblPhotoShufflerDivId = "photodiv";

var gblPhotoShufflerImgId = "photoimg";

// her legger du inn bildene, husk at hver bilde adresse må være inni "

//det skal også være et komma mellom hver bilde adresse.

//UNTATT på siste bildet der skal ikke være noe komme etter

// du kan plassere så mange bilder du ønsker her.

var gblImg = new Array(

"http://i48.tinypic.com/2n9j91c.jpg",

"http://i46.tinypic.com/6p9m3p.jpg",

"http://i48.tinypic.com/14ie4o2.jpg"

);

var gblPauseSeconds = 15.25;  // hvor lenge hvert bilde skal være fremme

var gblFadeSeconds = .85; // hvor lang tid overgangen fra ett bilde til et annet skal være

var gblRotations = 9999; // hvor mange ganger bildene skal vises

//under her skal de ikke gjøres noe forandringer

// End Customization section

var gblDeckSize = gblImg.length;

var gblOpacity = 100;

var gblOnDeck = 0;

var gblStartImg;

var gblImageRotations = gblDeckSize * (gblRotations+1);

window.onload = photoShufflerLaunch;

function photoShufflerLaunch()

{

var theimg = document.getElementById(gblPhotoShufflerImgId);

gblStartImg = theimg.src; // save away to show as final image

document.getElementById(gblPhotoShufflerDivId).style.backgroundImage='url(' + gblImg[gblOnDeck] + ')';

setTimeout("photoShufflerFade()",gblPauseSeconds*1000);

}

function photoShufflerFade()

{

var theimg = document.getElementById(gblPhotoShufflerImgId);

// determine delta based on number of fade seconds

// the slower the fade the more increments needed

var fadeDelta = 100 / (30 * gblFadeSeconds);

// fade top out to reveal bottom image

if (gblOpacity &lt; 2*fadeDelta )

{

gblOpacity = 100;

// stop the rotation if we're done

if (gblImageRotations &lt; 1) return;

photoShufflerShuffle();

// pause before next fade

setTimeout("photoShufflerFade()",gblPauseSeconds*1000);

}

else

{

gblOpacity -= fadeDelta;

setOpacity(theimg,gblOpacity);

setTimeout("photoShufflerFade()",30); // 1/30th of a second

}

}

function photoShufflerShuffle()

{

var thediv = document.getElementById(gblPhotoShufflerDivId);

var theimg = document.getElementById(gblPhotoShufflerImgId);

// copy div background-image to img.src

theimg.src = gblImg[gblOnDeck];

// set img opacity to 100

setOpacity(theimg,100);

// shuffle the deck

gblOnDeck = ++gblOnDeck % gblDeckSize;

// decrement rotation counter

if ( gblImageRotations &lt; 1)

{

// insert start/final image if we're done

gblImg[gblOnDeck] = gblStartImg;

}

// slide next image underneath

thediv.style.backgroundImage='url(' + gblImg[gblOnDeck] + ')';

}

function setOpacity(obj, opacity) {

opacity = (opacity == 100)?99.999:opacity;

// IE/Win

obj.style.filter = "alpha(opacity:"+opacity+")";

// Safari&lt;1.2, Konqueror

obj.style.KHTMLOpacity = opacity/100;

// Older Mozilla and Firefox

obj.style.MozOpacity = opacity/100;

// Safari 1.2, newer Firefox and Mozilla, CSS3

obj.style.opacity = opacity/100;

}

// --></script>

Har skrevet inn forklaringer i koden hvor du skal gjøre de forskjellige tingene, har langt inn 3 bilder, disse er bare å bytte ut. Men det kan kanskje være lurt å la disse stå her enda. Slik at du ser om du har fått tid til å virke.

Så går vi litt lenger ned i malen, finn linjen:

Under denne limer du inn denne koden:

1	<div id="photodiv"><img id="photoimg" src="http://i48.tinypic.com/14ie4o2.jpg" alt="" /></div>

Da er det bare å forhåndsvise og se om alt virker. Hvis det virker så kan du sett inn dine egne bilder.

Husk også å justere høyden og bredden i stilsett filen, slik at de passer til bildene du bruker. Hvis bildene ikke kommer på rett plass, lagrer du, gå inn i stilsettfilen og juster hvor bildene skal komme opp i den kodebiten du satt inn der. I tillegg til å legge inn bildene i den delen som ble lagr inn over </head> linjen så skal du sette inn en bilde adresse i delen som ble plasser under <div id=”doc2″> også, bytt ut med den som alt er der.

Skal være godt forklaring, hvis det er noe du lurer på så er det bare å spørre.

Slik gjorde de det. Spørsmål eller kommentarer er selvfølgelig velkommen
Fikk du det til?

6 mars, 2010 klokken 12:07

I kategorien: Design, Hvordan gjør de det?, html/css | 7 Kommentarer »

5 mar 2010

Hvordan gjør de det?

Tenkte jeg skulle ta for meg designene til de “store” bloggerne. Hvordan klarer de å få til noe av det de har, skal først se på hvordan The Giant ( snakk om “stor” blogger ) klarer å få til en header som bytter bilder.

Kommer til å skrive en forklaring på hvordan det er mulig å få noe lignende på sin blogg, da selvfølgelig med egne bilder.

Første innlegget i serien kommer i morgen.

Har du noe forslag til andre blogger jeg kan se på? noe du har ønsket å få på din blogg?

5 mars, 2010 klokken 0:12

I kategorien: Hvordan gjør de det?, blogg.no | 3 Kommentarer »

4 mar 2010

Design: Meny “fane”

Vanskelighets grad: Enkelt.

Da prøver vi oss på en meny til, det er stort sett noe alle ønsker.

Denne gangen her skal vi prøv å få til en slik meny. OG NEI det er ikke så vanskelig som du tror

Passer ikke farge valget ? ikke noe problem du går nemlig inn på denne siden http://www.tabsgenerator.com/ og lager dine egne knapper, er gjort på 1-2-3. Last ned bildene til datamaskinen din, og last dem opp igjen på http://tinypic.com og laster det opp. Kopier ut adressen til bildet for det trenger du etter på.

Når jeg sier “bildene” så holder det med et bilde ( en knapp ) men hvis du feks vil at den skal skifte farge når du holder musen over må du lage to bilder.

Først går vi inn i stilsettfilen, helt nederst i den setter vi inn koden under. Ta med deg alt

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

.tsmenyfane{

float: left;

width: 100%;

margin-top: 20px; /* vi lagger et lite mellomrom opp til header, ser finere ut da */

margin-left: 10px; /* denne flytter menyen litt lenger inn på siden, litt forskjellig fra mal til mal */

background: transparent;  /* sett denne til en fargekode hvis du vil  ha en annen farge enn bakgrunnen på bloggen */

}

.tsmenyfane a {

display: block; /* denne må du ikke røre ;) */

padding-left: 10px; /* justerer teksen lenger mot høyre */

width: 130px; /* bredden på bildet du bruker som bakgrunn MINUS   hvorlangt du velger å flytte inn teksten på linjen over */

padding-top: 10px; /* justerer teksten lenger ned */

height: 30px; /* høyden på bildet du bruker som bakgrunn MINUS   hvorlangt du velger å  flytte ned teksten på linjen over */

background: url( http://i46.tinypic.com/2s68shf.png ); /* "knapp" bildet  */

font-size: 20px; /* størrelsen på fonten */

color: #000; /* fargen på teksen */

margin-right: 10px; /* hvor stor avstand du skal ha mellom knappene */

float: left;

text-decoration: none; /* sier bare at det ikke skal være linje under linken */

}

/* delen under forandrer bildet når du holder musen over, hvis du  ikke ønsker dette så fjern denne delen */

.tsmenyfane a:hover, .tsmenyfane .preload{

background: url( http://i49.tinypic.com/35a3thj.png ) no-repeat; /*  knappen forandrer seg til denne når du holder musen over */

}

Du ser at det er to forskjellige adresser til tinypic.com i koden over. Den første er til bildet som skal vises i menyen, det andre er til hvordan knappen skal se ut når noen plassere musen over. Sett inn linkene til de knappene du har fikset selv. Koden over passer til knapper som er 40 høy og 140 bredd, har du andre størrelser på knappene må du tilpasse koden over. Er ganske greit forklart så det skulle ikke være noe problem.

Lagre. Du skal ikke se noe forskjell på siden enda, hvis du gjøre det så har du gjort noe feil! Tilbake still designet og prøv igjen.

Når det er gjort så skal vi putte inn litt kode i malen . Det første du må gjøre er å finne linjen:

Over den linjen limer du inn koden som står under her:

1
2
3
4
5
6
7

<!-- Meny start -->

<div class="tsmenyfane">

<a href="/">Forside</a>

<a href="LINKEN">NAVN</a></div>

<!-- Meny slutt-->

Lim inn alt. På linjen som det står LINKEN på kan du kopiere opp så mange ganger du vil, LINKEN byttes ut med adressen til innlegge/kategorien som du vil skal komme opp når noen trykker på NAVN. NAVN byttes ut med navnet du vil ha på knappen.

Trykk på forhåndsvisning.
Hvis du er fornøyd så lagrer du. For at menylinjen skal vises heletiden må den siste delen også limes inn i malene “innlegg”, “kategori” og “Arkiv”. Da tar du bare koden som du nettopp limte inn i malen og kopierer den inn i de andre.
Hvis det er noe du ønsker å forandre på å så se på linjene i stilsettet, har skrevet forklaringer på alle linjene. Noe du ikke får til å legg igjen en melding her så skal jeg sjekke det ut.

Lykke til

4 mars, 2010 klokken 4:20

I kategorien: Design, Meny, html/css | 5 Kommentarer »

27 feb 2010

DVD samlingen

Filmer jeg har igjen.

Da har jeg endelig begynt! Planen er å få kopiert inn alle dvdene mine på fil serveren. Da sparer jeg plass i hyllene og alle DVDene er tilgjengelig når jeg sitter i sofaen. Har nemlig kjøpt

meg en Asus O!Play HDP-R1 spiller som kan spille filmer filer over nettverket, denne er selvfølgelig koblet til tven. Så da er det bare å bla seg frem til det jeg ønsker å se. DVD samlingen er nå oppe i rundt 300 titler, rundt 50 av dem er barnefilmer. Resten action, sci-fi og litt romantikk og komedie. Har til nå overførst 60 DVDer til dataen. Bare 240 stykker som gjenstår

: Filmer jeg er ferdig med

Hvorfor kopierer jeg dem over på datamaskinen? Jo, 300 DVD cover tar litt plass. Med å få alle inn på en datamaskin så er mye plass spart, jeg vet hvor de er til en hver tid og jeg slipper å være redd for at de skal bli ødelagt av husets mindre innbyggere.

Har du noen gang kopiert inn filmer på datamaskinen?

27 februar, 2010 klokken 23:21

I kategorien: Personlig, Ting som skjer | 6 Kommentarer »

Derfor er lørdager best

Hvordan gjør de det? Roterende header som TheGiant

Hvordan gjør de det?

Design: Meny “fane”

DVD samlingen

Legg meg til som venn

Siste innlegg

Siste kommentarer

Emner

Bloggrull