Gratis design til blogg – Last ned nå

Gratis design til blogg, er enkelt og greit egentlig kun noen få filer og koder. Som bestemmer hvordan informasjonen, innlegg, kommentarer og sider på din blogg skal vises.

Hvilke farger, fonter og oppsett det skal vises frem som bestemmes av CSS kode og HTML filer. I Norge brukes stort sett Blogg.no til blogging eller så har vi WordPress som du kan installere selv på din egen server.

I wordpress kan du søke opp design inne i kontrollpanelet og bare klikke på installer. Under Utseende finner du designene som er tilgjenglig fra wordpress direkte og de som har blitt inkludert i deres katalog.

På nettet kan du også finne wordpress design som kan lastes ned eller kjøpes og lastes ned. De må i etterkant pakkes ut av ZIP filene som de kommer i og lastes opp via FTP eller i WordPress kontrollpanelet.

Blogg.no Design

På Blogg.no er det litt annerledes. Her gjøres det meste ved kopiering av kode inn i kontrollpanelet og denne koden forteller hvordan informasjonen vises.

Alle som har en blogg bør endre på utseendet. Standard designet som er på Blogg.no og som følger med WordPress gir ikke en personlig følelses og bloggen blir heller ikke lett å huske for de som er innom.

Har du et unikt design som er litt tilpasset eller som ikke alle andre bruker vil du skille deg ut, og det er kanskje det som gjør at folk kommer tilbake siden du nettopp skiller deg ut.

Bruk gjerne litt tid på designet og sett deg inn i hvordan det fungerer og hvordan du kan spesialtilpasse det til din blogg. Når det først er gjort kan du glemme det for en lengre tid, for nå kjenner folk igjen bloggen din når de ser den.

For å endre designet i WordPress er det bare å gå på
“Utseendet” i kontrollpanelets meny. Her kan du lete opp gratis design eller laste opp et du finner på Google. Jeg har lagt til en link under med 10 gratis wordpress design som du kan ta en titt på.

For Blogg.no bloggere har jeg funnet frem til noen som lager bloggdesign til Blogg.no under og lagt ved en video til hvordan man gjør endringene.

Lykke til med endringene av ditt design til bloggen din!

Topp 10 gratis design til bloggen din for WordPress:

http://topwpthemes.com/

Gratis blogg.no design:

http://theplatypus.blogg.no/1313611400_gratis_design__1.html

http://bloggdesignet.blogg.no

Hvordan legge inn ditt nye gratis blogg.no design:

VIDEO: Lære mer om å starte en blogg? Se her:
VIDEO: Fra Nybegynner til Problogger

3 gode ressurser til utvikling av nettside

Ikon Søk

Om du holder på å lage din egen nettside, din egen blogg eller utvikler et CMS(Content Management System) så trenger man alltids ikoner for å gjøre dem mer brukervennlige og få et mer profesjonelt utseendet. Om du går til http://www.iconlook.com så kan du søke etter akuratt de ikonene som du vil ha tak i, de er ikke gratis alle sammen men du får opp lisensbetingelser og hvor du kan få tak i dem.

Menyer

Når ikonene er på plass så kan det være greit å ha en god meny, hvis du går til http://www.dynamicdrive.com/style/ så kan du se over en god del forskjellige menyer, de burde dekke de fleste behov som man har og får siden din til å bli lett navigert for brukerne!

Video opplæring i Web

Er du av typen som ikke liker å lese, kan video være en grei måte å få lært seg forskjellige ting på. Web likeså. Om du tar turen innom http://www.insidecrm.com/ så har de en post der de har samlet 100 gode video tutorials fra Youtube som dekker de aller fleste områder når man skal utvikle og drifte sin nettside best mulig. De er delt opp i de forskjellige kategoriene som man trenger å lære seg så her er det bare å sette av kvelden til å få inn informasjonen du trenger, så får du prøve den ut i praksis med en gang!

Lykke til med utviklingen i sommer! 🙂

Bakgrunnsdekorasjon til Photoshop!

Jobber du mye med Adobe Photoshop eller andre lignende program og er blitt litt vandt til å holde på der, så vet du at det er greit å ha et stort arsenal med texturer, styles og gradients liggende, samt mye annet.

