Alt har en begynnelse… - Design forbedringer

Archive for the ‘Design forbedringer’ Category

You are currently browsing the archives for the Design forbedringer category.

11 apr 2010

Design: Hvordan deleopp sidemeny og innleggsdelen

Dette er utrolig enkelt når du først vet hvordan det skal gjøres. Det er vel kanskje alt?

Nederst i stilsettet setter du inn dette:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

#wrapper{

background: transparent;

border: 0;

padding: 0;

}

#header{

margin-bottom: 20px;

}

#side, #main{

padding: 5px;

background: #555;  /* bakgrunnsfarge på sidemenyen og innleggsdelen  */

border: 1px solid #000; /* ramme rundt sidemenyen og innleggsdelen */

}

#side{

width: 28%;  /* bredden på sidemenyen */

}

.breadcrumbs{ display: none; }

Dette kan gjøres med mindre kode, men etter å ha testet dette ut på en del blogger så har jeg kommet frem til denne. Denne skal virke på de fleste blogg.no blogger. Hvis du har et helt spesielt oppsett i malen så vil kanskje ikke dette virke hos deg. Legg igjen en kommentar så kan jeg hjelp deg.

Gikk det?

11 april, 2010 at 0:04 by Tronds

Posted in Design, Design forbedringer, html/css | 24 Comments »

7 apr 2010

Design: Hvordan vise hele innlegget på arkiv og kategorier

Det er ikke så mye som skal til for at du her muligheten til å vise hele innlegget når noen går inn på en kategori eller arkivet.

Først må du inn i malen til der du ønsker hele innlegget skal vises, vi tar “Kategori” malen først.

Når du er inne på den malen så finer du linjen

<tag:entrylist limit=”1000″ maxchars=”200″>

“limit” sier hvor mange innlegg du ønsker å vise, “maxchars” sier hvor mange tegn av innlegget du ønsker å vise. Selv om du setter “maxchars” til 10000 vil den ikke ta med seg noen bilder, bare teksten. For at den skal vise bilder også må du fjerne maxchars=”200″ fra linjen. linjen skal med andre ord se slik ut:

<tag:entrylist limit=”1000″>

Så forhåndsviser du og lagrer hvis alt ser bra ut.

Så gå du inn på “Arkiv” malen og gjør akkurat det samme der.

Vanskeligere en det er det ikke, men hvis du skulle få problem så er det bare å sifra.

Hva synes du er best, at hele innlegget vises eller bare litt?

7 april, 2010 at 9:53 by Tronds

Posted in Design, Design forbedringer, blogg.no | 6 Comments »

6 apr 2010

“slik som VOE!”

Jeg hjelper en del og får en del spørsmål. En type spørsmål som dukker opp er ofte “HVordan kan jeg få en slik xxxx som VOE!” eller noe andre “store” bloggere. Hadde det ikke vært fint om dere fant deres egen stil? Selv om Voe eller noen andre “store” bloggere har det så betyr det ikke at det er fint eller at det passer til din stil.

Prøv dere frem, se om dere finner noe nytt og kult, ikke prøv å være som alle andre.Se deg litt rundt, prøv å få til noe som ingen andre har. Da slipper folk som kommer inn på bloggen din å tenke “Ånei, nok et Voe kopi”.

Voe er bare bare brukt som et eksempel her.

En plass å begynne er feks hos Trinecam, hun har et innlegg om de ti beste design sidene http://trinecam.blogg.no/1267284087_27feb2010.html . Du finner noe en slik liste hos Silje også http://siljelien.blogg.no/1269969106_designtopplista_for_m.html?c=1269973427594

EDIT: For meg gjør det ikke noe om folk ønsker å hente litt fra et annet blogg design og jeg hjelper dem gjerne. Men jeg hadde syns det hadde vært mye bedre hvis de klarte å beskrive noe annet de ønsker. Noe som ikke finnes før. Jeg prøver å “dytte” folk i en annen retting når jeg har muligheten. Gjør den litt forskjellig, forbedre den litt. Som oftest synes de den er bra. selv om jeg ikke har problem med å “kopiere” noe 100%

