Posisjon 1
Posisjon 2
Posisjon 3
Posisjon 4
Posisjon 5
Posisjon 6
Posisjon 7
Posisjon 8
Posisjon 12

Nytt rosa og fresht design

Gather your rosebuds.... Like hvis du liker dette nye gratis designet! http://jmwebdesign.no/895/

Størrelse på innlegg: 700px

Størrelse på header: 700px

Sidemeny: Til venstre 




Posisjon 13
Posisjon 12

Nytt rosa og fresht design

Etter en langtid nede, med en overgang fra joomla til wordpress, er JMWebDesign tilbake i business. 

Vi har mange fantastiske premium design som du kan laste ned for kun 20 kr. Du kan betale med bankkort eller sms. 

Vi har også flere gratis design som du kan laste rett ned uten noe stress. 

 

 

#gratis #design #jmwebdesign #gratisdesign #nyhet

Posisjon 13
Posisjon 12

Nytt rosa og fresht design

På blogg.no sine hjelpesider har de nå lagt ut en ny tag. Dette bringer mange nye muligheter innenfor design! :)

Under kategori og arkiv i maler (html) er det vanlighvis en kode some heter maxchars som begrenser mengden med tekst og som fjerner bildene slik at de ikke kommer opp når man ser på oversikten over arkiv og kategori. Men nå kan man nemlig legge til et bilde selvom man bruker maxchars! Og er kommer en forklaring på hvordan...

 

ORGINAL KODE:

<tag:if test="${FirstImage != ''}"> <img src="${FirstImage}" /> <tag:else /> <img src="url-til-et-standard-bilde" /> </tag:if>

 

Det viktigste å huske når du bruker firstimage er at du må sett koden innenfor entry.

Husk også at du kan sette inn et default bilde som vises hvis du ikke har bilder i innleggene ved å bytte ut url-til-et-standard-bilde med en bildenettadresse (høyre klikk på bilde du vil bruke for å finne bildenettadressen).

 

METODE 1

Ved metode 1 bør du bruke orginal koden, se bilde nedenfor for forklaring.

 



 

 

METODE 2

Bruk forklaringen ovenfor som veileding, og lim in kodene under arkiv og kategori. <tag:entrylist> til </tag:entrylist> skal erstattes. 

For å få dette resultat må du lime inn både html- og css-kodene nedenfor.

HTML

<tag:entrylist limit="1000" maxchars="200"> <div class="entry"> <div class="tekst"> <h2> <a href="${EntryPermaLink}">${EntryTitle}</a> </h2> <div class="meta"> <ul> <li>Publisert: ${EntryDate} kl.${EntryTime}</li> <li> <a href="${EntryPermaLink}#comment">Kommentarer: ${EntryCommentCount} </a> </li> </ul> </div> <div class="content">${EntryBody}<h5><a href="${EntryPermaLink}"></div> </div> <div class="firstimage"> <tag:if test="${FirstImage != ''}"> <img src="${FirstImage}" /> <tag:else /> <img src="url-til-et-standard-bilde" /> </tag:if> </div> </div> <br style="clear:both;"> </tag:entrylist>

 

CSS

.entry { background-color: #transparent; font-size: 12px; font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; } body .entry { margin: 60px 0 60px 0; clear: both; } .entry img { max-width: 100%; } body .entry p { line-height: 18px; } .entry .meta ul li{ list-style: none; display: inline; margin: 0 10px 0 0px; padding: 0; color: #666; } .entry .meta, .entry .tags { font-size: 10px; clear: both; } .tekst{ float:left; width: 420px; } .firstimage { width: 150px; height: 100px; overflow: hidden; float: left; margin-left: 20px; margin-top: 24px; } .firstimage img{ height:100px; }

 

 

 

METODE 3

For å få dette resultat må du lime innbåde html- og css-kodene nedenfor. 

Bruk det forklarende-bilde øvest i innlegget som veileding, og lim in kodene under arkiv og kategori. <tag:entrylist> til </tag:entrylist> skal slettes, med andre ord sett inn koden mellom  <div id="main" class="yui-u first"><h2>${CategoryName}</h2> og <div id="side" class="yui-u">.

OBS! Om alt blir bare rot når du limer inn kodene er det sansynlig at du mangler en </div> eller har en formye...Legg igjen et spm i forumet vårt så hjelper vi deg;) 

 

Metode 3 passer til en blogg som har minst 600px bredde på #main og som har en farget bakgrunn Om du har en en veldig stor størelse på bloggen (# main), kan du enkelt gjøre innleggene (de hvite boksene) litt større ved å endre width på .jmentry





HTML

<tag:entrylist limit="1000" maxchars="200"> <div class="jmentry"> <div class="firstimage"> <tag:if test="${FirstImage != ''}"> <img src="${FirstImage}" /> <tag:else /> <img src="url-til-et-standard-bilde" /> </tag:if> </div> <div class="tekst"> <h2> <a href="${EntryPermaLink}">${EntryTitle}</a> </h2> <div class="meta"> <ul> <li>Publisert: ${EntryDate} kl.${EntryTime}</li> <li> <a href="${EntryPermaLink}#comment">Kommentarer: ${EntryCommentCount} </a> </li> </ul> </div> <div class="content">${EntryBody}</div> </div> </div> </tag:entrylist> <br style="clear:both;"> </div>

 

CSS

.jmentry { background-color: #fff; font-size: 12px; font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; -moz-box-shadow: 3px 3px 3px rgba(68,68,68,0.4); -webkit-box-shadow: 3px 3px 3px rgba(68,68,68,0.4); box-shadow: 3px 3px 3px rgba(68,68,68,0.4); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30); -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)"; } body .jmentry { overflow: hidden; margin: 0px 10px 30px 0px; height: 380px; width: 280px; clear: none; float: left; } .jmentry img { max-width: auto; } body .entry p { line-height: 18px; } .tekst{ width:95%; margin: 10px auto; } .jmentry h2 a, .jmentry h2 a:link, .jmentry h2 a:visited, .jmentry h2 a:active { color: #000;font-weight: 200;font-size: 14px;} .jmentry .content{ margin-top: 10px; } .jmentry .meta ul li{ list-style: none; display: inline; margin: 0 10px 10px 0px; padding: 0; color: #666; } .jmentry .meta, .jmentry .tags { font-size: 10px; clear: both; } .firstimage { width: 100%; height: 230px; overflow: hidden; } .firstimage img{ height: 230px; min-width: 100%; }

 

#bloggdesign #blogg #bloggno #firstimage #hjelp #desighjelp #jmwebdesign #koder #html #css #entry #bloggtips

Posisjon 13
Posisjon 12

Nytt rosa og fresht design

Dette freshe designet er inspirert av Vanessa Hudgens. Designet er lyst, vakkert og lekent og passer derfor perfekt for sommeren! 

Som med alle JM's design følger det selvfølgelig med en litten bruksanvisning for de som trenger det. Der finner du informasjon om hvordan du laster ned designet og hvordan du kan endre ting sånn som bakgrunnsfarge, menyer osv... Om du ikke finner svaret på det du lurer på i installasjonsguiden kan du legge igjen spørsmål på vårt forum.

Designet har plass til bilder på en størrelse på 600px og man kan enkelt sette inn headerbilde om man vil ha det. 

 

Dette er ett av mange gratis design som du enkelt kan laste ned ved å like oss på facebook.

 

Spesielt med dette designet er det er tatt i bruk den nye funksjonen til blogg.no firstimage så under arkiv og kategorier finner du en veldig kult oversikt over innleggen - hvor det er et kort sammendrag av tekst plus et lite preview bilde:) 

 

 

 

 

   Last ned  

 

 #bloggdesign #design #grått #hvitt #VanessaHudgens #jmwebdesign #firstimage #bloggno #sommer #fresh #gratis