Texturer er fine å bruke som bakgrunner i blant annet nettdesign, det gir en helt annen feeling til din nettside om du har noe annet enn en plain bakgrunnsfarge.

Her kan du laste ned 99 forskjellige texturer http://www.tutorial9.net/

Her får du noen litt andre typer textures med en grunge stil http://www.grungetextures.com/

Kos deg med Photoshoppen, utrolig deilig å ta seg litt design tid i den kjølige kvelden som kommer etter lange dager med sol, varme og strandbesøk for inspirasjon!

WebDesign Trender 2008

Elsker du Web 2.0 verden vi er inne i som faste nettbrukere? Designet er på topp, funksjonalitet og sammenkobling av tjenester gjør at det endelig blir en skikkelig fornøyelse og bruke tiden på dette mediet.

Om du besøker http://www.webdesignerwall.com så kan du se en samling av mange gode nettsider som er midt inne i denne trenden. Så ser du hvor resten av oss burde bevege oss dersom vi skal følge det brukerne vil ha. Selv om innhold er alt til syvende og sist. Happy surfing!

Ekstremt god Photoshop ressurs!

Jobber du i Adobe Photoshop, eller driver med det på hobby basis? Da vil dette tipset gjøre din hverdag mye enklere, du vil få en mer profesjonell Web 2.0 look over det du lager, og det blir en fryd for øyet.

Vet du om lignende sider som den jeg linker til her, så skriv det i kommentarene slik at andre også kan nyte godt av dem. Kan oppdatere posten etter de 10 første tipsene er kommet inn, slik at dere får link til nettsiden deres som takk for hjelpen ved siden av deres tips! (Uten nofollow selvfølgelig, for de som vet hva det er.)

Ta turen innom Deziner Folio! Der har de samlinger med Web 2.0 materiell slik som Styles/Gradients og Ikoner. Til og med WordPress theme for dem som ønsker et eyecandy theme.

Ta turen innom idag, gjør din Photoshop Web 2.0 opplevelse fullkommen! Besøk dem her.

Tilgjengelighet og brukbarhet av din blogg/nettside

Her får du tips til noen nettsteder som viser deg hvordan du kan gjøre siden din enklere å bruke:

Lag en rollover effekt på din nettside/blog navigasjon!

Velkommen til den første guiden her på ItStyle Bloggen.

I startfasen av denne bloggen var fokuset å få folk til å se bloggen, få gode tips og triks som er gull verdt. Dette trakk en stor andel brukere hit, håper alle syntes det var verdt en tur innom.

Nå er fase 2 av bloggingen kommet, her vil jeg fortsette med gode tips og triks, men har lagt til en ny kategori som går under guider. Her vil jeg poste artikler som vil hjelpe deg til å få til forskjellige ting for din nettside eller på din datamaskin.

Har du ønsker til noe du lurer på så post gjerne det i kommentarfeltet på “om bloggen”.

Guide nr 1: Lag en rollover effekt på din navigasjon!

1. Lag et bilde av din navigasjonsknapp.

Dette kan du lett gjøre i for eksempel Adobe Photoshop eller i andre tegneprogram. Under her ser du min navigasjonsknapp. Det jeg vil at den skal gjøre er å vise kun den blå delen av bildet når man ikke holder musen over knappen, for så å bytte over til den røde delen når man holder musepekeren over den. Du kan laste ned og bruke bildet jeg har under for å teste det ut selv.

Det mest vanlige har vært å ha to forskjellige bilder. Der det ene bildet blir lastet når man går inn på siden din, og den andre blir ikke lastet før man holder musen over, så da kan det ødelegge designet mens den lastes inn. Det finnes noen mellomlagrinsløsninger for å løse det problemet, men med denne metoden er det enklere.

2. CSS koden for å få dette til å fungere

<style type=”text/css”>
<!–
a#rollover{
height: 20px;
width: 100px;
background-image:url(DittRollOverBilde.png);
text-decoration:none;
display:block;
}
a#rollover:hover{
background-position:100px;
}
–>
</style>

Over her har du selve CSS koden for å få din rollover til å fungere. De feltene som er markert med rødt må du endre til det som gjelder for deg. Du setter inn koden i din egen CSS fil eller i <head></head> delen av din nettside.