Har du “kopiert” designet ditt fra noen ?

6 april, 2010 at 21:53 by Tronds

Posted in Design forbedringer, Tanker | 8 Comments »

28 mar 2010

Design: Hvordan få større profil bilde, the easy way

Ser at mange ønsker seg større profilbilde på siden. Det finnes mange måter å fikse dette på. De aller fleste velger å gå inn i malen å forandre det der, problemet da er at du må innom alle malene for å forandre det. Og det er heler ikke så enkelt å få det helt ut i kantene.

På denne måten så vil alle “malene” forandre seg når du legger inn denne koden her.

1
2
3
4
5
6
7
8
9
10
11
12

/*Koden under fjerne det "originale" profilbildet ditt. */

#profile img{

display: none;

}

/* koden som setter inn et nytt større profilbilde. */

#profile{

padding-top: 280px;  /* her setter du inn høyden på profilbildet ditt. */

background-image: url( http://i40.tinypic.com/sg224z.jpg );  /* putt inn linken til bildet her */

background-repeat: no-repeat;

background-position: center top;

}

Med å lime inn koden over vil det komme opp et slik “prøvebilde” på det kan du lese av hvor bredd sidemenyen din er, så ordner du bare et profil bilde som et den bredden du “leser” av på prøvebildet.

Når du har har tilpasset profilbildet ditt, det kan være så høyt du selv vil. Last opp bildet til feks tinypic.com og kopier inn linken til bildet ( den nederste linken du får ) inn i koden over. Forandre høyden til det profilbildet ditt har.

Bakdelen med å få større profilbildet på denne måten er at det ikke virker når noen trykker på bildet for å komme til profilen din, det er fortsatt mulig å trykk på navnet ditt for å komme til den.

Lykke til!!

Bare å rope ut hvis det skulle være noe problem.

28 mars, 2010 at 11:26 by Tronds

Posted in Design, Design forbedringer | 18 Comments »

5 feb 2010

10 punkt til et bedre design

Hvordan et design skal se ut er vel en smakssak, noen synes det skal være mange farger andre liker enkle design uten noe farger. Dette er det jeg synes skal være med på en design. Du har selvfølgelig dine meninger, hvis du er uenig eller enig med meg på noen punkt så legg igjen en kommentar.

1. Luft, noe vi alle trenger

Et design uten luft blir rotete og uoversiktlig. Gi det litt mer “tomrom” og det vil med en gang bli mer oversiktlig. Få et lite mellomrom mellom innleggsdelen og sidemenyen, ikke la teksten komme helt inntil hverandre.

Få litt “luft” mellom headern og toppen på siden. Ville du ha hengt opp et bilde helt oppi taket? Litt “luft” mellom headern og innleggsdelen er også greit å ha.

Flytt også bort fra rammer, bakgrunnsfarger og alle andre ting som gjør at det blir vanskelig å lese.

2. Headeren kan nå aldri bli for stor?

Jo så absolutt, ingen liker å måtte bla seg nedover en hel side for å komme ned til teksten. En header skal være samme bredde som bloggen og ikke mer enn 250px høy.

Fjern den skriften som blogg.no legger inn. Og aldri, jeg gjentar ALDRI la headeren gjenta seg selv bortover eller nedover. Fiks en som er stor nok til å dekke hele.

3. Valg av skrift

Ikke bruk alt for mange font/skrift typer på bloggen. 2-3 er mer enn nok. Hvis du velger å bruke en font/skrift type som ikke er vanlig så er det ikke sikkert den som er inne på siden din har den installert, da vil det bare bli vist en standard font/skrift type i stede for den du har valgt ut.

4. La oss ramme inn ting.