Posisjon 13
Posisjon 12

Nytt rosa og fresht design



Miranda Kerr er en kjent supermodel. Det første man ser når man går inn på dette designet er header, sidemeny og hovedmeny. Først når man scroller nedover ser man innleggene. På denne måten blir header satt i fokus. Om du har lekkert header bildet som du vil vise frem er dette designet perfekt for deg. Hva annet er kult med dette designet? Sidemenyen sitter fast og følger innleggene. Kommentarfeltet er helt unikt, det må du bare se!  På grunn av at dette designet har en høy teknisk vansklighetsgraden, noe som gjør at det tar meg lenger tid å lage det, har bare PREMIUM-medlemmer tilgang til dette designet... PREMIUM medlemskap koster bare 45kr og varer i 6 månder, da har du tilgang til support og extension. (Liker du vår facebook-side kan du få designet for KUN 10KR :0 ) 

 

 

 



 

 

  Bli Medlem  DEMO

 

 NB. Du må være premium medlem for å laste ned. 

 

 #bloggdesign #design #grått #svart #MirandaKerr #jmwebdesign

 

 

 

Posisjon 13
Posisjon 12

Nytt rosa og fresht design

 

Konkurransen vinn ditt drømme design er nå avsluttet. Vinneren av konkurrasen er Yvonne. 

Yvonne skrev en veldig lang og detaljert forklaring på hvordan hennes drømme design ser ut. Yvonne's blogg steinihavet.blogg.no er en mammablogg og vi likte veldig godt hennes histore og det hun blogget om. 

Dette skrev Yvonne: 

Genial konkurranse, satser på litt vinnerlykke! Min drømmeblogg må være ryddig, og passe til bloggnavnet mitt stein i havet. Fargene børe være grå/blå toner som flyter sammen, men ikke så mye at det river i øynene. Det skal være lett å finne frem til hvor du svarer på kommentarer og mulighet for å dele innleggene på facebook, ikke bare like dem. Jeg ønsker også en meny der du kan finne frem til kategorier som er mye lest og som er relevant for det bloggen handler om. Jeg har en mammablogg med et ærlig bilde av hva det vil si å leve med små barn, så rosa er ikke en farge som passer. (Og det er vel gjerne derfor jeg ikke har gjor de helt store tiltakene for å endre design...) Det hadde også vært en klar fordel at det kom opp forslag på andre innlegg når du leser et. Og om det er mulig skulle det vært en plass på den venstrestilte sidemenyen der du kunne finne de mest leste innleggene. Så over til grunnen over hvorfor jeg fortjener dette. Jeg laget bloggen min for å dele frustrasjon og det ekte bilde med å ha et sykt barn, som nesten aldri sover. Det er sjeldent jeg får muligheten til å hvile, og hverdagen er veldig krevende. Bloggen min er heller ikke av de typiske bloggene du finner, og jeg har fått svært mange tilbakemeldinger om at det er godt å lese den for andre. Den forteller ikke bare om alle de fantastiske tingene, men også om det som er mindre fantastisk. Så krysser fingrene for at jeg kan få et nytt design til meg og alle mine lesere :)

 

Vi vil takke alle som var med i konkurranse - det var mange gode bidrag og mange flinke bloggere. Vi lovte bort 5 trøstepremier - men valgte å gi bort trøstepremie til ALLE som var med i konkurransen!!! :D

Om du var med skal du ha motatt en e-post. Om du ikke har fått mail så skriv til admin@jmwebdesign.no. 

Posisjon 13
Posisjon 12

Nytt rosa og fresht design

Lyst på nytt bloggdesign? Dette er din mulighet til å få akkurat det designet du har drømt om. Legg derfor igen en kommentar og fortell oss om ditt drømme design. Klokken 12. 7.Juli trekker vi en heldig vinner som får skreddersydd design. Det blir også delt ut trøste premier, 5 andre deltagere får premium medlemskap hos JMWebDesign. Du kan se en oversikt over våre premium design her

 

 

 

#bloggdesign #design #konkurranse #gratis

Posisjon 13
Posisjon 12

Nytt rosa og fresht design



Om du er like glad i Game of Thrones som oss har du kanskje sett denne dama her, Emilia Clarke. Hun er jo helt unikt og rollen hennes som Daenerys Targaryen i Game of Thrones er rett og slett awesome. Derfor har vi blitt inspirert av henne til å lage et helt unikt design, med et litt feminit preg, men fargene kan jo enkelt endres.  Designet er tilpasset all skjerm typer og kommer med en detaljert bruksanvisning sånn at du kan selv endre farg, lenker, menyer ogsv... 

På grunn av at dette designet har en høy teknisk vansklighetsgraden, noe som gjør at det tar meg lenger tid å lage det, har bare PREMIUM-medlemmer tilgang til dette designet... PREMIUM medlemskap koster bare 45kr og varer i 6 månder, da har du tilgang til support og extension. (Liker du vår facebook-side kan du få designet for KUN 10KR :0 ) 

 

 

 

 

 

  Bli Medlem  DEMO

 

 NB. Du må være premium medlem for å laste ned. 

 

 #bloggdesign #design #rosa #EmiliaClarke #jmwebdesign

 

 

 

Posisjon 13
Posisjon 12

Nytt rosa og fresht design

 

Det finnes mange facebook grupper hvor man kan promotere bloggen sine ved å poste innlegg. Det er en gruppe som jeg kan spesielt anbefale: https://www.facebook.com/groups/blogglesere/

Facebook gruppen "Få lesere" er laget av Mikkal som er supper flink. Gruppen har over 600 medlemer og vokser raskt. Dette er en bra måte å promotere innleggene sine, plus at man kommer over mange andre spennende blogger. 

Cover Photo

Posisjon 13
Posisjon 12

Nytt rosa og fresht design



Vi vil gjerne vite hvordan ditt perfekte design ser ut. Er det svart, hvitt eller kanskje blått? Er skriften tykk og stor eller kanskje liten og tynn? Har det kanskje sidemenyen på venstre side eller ikke sidemeny i det hele tatt? Ligner det på et annet design du liker? Søk gjerne på google etter design inspiration og send oss en lenke til ditt drømme design eller prøv å kom med en beskrivelse. 

 

 