Forklaring av koden:

height: Her setter du inn høyden til det bildet som du selv har laget, bruker du mitt eksempel lar du det stå “20” der siden bildet er 20 piksler høyt.

width: Dette er bredden på den delen av bildet som er den blå knappen, i mitt eksempel så er den 100 piksler lang.

background-image:url: Dette er linken til bildet ditt. Du bytter ut DittRollOverBilde.png med det ditt bildet heter. Hvis du ikke legger bildet i samme mappe som html filen din ligger så må du legge til hele adressen til dit bildet ligger eks “https://problogger.no/guider/RollOverBilde.gif”

background-position: Dette bestemmer hvor langt til venstre nettsiden din skal gå i bildet når man holder musen over bildet. I mitt eksempel er den blå knappen 100 piksler lang, så når jeg velger at den skal hoppe 100 piksler til høyre på bildet, så vil den kun vise den røde knappen.

3. HTML koden

<a href=”#” id=”rollover”> </a>

Over ser du html koden. Det er en helt vanlig link tag, men den har fått påført seg id’en “rollover”. Id’en henviser da til CSS koden som du skrev i punkt 2. Den røde firkanten er der du setter inn url’en til siden du linker til. Regner med at du vet hvordan en link tag ser ut fra før, så skal ikke forklare den så mye.

4. Det var det, du er ferdig! Fullstendig kode her.

Vanskeligere enn dette er det ikke. Er du en klipp og lim type som skal teste eksempelet så fort som mulig uten å sette det overstående sammen så får du her fullstendig kode til hele html siden. Det eneste du må huske på er å endre de parameterne som jeg tidligere nevnte og ha bilde filen klar.

Fullstendig kode for nettside med rollover link:


<html>
<head>
<title>Din Rollover navigasjon nettside</title>
<style type=”text/css”>
<!–
a#rollover{
height: 20px;
width: 100px;
background-image:url(RollOverBilde.png);
text-decoration:none;
display:block;
}
a#rollover:hover{
background-position:100px;
}
–>
</style></head>
<body>
<a href=”#” id=”rollover”> </a>
</body>
</html>

Sliter du med fargevalget til din hjemmeside?

Når du setter deg ned for å jobbe med et nytt design, eller friske opp et gammelt design på en av dine nettsider eller blogger så kan man få litt sperre på akkuratt hvilke farger man skal bruke.

Da er det godt at det finnes nettsider som kan gjøre det litt enklere for deg å finne farger som passer sammen. Adobe Kuler finner du ved å gå på http://kuler.adobe.com/ så kan du søke frem forskjellige fargevalg og velge ut de som er ratet høyest. Mange gode fargekombinasjon der.

En annen fargevalg side som er god: Color Scheme Generator 2

Noen av de beste CSS sidene på nett

Er du en webutvikler og elsker å se sider som har brukt CSS egenskapene til det ytterste?

Da anbefaler jeg en tur innom de 5 sitene jeg har listet opp her, de inneholder samlinger av gode CSS sider som finnes. Vel verdt å ta en tur for inspirasjon eller bare for underholdnignen av de kreative påfunn:

  1. Welovetxp
  2. CSSvault
  3. CSSmania
  4. CSSdrive
  5. CSS-website

Finn en ny font til din nettside/blog!

Om du har fulgt med på mine tidligere poster, så la du nok merke til Hvordan bruke hvilken font du vil på din nettside. Der fikk du vite hvordan du kan ha hvilken som helst font på din nettside med et par små triks. Det vil heller ikke skade din rangering av nettsiden i google siden original teksten er der. Det anbefales at den kun brukes på overskrifter og helst ikke på all tekst.

Nå som du har en slik strålende mulighet til å ha hvilken som helst font på din nettside, så kunne du vel tenkt deg å funnet en ny font, en frisk og rask, hard og brutal eller kanskje en håndskrift lignende font.

Da kan du ta en titt på sidene som er listet opp under, der finner du font gallerier med mest gratis fonter men og noen for profesjonelle som er villig til å betale:

Da er det bare å sette seg ned med sIFR og fontene og friske opp siden før sommerferien starter!