Jo, det er noe jeg kan like. Fargevalget er viktig her også, i stede for å gå får den standard svarte rammen velg heler en som er litt mørkere enn fargen inni boksen, de gir alt en litt mer 3D look. Jeg sier ikke at det skal være rammer alle plass, men rammer/sterker er grei å ha når du skal skille ting fra hverandre.

5. Fargevalg er like viktig som innholdet

Noen ganger prøvd å lese et ett innlegg som er skrever på svart bakgrunn med mørk grå skrift? Eller gul bakgrunn med rosa skrift? Det har jeg, noen ganger må jeg vil og med merke teksten før jeg klarer å lese hva som står det. Når du velger farge så tenk litt over at folk skal lese dette, hvis det blir for vanskelig å lese vil gjerne folk ikke ta seg tiden til å lese. Tenk også at å ha en bakgrunn bak innlegget ser kanskje fint ut for deg, men andre vil ha problem med å lese det.

Farge valget på bloggen skal også gjenspeile fargene som er i headern. Alt skal passe sammen, akkurat dette har jeg problemer med også. Heldigvis finnes det hjelp å få, LINK og LINK er to siden jeg bruker ganske mye for å finne fager som passer sammen.

6. Lenker skal vises.

Noen websider jeg er innpå så er det vanskelig å si hva som er en lenke eller hva som ikke er en lenke. En lenke skal ha en annen utforming enn teksten den står i, feks understreking, litt annen farge eller noe annet som skiller den ut fra resten av teksten. Linker kan også forandre seg litt når du tar pilen over.

Det skal også være helt unødvendig å skrive, “trykk HER for å komme til siden hans” bruk heler noe slik: “Var innom VG ( www.vg.no ) i dag å leste en god artikkel “ med lenke på adressen og “VG”.

7. Profile bilde skal være så lite at du ikke ser de engang. NOT!

Standard profilbildet som er på blogg.no er ikke tilpasset designet. Det er alt for lite og forsvinner igrunn. La det vokse, gjør det nesten like bredd som “sidemenyen” slik at de kommer til sin rett.

8. Bredd blogg er jo best?

Ikke alltid, kommer litt ann på hva du skal blogge om, om du legger ut store bilder eller ikke. Skriver du bare noen linjer uten stort bilde så er det ikke nødvendig med bredd blogg. Det blir sende så “tomt” ut hvis du har en blogg på 950px også skriver du bare noen linjer. Gjør den mindre, da vil teksten komme på flere linjer og det er ut som om du skriver mye mer.

Hvis du vil ha stor plass til innleggene, men du vil også ha en smalere blogg. så er det fortsatt mulighet å korte litt ned på bredden på bloggen. Du bare gjør sidemenyen litt mindre, beholder størrelsen på innleggsdelen. Da vil bloggen bli mindre.

En annen mulighet er å kutte ut sidemenyen helt eller flytte den over innleggende.

9. Meny under headern

Dette gjør at du har mulighet til å legge inn en del linker som folk ønsker å se på, feks “Om meg”, “Bloggen” osv.

10. Gjør den personlig

La den bli din, ikke bruk en som 10000 andre også bruker. Gjør noe for at den skal bli din og bare din. Når noen kommer på bloggen din så skal de tenke “Ah, en slik person hun/han er”. Da vet du at den er perfekt.

Det var det jeg hadde å si om design for denne gangen, noen vil være enig andre ikke. Hvis du føler at bloggen din trenger en “oppussing” og du ikke vet helt hvordan du skal få det til, så er det bare å spørre. Jeg har også laget en OSS ( Ofte Stilte Spørsmål ) som ligger du finner under “Designhjelp” i menyen. Jeg prøver å legge inn det jeg blir spørrer om, men det er ikke alle spørsmålene jeg kan legge inn da mange har litt forskjellige utgangspunkt i maler.

Hvordan synes du et perfekt design skal være ?

5 februar, 2010 at 22:14 by Tronds

Tags: Design
Posted in Design forbedringer, Tanker, blogg.no, html/css | 9 Comments »