#bloggdesign #design #konkurranse #gratis

Posisjon 13
Posisjon 12

Nytt rosa og fresht design



Dette er et kult Jennifer Lopez design. Med facebook og twitter buttons på siden. Du kan skifte probilde til noe du ønsker og under er det instagram bilder. Designet er stilfult og har rene og enkle linjer. 

På grunn av at dette designet har en høy teknisk vansklighetsgraden, noe som gjør at det tar meg lenger tid å lage det, har bare PREMIUM-medlemmer tilgang til dette designet... PREMIUM medlemskap koster bare 45kr og varer i 6 månder, da har du tilgang til support og extension.

 

 

 

 

 

  Bli Medlem  DEMO

 

 NB. Du må være premium medlem for å laste ned. 

 

 #bloggdesign #design "#rosa

 

 

 

Posisjon 13
Posisjon 12

Nytt rosa og fresht design


Nå kan du se premium designet Michelle Williams live her -> michellewilliamsdesign.blogg.no/

Se også www.markdesign.blogg.no/ og kendalldesign.blogg.no/

 

 Vi oppdatter og går igjennom designene våres og den forbinnelsen legger vi også til blogg.no's reklame. Ryktene sier at blogg.no har blitt strengere når det kommer til å fjerne reklamene som de har lagt på bloggene - noe vi tidligere har gjort og derefor kommer vi til å legge til reklamen på alle våre templates.

Om det er noen som tiltross for det lurer på hvordan man kan fjerne reklamen finner du et innlegg om det i forumet -> http://jmwebdesign.no/index.php/no/forum/blogg-no/370-fjerne-reklame#404

 

 Michelle Williams

 

#design #bloggdesign #michellewilliams

Posisjon 13
Posisjon 12

Nytt rosa og fresht design




Rød Skygge

p { text-shadow: 2px 2px #ff0000;}

 

Vanlig skygge

CSS: p {text-shadow: 2px 2px #666; }

 

Stor skygge

p {text-shadow: 5px 5px #666;}

 

 

Liten skygge

h3 {text-shadow: 1px 1px #ccc; }

 

 

RGB skygge

 h3 {text-shadow: 2px 4px 3px rgba(0,0,0,0.3); }

 

 

3D text

 

h3 {

text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);

}

 

 

 

Glowing text 

 

div {background-color:#210B61;}

 

h3 {text-shadow: 0px 0px 6px rgba(255,255,255,0.7); color:#000; }

 

 

Letter Press

 

div {background-color:#222;}

 

h3 { color: rgba(0,0,0,0.6); text-shadow: 2px 2px 3px rgba(255,255,255,0.1); }

 

 

Inset text

 

div {background-color:#eee;}

 

h3 {

background-color: #666666;

-webkit-background-clip: text;

-moz-background-clip: text;

background-clip: text;

color: transparent;

text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;

 

 #bloggdesign #hmtl #css #koder #designhjelp #designtips #skrift #tekst #skygge  #glow #3d #letterpress 

Posisjon 13
Posisjon 12

Nytt rosa og fresht design



Dette innlegget er en del av spalten "20 Design Tips" - hvor vi publiserer ting som det er nyttig å vite om bloggdesign og ting du lurer på. Forrigje innlegg var en introduksjon til tekst og skrift som kan være spesielt nyttig å lese for de som er nye til webdesign.

I den andre delen om «tekst og skrift», skal vi se på hvordan man trikser med skrifta - italics, understreke, størrelse, linje høyde, STORE/små bokstaver og skygge.

 

Skrift Størrelse

I forrige innlegg snakket vi en del om skrift størrelse (det kan du lese her).

 

h1 {color: red;}

 

<h1>Velkommen</h1>

h2 {color: green;}

 

 <h2> Velkommen</h2>

h3 {color: purple;}

 

 <h3> Velkommen</h3>

h4 {color: blue;}

 

 <h4> Velkommen</h4>

 

 

Line-height

For å forstå hva line-height er kan du tenkte det et papier med linjer på, slik man har i kladdebøker. Det ser jo best ut om det man skriver har riktig størrelse slik at det kan passe inne i linjene i kladdeboka. Skriver man med veldig liten skrift blir det veldig mye mellom hver linje og skriver man med veldig stor skrift på små linjer er det jo ikke plass. Når man designer websider gjelder det samme prinsippet. Må bør tenke på at alle paragrafer og elementer bør starte og ende på en linje slik at det ser organisert ut. Om du bruker skrift størrelse 34px eller 13px og line-høyden er 6px vill ikke elementene stå på linjene fordi 6px går ikke opp i 34px eller 13px. Dette kan du se på bilde nedfor:

 





For at å lage en webside som ser riktig bra ut må du bestemme deg for hvilken proporsjoner du skal bruke. Hvis du har line-height: 6px som utgangspunkt må du velge skrift med størrelsen 6px, 12px, 18px, 24px, 30px, 36px, osv. De som er gode i matte skjønner tegninga. På eksemplet nedfor ser du hvordan det bør se ut: 


 

 

Viktig å husk er at line-height må også passe til størrelsen på teksten hvis ikke kan teksten ende opp med å flyte oppi hverandre. Dette er spesielt viktig om du har stor tekst størrelse på mye tekst ? om det bare er en linje går det greit. Hvis tekst størrelsen din er på 12px bør line-height være på 12px ? du kan også ha line-height på 18px før å få litt plass mellom linjene. Hvis du har skrift størrelse på 30px bør du ha line-height på minst 36px hvist ikke blir det veldig trangt mellom linjene.

 

Eksempel CSS ? Line-height:

p {

line-height:30px;

font-size: 24px;

}

 

Dette vi har vært inne på nå gjelder noe som blir kalt for base-line, om man også skal få elementene til å legge på linje med hverandre må man også huske å sette rriktig størrelse på margin og padding. Om noen er interessert i dette kan jeg godt skrive mer om det.

 

Skrift Stil

Skrift stil brukes først om fremst hvis man vil ha kursiv tekst. Resultat P { Font-style: italics; } kursiv skrift P{ Font-style: normal; } Normal skrift

 

CSS

Resultat

p { font-style: italics; }

Kursiv skrift 

p { font-style: normal; }

Normal Skrift

   

 

Fet skrift

For å få fet skrift effekt bør du bruke font-weight.

CSS

Resultat

p { font-weight:400; }

Normal Skrift 

p { Font-weight: normal; }

Normal Skrift

 p { Font-weight: bold; } Fet Skrift
 p { Font-weight: 700; } Fet Skrift

 

 

STORE og små bokstaver

CSS

Resultat

p { text-transform:uppercase; }

STORE BOKSTAVER

p { text-transform:lowercase; }

små bokstaver

 p { text-transform:capitalize; } Store bokstaver på først bokstav i ny setning. Når du beggynner en ny settning. Blir første bokstav stor.

 

 

Tekst dekorasjon 

 p {text-decoration:underline; }Strek under

CSS

Resultat

a { text-decoration:none; }

Lenke uten understrek


p { text-decoration:overline; }

Strek over

 p {text-decoration:line-through; } Strek igjennom
 p {text-decoration:underline; } Strek under

 

Tekst skygge

 

Vanlig skygge

CSS: p {text-shadow: 2px 2px #666; }

 

3D text

 

h3 {

text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);

}

 

Se flere skygger her ->  tekst og skygger

 

 

#bloggdesign #hmtl #css #koder #designhjelp #designtips #skrift #tekst #skygge  #h1 #understrek #baseline #effekter #bloggtips

Posisjon 13
Posisjon 12

Nytt rosa og fresht design



Det er mye vi kan få ut av skriftetyper og det er mange måter å manipulere skrifta med css. Det mest logiske spørsmålet å stille først er hvordan man endrer skrifta på ulike deler av bloggen...svaret finner vi når vi ser nærmere på a, p, h1, h2, etc.

 

Du kan enkelte bestemme størrelsen på teksten ved å skrive i css kodene: {font-size:14px;}

For overskifter bør du bruke <h1>, <h2>, <h3>, <h4> eller <h5>

<h1> er størst og <h5> har den minste størrelsen.

For paragrafer og størrele deler med tekst bør du bruke <p>

 

Eksempel HTML - Overskrift vs. pragraf:

<h1>Sommer og sol</h1>

<p>Om sommeren er det veldig fint vær. Da skal jeg sitte ute å nyte solen og bli brun. Om sommeren elsker jeg å spise is ? jeg elsker også å grille og bade. Uten is, grilling og bading blir det ikke sommer</p>

 

 

 I forrige innlegg forklarte vi hva divs er og hvordan bloggen din er bygd opp (det kan du lese her). Dette må vi prate litt mer om her.

I standard templates fra blogg.no har sidemeny vanlig hvis <h3> som størrelse på overskrift.

 

Eksempel CSS- h3:

h3{

color:#000;

font-size:18px;

font-weight:bold;

text-transform: uppercase;

text-decoration:underline;

}

 

Men husk at hvis du bare skriver h3 gjelder dette alle h3-taggene du har på siden. Om du bare vill redigere h3 i sidemenyen må du spesifsiere det. 

Eksempel CSS - h3 innenfor sidemenyen:

# side h3{

color:#000

}

 

Det samme gjelder i andre tilfeller. I html kodene bruker man <a> </a> for definere en lenke, hvis du vill style lenke med css skriver man bare a. Dette vill endre alle lenke på hele bloggen din. Om du bare vill endre lenke innefor et områd, for eksempel <div class="meta"></div>, må du oppgi .meta i css kodene dine før du skriver a. Da forteller du nettelseren din at alle <a> innen for <div class="meta"> skal ha en spesill stil eller farge. 

 

 

Eksempel CSS - a (lenker):

a {

text-decoration:none; color:#666;

}

 

Eksempel - a innenfor meta:

.meta a {

text-decoration:underline;

color:#666;

}



Hvis du går til rediger -> maler -> forside, innlegg, kategorier og arkiv -> og finner meta. På bloggen din finner du <div class="meta"> på tre steder; under tittle på innlegget, under innlegg og i kommentarfeltet. Så hvis du endrer utseende på meta må du huske at å da endrer du også utseende på meta i kommentarfeltet.

 

 

Om du bare vill endre meta som er under tittelen på innlegg er det enkleste å gi <ul> et navn, for eksempel first (men det kan være hvilken som helst navn bare pass på at det ikke blir brukt allerede). Da kan du enkelt endre utsende på bare dette område ved hjelp av CSS. 

 

Eksempel HTML - navn på ul:

<ul class="first">

 

Eksempel CSS - farge på lenkene innenfor ul first:

 .first ul a{

background-color:#000;

color:#fff;

padding:5px;

}

Resultatet ser du på bilde nedefor:




Som du ser har du bare endre fargen på lenkene som du finner innen for ul.first. Dato og klokkeslett har ikke en lenke så om du vil endre de må du tilbake til html kodene og sette dato inni <li><a> </a></li>:

 

 

Lurer du på noe mer legg gjerne igjenn spørsmål her eller på forumet. Forsettelse følger i neste innlegg.

 

 

 

#bloggdesign #hmtl #css #koder #designhjelp #designtips #sidemeny #h3 #skrift #tekst #meta

 

Posisjon 13
Posisjon 12

Nytt rosa og fresht design



Nå kan du se premium designet Kendall Jenner live her -> kendalldesign.blogg.no/

Se også www.markdesign.blogg.no/

 

Vi oppdatter og går igjennom designene våres og den forbinnelsen legger vi også til blogg.no's reklame. Ryktene sier at blogg.no har blitt strengere når det kommer til å fjerne reklamene som de har lagt på bloggene - noe vi tidligere har gjort og derefor kommer vi til å legge til reklamen på alle våre templates.

Om det er noen som tiltross for det lurer på hvordan man kan fjerne reklamen finner du et innlegg om det i forumet -> http://jmwebdesign.no/index.php/no/forum/blogg-no/370-fjerne-reklame#404

 

 

#design #bloggdesign #kendall 

Posisjon 13
Posisjon 12

Nytt rosa og fresht design




 

Vinn ditt drømme design! 

Vi vil gjerne vite hvordan ditt perfekte design ser ut. Er det svart, hvitt eller kanskje blått? Er skriften tykk og stor eller kanskje liten og tynn? Har det kanskje sidemenyen på venstre side eller ikke sidemeny i det hele tatt? Ligner det på et annet design du liker? Søk gjerne på google etter design inspiration og send oss en lenke til ditt drømme design eller prøv å kom med en beskrivelse. 

 

For å bli med i konkurransen må du legg igjen en kommentar på vår facebook-side - TRYKK HER 

I kommentaren bør du skrive litt om ditt drømme design og kanskje litt om hvorfor akkurat du fortjener å vinne et skreddersydd design. Viktig at du husker å skrive e-post adressen din sånn at vi kan kontakte deg om du vinner.

Konkurransen avsluttets klokken 12.00 - 7.juli 




 

#design #bloggdesign #konkurranse #vinn

Posisjon 13
Posisjon 12

Nytt rosa og fresht design




Gratis extensions er nå lagt ut. Du kan laste dem ned GRATIS ved å like oss på facebook. Få en oversikt over alle gratis extensions her

GRATIS extensions tilgjennelig i dag er: to menyer, et kommentarfelt og iconer. Flere gratis extensions vill bli lagt ut snart, men du kan også oppgradere til PREMIUM for å få tilgang på flere. 

 

 

 

Posisjon 13
Posisjon 12

Nytt rosa og fresht design



Mark Zuckerberg, inspirasjonen bak det nye designet fra JMwebDesign. Dette designet setter profil informasjonen din i fokus. Dette designet har et Facbook-lignende layout, fordi Mark Zuckerberg vet best hva som funker.

Designet har en header på 750px, med profil bildet nedert til venstre for header slik som på facebook. Under header er blogg.no profil informasjonen din plassert, her kan du også legg til litt ekstre informasjon om deg selv. Det er to menyer på bloggen, en øverst som lenker til alle kategoriene dine og en under header som lenker til facebook, twitter, bloglovin. Isteaden for at innleggen er plassert nedover etter hverandre, kan du nå mer oversiktlig bla igjennom innlegg ved hjelp av content slider. Det beste er du tester det ut selv på markdesign.blogg.no

 

På grunn av at dette designet har en høy teknisk vansklighetsgraden, noe som gjør at det tar meg lenger tid å lage det, har bare PREMIUM-medlemmer tilgang til dette designet...

Oppgrader medlemskap i dag! 

Ps. Husk å sjekke ut logg inn-siden for rabatter og tilbud. 

 

 

Posisjon 13
Posisjon 12

Nytt rosa og fresht design



Definere DIVs med CSS

Nedenfor finner du en oversikt over andre nyttige CSS koder. CSS kodene er alltid på Engelsk, men selv om man får de oversatt eller snakker bra engelsk kan det være vanskelig å forstå hvordan de fungerer. Les den norske forklaringen som du finner i tabellen under, men prøv også å eksperimentere deg frem til ønsket resultat.

 

CSS

Eksempel

Norsk forklaring

Height

Height: 100px;

Høyde

Width

Width: 200px;

Bredde

Float

Float: right;

Høyre eller venstre stilt.

Margin

Margin: 10px 5px 10px 5px;

Margin: top left bottom right;

Marg. Som en marg i en bok. Bruk margin for å flytte elementet piksel for piksel 

 

Margin: 10px;

Marg I alle retninger.

 

Margin-left: 10px;

Flytter div?en 10 piksel til høyre

Padding

Padding: 10px 5px 10px 5px

Ganske likt som margin, men flytter ikke div'en, bare lager en usynlig ramme inne i div'en.

Position

Position: abosulte;

Position: fixed;

Position: relative;

Noen ganger må man definere posisjonen på elementet for at css kodene skal virke. Position: relative er normal posisjon. Hvis du velger position: fixed låser elementet seg.

Border

Border: solid 2px #eee;

Ramme/kant rundt hele elementet. Du kan velge mellom solid, dotted eller slashed. 2 px er tykkelsen på rammen og #eee er fargen.

 

Border-right: solid 2px #eee;

Kant bare på høyre siden.

 Box-shadow

box-shadow:    3px 3px 5px 6px #ccc;

Skygge. For en mørkere skygge bytt ut #ccc med #000.

 

Posisjon

Plassering av elementer er veldig viktig. Som du ser på webkartet er main og side ved siden av hverandre. Det første kravet som må oppfylles for at to elementer kan plasseres ved siden av hverandre er at det er plass til begge. Hvis div id wrapper er 900px, kan div id main være 600px og side være 300px. For å få litt mellomrom mellom dem bør side være 250px. Det andre kravet er at du fortelle element at det skal dele plass med et annet. Derfor må du fortelle main at den skal på venstre siden , og side at den skal til høyre.

 #main{

float:left;

}

#side{

float:right;

}

Om du vill flytte en div et konkret antall piksel kan du bruke margin (se tabell). Margin kan også brukes for å midtstille et element. Da skriver man at margin til venstre skal automatisk stille inn:

#wrapper{

margin: 0px auto;

}

Skygge

Hvis du ønsker skygge rundt et element må du bruke box-shadow. Men for at at forskjellige nettlesere skal lese koden må du bruke hele koden under:

.entry{

-moz-box-shadow: 3px 3px 5px 6px #ccc;

-webkit-box-shadow: 3px 3px 5px 6px #ccc;

box-shadow: 3px 3px 5px 6px #ccc;

}

 eller en mørkere skygge: 

.entry{

-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);

-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);

box-shadow: 5px 5px 5px rgba(68,68,68,0.6);

filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);

-ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";

zoom: 1;

}


Rundt Kant

Hvis du ønsker rundt kant kan du bruke koden under. Hvor høyere verdi hvor runder kanten blir, 3px er ikke så rå rundt, 50px er veldig rundt. Om du vil lage en sirkel bør radius være halvparten så stor som bredden på elementet. Du kan bruke denne hjemmesiden for å finne riktig radius: http://border-radius.com/

.entry{

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

}

 

Oversikt over alle tutorials i dennespalten finner du her. Om det er noe du lurer på som ikke er på listen legg igjenn en kommentar eller nå oss på twitter (@jmwebdesignno) eller skriv på facebook.com/webdesignbyJM  

 

#bloggdesign #hmtl #css #koder #designhjelp #designtips #wrapper #layout 

Posisjon 13
Posisjon 12

Nytt rosa og fresht design

Dette innlegget går igjennom grunnleggende HTML and CSS tips. Om du er usikker på hvordan du skal redigere bloggen din har vi noen tips som skal gjøre det enklere å starte. Dette innlegg fokuserer hovedsakelig på divs. Divs er selve byggeblokkene som tilsammen bygger opp hjemmesiden din. Som blogg.no bruker har du sikker sett divs som er kalt wrapper, main, entry, side, etc... Les videre hvis du vil vite mer om deres funksjon og hvordan man kan endre farge, høyde, bredde, ramme, skygge eller form på en div?


 

Layout og oppbygning

Når du forstår forholdet mellom HTML og CSS har du grunnlaget for å lage allslags design. Det første du må forstå er hvordan en HTML-side er bygd opp. En HTML-side begynner alltid med informasjon som forteller nettleseren din hvordan den skal lese dokumentet. Deretter finner du head-tagg, <head></head>. Innenfor head-taggen er det lenker til eventuelle andre dokumenter som HTML-siden er koplet til, som for eksempel et eller flere CSS-dokumenter. Selve innholdet som vil bli vist på bloggen din finner du mellom <body></body>.

 

 

HTML Tags

HTMLdokumenter er består av simpel tekst og tags. Tags beskriver innholdet i dokumentet. For eksempel, form-taggen <form> forteller nettlesern din at her er det et skjema (eks. kontaktskjema). Navnet på taggen står alltid inni så kalte krokodilletegn <>. HTML taggene kommer i par, slik som <p> og </p>. Den første taggen markere en start og den siste marker en slutt. Om du skriver <h1>, men glemmer å skrive </h1> kommer all tekst etter det til å være i stor skrift størrelse.

 

Div Tags

Divs (<div>) er også en type tag. I motsetning til <p> taggen som definere en paragraf definerer div-taggen en hel seksjon, liten eller stor. Div taggen brukes til å gruppere en eller flere elementer sammen slik at man kan bruke CSS koder til å designe de. Vi har to forskjellige div-tags; id og class. Div id brukes til å designe større områder. Div class brukes til å designe områder innenfor en div id. Div class kan brukes flere ganger, mens div id vanligvis bare brukes en gang. Både div id og class har spesielle navn for å skille de fra hverandre. Du har for eksempel div id="side", vanligvis bruke til å definere et område på høre eller venstre side av innleggene din.

 

Linken mellom HTML og CSS

For å definere en tag som for eksempel <body> i CSS skriver man body{ }. For å definere en div id, som for eksempel wrapper skriver man: #wrapper { }. For å definere div class, som for eksempel side skriver man: .side { }. Se tabell nedenfor for mer informasjon.

HTML TAGS

CSS

<body>

<form>

<p>

<h1>

Body{ }

Form { }

P { }

H1 { }

<div id="wrapper">

<div id="side">

<div id="footer">

#wrapper { }

#side { }

#footer { }

<div class="entry">

<div id="meta">

<div id="breadcrumbs">

.entry { }

.meta { }

.breadcrumbs { }


 

La oss fokusere på <div id="side"> som et eksempel. Ved bruke av CSS koder kan du definere bakgrunn, høyde, bredde, osv.

#side {

width: 200px;

background-color: #eee;

}

Innefor div id="side" taggen er det jo selvfølgelig mye annet informasjon. Hvis du for eksempel vil endre <h3> overskriften, kan du endre kun <h3> som befinner seg inne i side taggen.

#side h3{

color: #666;

}

 

Neste >> Del 2: Definere DIVs med CSS

 

Oversikt over alle tutorials i denne spalten finner du her. Om det er noe du lurer på som ikke er på listen legg igjenn en kommentar eller nå oss på twitter (@jmwebdesignno) eller skriv påfacebook.com/webdesignbyJM  

 

#bloggdesign #hmtl #css #koder #designhjelp #designtips #wrapper #layout 

Posisjon 13
Posisjon 12

Nytt rosa og fresht design

 Unikt PREMIUM design klar for nedlasting!

Kendall Jenner designet er laget spessielt for deg som er glad i enkle men moderne design. Innleggene har har en bredde på 920px så du har plass til store bilder. Sidenmeny er flyttet ned til footer for å ikke ta opp plass. Designet består av flere kule grafiske elementer, slik som de dekorative rammene som markere overgang fra en seksjon til en annen. !

Premium medlemskap kommer med mange fordeler. Vi hjelper deg med å redigere bilde ditt ved å klippe ut bagrunnen slik at designet blir helt likt.

 

 

 

  Medlem?  DEMO

 

Posisjon 13
Posisjon 12

Nytt rosa og fresht design

Dette designet er rålekkert og kanskje et av de aller kuleste. Dette er en oppgradering av "the Michelle Williams design". Dette designet er ende tøffer, det har en svar bakgrunn som rammer inn den lysegrå bloggen. Antall kommentar vises i en kul side-banner og kommentarfeltet er annerledes og kult.

På grunn av at dette designet har en høy teknisk vansklighetsgraden, noe som gjør at det tar meg lenger tid å lage det, har bare PREMIUM-medlemmer tilgang til dette designet... PREMIUM medlemskap koster bare 45kr og varer i 6 månder, da har du tilgang til support og extension.

 

 

 Michelle Williams

 

  Bli Medlem  DEMO

 

 NB. Du må være premium medlem for å laste ned. 

 

Michelle Williams

 

 

 

Posisjon 13
Posisjon 12

Nytt rosa og fresht design

 
"The Michelle Williams Design" var tidligere kun tilgjenelig for PREMIUM-medlemmer, nå er det tilgjenlig for ALLE! Alt du trenge å gjøre er å like oss på facebook.

Designet har en kul og annerledes bakgrunnsfarge - men du kan selvfølgelig endre denne fargen. Når du laster det designet kan du lese mer om hvordan du kan redigere designet. Dette er ett av mange gratis design som du enkelt kan laste ned ved å like oss på facebook

 

 

 

Michelle Williams

 

 Last ned  DEMO

 

NB. For å laste ned må du like oss på facebook

 

Posisjon 13
Posisjon 12

Nytt rosa og fresht design



Natalie Portman Designet er veldig elegant og ryddig design. Designet er hvitt og grått noe som gjør at bildene dine blir fremhevet. Det er også et hint av rosa i designet som gjør det litt feminint - men dett er det mulig å redigere. Når du laster det designet kan du lese mer om hvordan du kan redigere designet. Dette er ett av mange gratis design som du enkelt kan laste ned ved å like oss på facebook

 

 

 

 

 

   Last ned  DEMO

 

NB. Lik oss på Facebook for å laste ned.

 

 

 

 

 

 

Posisjon 13
Posisjon 12

Nytt rosa og fresht design

 
Dette designet er inspirert av Colin Ferrell. Det er designet er består av forskjellig grå-nyanser. Det er to sidemenyer og derfor mye plass til widget/reklame. Du kan selv enkelt redigere designet slik at det og tilpasset det slik at det passer for deg. Om du ikke finner det svarer på det du lurer på i installasjonsguiden som du får når du laster ned designet kan du legge igjen spørsmål på vårt forum. Dette er ett av mange gratis design som du enkelt kan laste ned ved å like oss på facebook

 

 


 Last ned  DEMO

 


Posisjon 13
Posisjon 12

Nytt rosa og fresht design




Det er mer til en bakgrunnsfarge enn du tror. Når vi snakker om bakgrunnsfarge i denne sammenhengen tenker jeg ikke bare på hovedfargen på siden din, altså body. Jeg tenker på hele siden din - body, wrapper, main, side, etc.

 

1.1 BACKGROUND-COLOR

Kodene for bakgrunnsfarge er ganske enkle: background-color: #EEEEEE.  #FFFFFF = hvit, #000000 = svart, #666666 = grått, #transparent = gjennomsiktig. For flere fargekoder besøk html-color-codes.info/. Trikset med background-color er at det bør matche de andre fargene på siden din som skrift, lenker, og andre elementer. Hvis du bruker mange sterke farge kan dette bli vanskelig, for veiledning og inspirasjon bør du prøve farge-paletter som du finner på colorcombos.com eller colourlovers.com.

 



Bilde 1.1: colourlovers.com

 

 

KODER

 

 

Bakgrunnsfarge:

 

Background-color: #FFFFFF;

 

 Farge på skrift:

Color: #000000;

 


 

 

 

1.2 GRADIENT BACKGROUND-COLOR

 

 


 

Ensidige farger kan bli litt kjedelig. Noen ganger er det derfor fint med farger med litt nyanser. Gradient farger kan brukes for å gå fra en farge til en annen. Enten fra høyre til venstre (se bilde, hvordan grått blir til hvitt), eller fra top til bunn, men det kan også ta andre former.

Bilde 1.2.1: Gradient Grå

 


Bilde 1.2.2: Gradient blå

KODER

Gradient blå:

 

background-color: #05336B; 
background: -webkit-gradient(linear, left top, left bottom, from(#3087D7), to(#084B9C));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3087D7', endColorstr='#05336B'); /* for IE */
background: -moz-linear-gradient(top, #3087D7, #05336B); /* for firefox 3.6+ */


  


Forklaring koder: Background-color: #05336B er selvfølgelig selve bakgrunnen, om alt funker som det skal har egentlig ikke denne noe å si, men i noen nettleser vises ikke gradient-effekt og derfor trenger vi background-color. De tre siste linjene background, filter, background, si akkurat det samme, men du bruker forskjellig språk sånn at de fleste nettleserne skal forstå. Men all er basert på det samme prinsippet: fargen går fra #3087D7 til #084B9C. Fra lyst til mørket. Du kan bytte ut disse farge-kodene med dine egen. For eksempel kan du isteden skrive fra (#EEEEEE) til (#666666), altså fra lysegrått til mørkegrått.


 

 

Som sagt det finnes gradient-koder som lager andre former. Det mest enklest er å bruke for en gradient-generator som -> gradientbackgroundmaker. Her kan du lage gradient farger enkelt og greit.


 




Bilde 1.2.3: Gradient farge lager

 

 

 

1.3 BACKGROUND-IMAGE

CSS: background-image: url(?http://www.dinadresse.no?);

 

Ikke alle våger å være kreative når det kommer til bakgrunnsbilde for det kan let bli kaos og mye rot. Derfor holder mange seg til å bruke enkle bakgrunnsfarger. Men med noen enkle tips og triks kan få orden på kaoset. Med basiskunnskap om css-koder relevant for bakgrunn kan man enklere få kontroll over bildene slik at designet kan bli ryddig og fint og samtidig være kreativt og fargerikt! For eksempel kan vi bruke mønster, de trenger ikke å være så radikale de kan være enkle. Men hva gjør vi når vi ikke kan lage de selv i photoshop? Da finner vi de på nettet. http://www.patterncooler.com/

Backround-repeat

Når du bruker background-image står du ovenfor et par valg. Det første valget er relatert om du vil at bakgrunnen skal repeteres (altså, om samme bilde skal vises flere ganger slik at det fyller opp skjermen) eller om det bare skal vises enn gang.

 

EKSEMPEL

Om du vil at bilde skal repeteres skjer det automatisk hvis bilde ikke er stort nok til å fylle opp skjermen. La oss forestille oss at størrelsen på #header er 900px i lenge x 400px i høyde. Hvis bilde du setter som bakgrunn, rosaheader.png, bare er 700px i lengde x 300px i lengde vill bilde repeteres slik at det fyller ut de 300px som rosaheader.png  ikke dekker (se bilde 1.3.1).  Så hvorfor ikke bare endre størrelsen på  #header? Det kan hende at for enn eller annen grunn at du vil at størrelse på #header skal være 400px, men ikke vill at rosaheader.png skal dekke hele (se bilde 1.3.2)..  Løsningen er da background-repeat: no-repeat.

 

 


Bilde 1.3.1: rosaheader.png - repeat 


 


Bilde 1.3.2 rosaheader.png - no-repeat 

 


KODER

Om du vill at bilde ikke skal repeteres:

Background-repeat: no-repeat;

Om du vill at bilde kopiere seg selv uendelig skrive:

 

Background-repeat: repeat;

 

Om du vil at bilde skal repeteres horisontalt →:

Background-repeat: repeat-x;

 

 

Om du vil at bilde skal repeteres vertikalt  ↓:


Background-repeat: repeat-y;

 

 

Background-attachment

Det andre valget du må ta er om du vill at bakgrunnen skal røre på seg eller om den skal stå stille. Dette er mest relevant for hovedbakgrunnen, altså body. Og sannsynligvis bare nyttig hvis du bruker background-repeat: no-repeat og hvis du har et stort bilde.

 

EKSEMPEL

Si at at du har et veldig stort bilde av havet som du vil bruke som bakgrunnsbilde på siden din. Bilde har størrelsen 2000 x 3000px noe som betyr at selv på store skjermer som en 18 tommers vil bilde dekke hele skjermen. På en liten skjerm, som en 14 tommers, vil det ikke være mulig å se hele bildet. den høyre siden av bilde vill bli kuttet av og man må scrolle (bla) nedover for å se bunnen av bilde. Dette er typisk standard innstilling av background-attachment, som kalles scroll. Problemet med scroll er at det er ikke så mange bilder som er har en høyde på 3000px og større, men det er mange er mange ganger selve bloggen har en større høyde, derfor vil ikke et bilde dekke hele bloggen med standard innstilling. Med standard innstilling vil bilde ta slutt før man har bladd helt ned til footer. Som du ser på bilde 1.3.3, er bilde litt lite og det dekker ikke hele skjermen. Løsningen er at man låser bilde fast, slik at det ikke beveger på seg. Så når du scroller nedover bloggen, innlegg etter innlegg, vil bilde stå helt stille. På bilde 1.3.4 er background-attachment satt til fixed, slik at bilde er konstant. 

 

Bilde 1.3.3: Background-repeat: no-repeat;

Bilde 1.3.4: Background-repeat: no-repeat; + Background.attachment: fixed;

                                         

 

 

 KODER

Om du vill at bilde skal bevege på seg (standard/automatisk innstilling):


Background-attachment: scroll;

 

Om du vil at bilde skal stå stille:

Background-attachment: fixed;

 

 

#bloggdesign #hmtl #css #koder #designhjelp #designtips #bakgrunn #farge

Posisjon 13
Posisjon 12

Nytt rosa og fresht design




I går kveld var jeg litt redd for at vi ikke skulle få en vinner, for det var likt mellom fem av designene. Men heldigvis kom det inn noen flere stemmer i går kveld, og Rihanna tok ledelsen.  Under templates har jeg 8 GRATIS design og 18 PREMIUM design, det koster 45kr å få tilgang til PREMIUM designene for de tok det litt mer tid å lage....men så lovte jeg jo dere at det PREMIUM designet som flikk flest stemmer innen Søndag 10. Mars klokken 12, skulle dere få GRATIS. Rihanna vant iallefall, kan ikke akkurat si overlegent, Rihanna fikk en stemme mer enn Bruno Mars og Beyonce. Resultatet kan du se nedenfor: 

 

 

RIhanna kan du nå laste ned GRATIS, alt du trenger å gjøre er å gå til TEMPLATES -> BLOGG.NO -> GRATIS TEMPLATES 

! Husk at du må logge inn for for å laste ned design, du trenger ikke å registrere deg du kan logge inn med facebook, twitter eller google.




 

RIHANNA

 

  


 Last ned  DEMO

 

 NB. Lik oss på Facebook for å laste ned.

 



Posisjon 13
Posisjon 12

Nytt rosa og fresht design



Hei og velkommen til denne nye 
spalten om ting som det er nyttig å vite om blogg design. De første artiklene kommer til å gå igjennom grunnleggende css/html, men jeg skal love at det også kommer noen kule og litt mer avanserte tips innemellom. Fokuset er spesielt på blogg.no blogger, men det fleste tipsene er generelle. Følg med og hold deg oppdatert via twitter (@jmwebdesignno) og  facebook.com/webdesignbyJMInnleggene blir postet hver Onsdag og Lørdag. 

Nedenfor kan du lese om hva du har i vente:

 

  1. BakgrunnsfargeDet er mer til en bakgrunnsfarge enn du tror. Farge-paletter, farge nyanser, bakgrunnsbilde som repeteres og bakgrunnsbilde som ikke beveger på seg, osv... LES MER HER

  2. DIVs: Hva er en div? Hva er egentlig wrapper, main, entry, side, etc? Lær å bruke css slik at du kan kontrollere html-kodene dine. Her går vi igjennom grunnleggende ting, som hvordan man setter høyde, bredde, lager ramme, flytter en div til høyre, venstre eller midten. Pluss hvordan man legger på skygge og rundt kant.  LES MER HER
     
  3. Tekst og Skrift: Det er mye vi kan få ut av skriftetyper og det er mange måter å manipulere skrifta med css. Det mest logiske spørsmålet å stille først er hvordan man endrer skrifta på ulike deler av bloggen...svaret finner vi når vi ser nærmere på  a, p, h1, h2, ovs. KOMMER SNART
     
  4. Tekst og Skrift  Effekter: I den andre delen om «teskt og skrift», skal vi se på hvordan man trikser med skrifta - italics, understreke, størrelse, linje høyde, skygge, STORE og små bokstaver.
     
  5. Tekst og Skrift Typer: I siste del av «tekst og skrift» skal vi fokusere på ulike skrifttyper. Vi starter med de «trygge» internett skriftene og avslutter med @fonts
     
  6.  Flytt musen over linken og se hva som skjer: Enten det er tekst eller bilde så finnes det mange måter å manipulere en link på med hover effekt! Du kan få teksten til å hoppe og sprette, endre farge, flytte på seg, snurre og endre størrelse.
     
  7. Sidemeny: La oss lage en liten utfordring i dette innlegg. La oss se hvor mange måter det er mulige å endre sidemenyen. Kom allerede med forslag hvis du har noen, holla at me på twitter (@jmwebdesignno) eller skriv på facebook.com/webdesignbyJM. Allerede nå tenker jeg at vi kan lage en standard sidemeny, hvor profil, kategori  arkiv er delt opp i hver sin blokk. Så tenker jeg vi kan lage en virkelig avansert en, med photoshop bilder. Etter det kan vi lage en liten en med droppdown arkiv og kategori. Og kanskje en som vi flytter opp til header, en som ser litt ut som profil informasjonen din på facebook.
     
  8. Enkle menyer:  En vanlig vertikal meny er det ganske enkelt å lage. Det blir mer komplisert når du prøver er sette linkene etter hverandre på en linja, men når man først forstår det grunnlegende kan vi øke vanskelighetsgraden enda mer og legge til «buttons» for å gjøre det mer interessant.
     
  9. Menyer som faller ned ? A.K.A dropdown menus. De er litt avanserte og krever ofte javascript.
     
  10. Meta: Meta er den lille linjen under bloggtittel hvor det står antall kommentar, dato, osv. Her skal vi endre meta på forskjellige hvis. Det er mange kule ting vi kan gjøre med meta: Vi kan gjøre meta om til en meny, vi kan sette tegn innimellom setningene og sette antall kommentar inn i et hjerte.
     
  11. Kommentarfelt: Når vi prater om meta er det naturlig å gå videre å prate om kommentarfelt. Det finnes nemlig en meta i kommentarfeltet også. Den finner du under navnet på den som har postet kommentaren. Den kan vi flytt, minske, endre farge på osv. Men det er ikke bare meta vi skal se på her, vi skal se på hele kommentarfeltet og endre så mye vi kan. Send bilde av ditt ønske kommentarfelt til @jmwebdesignno eller skriv på .facebook.com/webdesignbyJM ... så skal jeg legge ut forklaring på hvordan man lager det.
     
  12. Ny kommentar: Det er mye fete ting vi kan gjøre med selve område hvor man skriver en ny kommentar, men kodene og strukturen er ofte komplisert, så jeg frykter at dette kommer til å bli en lang artikkel. Kan ikke love spesifikt hva vi skal gå igjennom, det får bli en overraskelse. Men du kan jo alltids komme med et forslag, du har jo facebook og twitter adressen min nå.
     
  13. Søk: Legg til standard søke-verktøy og spice det opp med farger og bilder.
     
  14. Bildeshow: Å lage et typisk «slideshow» kan være veldig enkelt hvis man bruker et program på nettet til å lage det, men det er ikke så mye rom for å endre og redigere det. Derfor skal vi skal se på hvilken alternativene vi har og hvilken løsning som er gir best resultat.
     
  15. Kolonner: Når har man bruk for 3 kolonner? Om du vil ha to menyer, eller bare om du vil ha typiske spalter plassert et random sted på siden
  16. Flytende Lenger: «Fluid Column Widths» er genialt. Det vanskelig å forklare i korte trekk, men ideen bak det var å løse problemet med at det er så mange ulike skjerm størrelse og derfor var det noen designer som fant opp det som er kalt "responsive design". Du vet aldri om leseren har en liten skjerm som en mobil eller en stor skjerm. Låser du designet ditt til en bredde, for eksemple 1000px kan det være vanskelig for en mobil-bruker å lese bloggen. Det kan være ganske komplisert å bruke "responsive design" og kan bli mye rot hvis man gjør det feil, men når man forstår det kan det være veldig nyttig.
     
  17. Folkets valg #1: Jeg lovet 20 artikler og du  har kanskje lagt merke til at vi er 4 artikler unna 20. Jeg skal gi deg de 20 artiklene, men tenkte at det er det vært nok diktatur og at folket vil ha demokrati. I et demokrat er det folket som bestemmer, derfor skal dere få bestemme hva jeg skal skrive om i artikkel 17, 18, 19 og 20.
     
  18. Folkets valg #2 - twitter (@jmwebdesignno) eller skriv på facebook.com/webdesignbyJM
  19. Folkets valg #3 - twitter (@jmwebdesignno) eller skriv på facebook.com/webdesignbyJM
  20. Folkets valg #4 - twitter (@jmwebdesignno) eller skriv på facebook.com/webdesignbyJM

 

 

 #bloggdesign #hmtl #css #koder #designhjelp #designtips #wrapper #layout 

Posisjon 13
Posisjon 12

Nytt rosa og fresht design



Dette designet er et stilrent og oversiktlig. I side menyen finner du drop down arkiv og nyeste innlegg. Header har stor størelse og i top menyen er det plass til både all kategoriene dine og lenker til sosiale medier.

Om du ikke finner det svarer på det du lurer på i installasjons guiden som du får når du laster ned designet kan du legge igjen spørsmål på vårt forum. Dette er ett av mange gratis design som du enkelt kan laste ned ved å like oss på facebook

 

 

   Last ned her  DEMO

 

 

 

 

 

Posisjon 13
Posisjon 15
hits