Det er egentlig ganske så enkelt. Alt du trenger å gjøre er å registrere deg på Gravatar med den epost-addressen du bruker her på iPublish når du kommenterer. Når du har lastet opp et bildet og lagt den til epost-adressen din vil bildet ditt dukke opp på kommentarene dine. Merk: Det kan ta 5-10 minutter før bildet blir oppdater og husk å slett historikken i nettleseren din.

Om du fortsatt er usikker på hvordan dette gjøres kan du ta en titt på videoen under:

Dette innlegget er beregnet for nybegynnere, men kan likevel oppfattes som noe avansert og rotete. Basis bruk av CSS er egentlig veldig enkelt, men det finnes selvfølgelig måter og løsninger for å oppnå avanserte ting. For å ta i bruk de nyeste og spennede mulighetene i CSS som for eksempel “runde kanter” uten bruk av bilder, må du benytte en moderne nettleser. Ikke IE!

Les også: Hvilken nettleser bør du bruke?

Hvordan komme i gang?

For å finne ut hvilke elementer (og hva de heter) du ønsker å forandre utseende på, anbefaler jeg at du bruker et “Inspiser element”-verktøy som du finner i Chrome, Safari eller Firefox. Til sistnevnte anbefaler jeg vektøyet Firebug som jeg har skrevet om tidligere. Ved å bruke disse vektøyene kan du gjøre endringer og se de direkte på bloggen din før du legger det inn i stilsettet (css) ditt.

Strukturen til css er som følger:

element {
egenskap: verdi;
}

For at dere skal kunne forstå hvordan dette skal virke, bør vi også ha noe html-kode å jobbe med (som du f.eks finner via firebug):

<div id="identifikasjon">
Dette er en boks, med id = "identifikasjon"
</div>

<div class="klasse">
Dette er en boks med class = "klasse"
</div>

Over har vi en html-kode med to bokser (div), hvor den ene har en id og den andre har en klasse (class). Forskjellen på disse elementene er i hovedsak at en id må være unik. Det vil si at den teoretisk sett kun finnes ett sted på nettsiden, mens en class kan benyttes flere ganger på en side. La oss nå gi disse to boksene en stil hver ved bruk av css. Koden under forandrer bakgrunnen på begge boksene (henholdsvis grønn og rød):

#identifikasjon {
background: green;
}

.klasse {
background: red;
}

Som du kan se er elementet spesifisert med en firkant (#) foran ID-navnet og en punktum (.) foran class-navnet. Det er på denne måten man ser forskjell på en ID og en klasse i css. I tillegg kan du se at egenskapen er background og verdien er henholdsvis “green” og “red”.

Resultatet på denne kombinasjonen av css og html blir som følger:

Forstår du hvordan dette fungerer?

En liten oversikt over egenskaper i CSS

Her følger en liten liste over de vanligste egenskapene for css og et lite eksempel på hvordan de fungerer.

For en fullstendig oversikt, med forklaring, finner du her! (engelsk)

background
– Forandrer bakgrunnen (farge/bilde/plassering). Eks: background:#000000;
color
– Forandrer skriftfargen i elementet. Eks: color: #000000;
border
– Bruke for å gi et element en ramme. Eks: border: 5px solid #000000;
font-family
– Forandrer skrifttypen. Eks: font-family: Arial;
font-size
– Forandre skriftstørrelsen. Eks: font-size: 12px;
height
– Brukes til å definere høyde. Eks: height: 150px
width
– Brukes til å definere bredde. Eks: width: 150px
padding
– Legger til luft runt elementet. Eks: padding: 5px

Så hvordan setter vi sammen disse egenskapene?

I dette eksempelet bruker vi et element (div) med id “boks” og en kombinasjon av forskjellige css-egenskaper.

#boks {
background: #ffff99;
border: 1px solid #999999;
font-size: 16px;
padding: 10px;
text-align: center;
}

Resultatet av css-koden over blir da slik:

Forstod du noe av dette? Er det noe som er uklart? Still gjerne spørsmål!

Registrer du deg her vil du få hele 2.25 GB gratis lagringsplass, det er 250 MB mer enn på en vanlig gratiskonto. Om dette skulle være for lite i fremtiden kan du kjøpe 50 GB for rundt 50kr/mnd eller 100 GB for rundt 100kr/mnd, men 2.2 GB vil være mer en nok for de fleste en god stund.

Les også: Hvor skal du blogge?

1. Først må du ta en “backup” av bloggen din på blogg.no. Det gjør du ved å gå til “Oppsett > Backup” i kontrollpanelet ditt. Deretter må du pakke ut filen du nettopp lastet ned!

2. Når backupen er tatt og zip-filen er pakket ut må du logge inn på wordpress og gå til “Verktøy > Importer > RSS”. Der velger du filen som heter “rss-export.xml” som ligger i mappen til backupen din fra blogg.no. Fullfør ved å trykke på “Last opp og importer”.

Og vips, så har du importert flyttet blogginnleggene dine fra blogg.no til en wordpress-blogg.

Les også: Devpublish – Et gratis design for iPublish og bloggr.no

Slik tar du i bruk designet

Lim inn CSS-koden du finner under og lagre endringene. Dette må du også gjøre om du ønsker å benytte andre farger enn blått.
/* Design laget av: Stihk.com */
*{font-family:Verdana,Arial,Helvetica,sans-serif!important;outline:none;margin:0px auto;}
body{font-size:12px!important;background:#eeeeee;color:#000000;}
a,a:link,a:visited,a:active{color:#6a5243;text-decoration:underline;}
a:hover{color:#000000!important;text-decoration:none;}
#wrapper{margin:0;width:auto;padding:0;background:none;}
#header{background:#232323;overflow:hidden;padding:0;}
#site-description{width:51px;height:10px;background:url(http://devpublish.ipublish.no/files/2011/03/small-stihk.png)top left;position:absolute;top:20px;right:10px;text-indent:-9999px;}
#site-title{width:940px;margin:0;}
#site-title a{color:#ffffff;font:28px/100px Georgia,"Times New Roman",Times,serif !important;font-weight:normal;background-position:top center;background-repeat:no-repeat;}
#site-title a:hover{color:#999999!important;}
#branding img {display:none;}
#access{width:100%;background:#2d577f;border-top:3px solid #254a67;padding:0px;height:40px;}
#access .menu-header,div.menu{width:940px;margin:0 auto;font-size:12px;}
#main{padding:30px 0 0;}
#content{margin:0 250px 0 0;}
#calendar_wrap{background:#ffffff;padding:5px;}
#content,#content input,#content textarea{font-size:12px;line-height:21px;}
#nav-above,#nav-below{display:none!important;}
#site-generator{background:url(http://devpublish.ipublish.no/files/2011/03/av-stihk.png) no-repeat top left;width:133px;height:16px;}
#site-generator a{display:none;}
.hentry{background:#ffffff url(http://i47.tinypic.com/2lcxkt4.gif) no-repeat scroll top right;border-bottom:2px solid #dddddd;padding:20px;margin:0 0 30px;}
.entry-utility,.entry-meta{font-size:11px;}
h2.entry-title,h1.entry-title,h1.page-title,h2.entry-title a,.widgettitle{font-weight:normal;font-family:Georgia,"Times New Roman",Times,serif !important;font-size:24px;}
h2.entry-title a:hover{text-decoration:none;color:#888888!important;}
#content p,#content ul,#content ol,#content dd,#content pre,#content hr{margin-bottom:16px;}
#access a{color:#ffffff;line-height:40px;padding:0 10px;text-decoration:none;}
#access ul li{margin-right:1px;}
#access ul li.current_page_item a,
#access ul li a:hover{color:#333333;background:#eeeeee;position:relative;top:-3px;border-top:3px solid #d5d5d5;}
#access ul li.current_page_item a{font-weight:bold;}
#comments{background:#ffffff;padding:15px;}
h3#comments-title,h3#reply-title{font-size:15px;padding:15px 0;margin:0;}
.comment-meta{margin:0 0 5px;}
#footer{background:#232323;color:#777777;font-size:11px;border-top:3px solid #bababa;padding:15px 0;margin:0;}
#footer a:link,#footer a:visited,#footer a:active{color:#777777!important;}
#footer a:hover{color:#696969!important;}
#colophon{border-top:none;margin-top:0;overflow:hidden;padding:15px 0;}


Hvordan få header?

For å få header trenger du kun å legge til følgende css-kode og gjøre de endringer som passer ditt behov. Pass på at du legger inn koden under den andre css-koden og at headeren du skal benytte er 940px bred:
#site-title a {
background-image: url(LINK-TIL-BILDE);
height: 150px;
width: 940px;
font: none;
display: block;
text-indent: -99999px;
}

Andre fargealternativer

Å få noe andre farger enn blått er veldig enkelt. Du limer inn css-koden til den fargen du vil ha under den andre koden. Her er noen alternativer:

Rød:
#access {
background: #7f2d2d;
border-color: #672525;
}
Gull:
#access {
background: #bc9616;
border-color: #9f7b00;
}
Grønn:
#access {
background: #598527;
border-color: #406618;
}

Om du tar i bruk designet, setter jeg stor pris på at du forteller leserne dine hvor du har funnet det og gir meg kreditt for det :)

Så hvilken nettleser bør du ta i bruk? Mine anbefalinger er som følger:
- Chrome
- Firefox
- Safari
- Opera

Ut ifra statestikken til stihk.com så legger jeg merke til at flertallet av mine besøkende benytter seg av Chrome, med Firefox på andreplass. Dette er noe som gjør meg glad!

Fordelen med å benytte seg av disse nettleserene er at de oppdateres jevnlig for å støtte nye webstandarder, bli raskere og gjøre internettopplevelsen bedre for brukerne. I motsetning til IE som oppdateres sjeldent og ødelegger opplevelsen.

Enkelt forklart så bruker du Firebug for å inspisere html-koden og se hvordan den er bygget opp. Du vil også kunne se hvordan CSS-koden for elementene ser ut og dermed enkelt finne hvilke elementer du må endre for å nå det du ønsker. En fordel med dette er at du også kan gjøre endringer direkte for å se hvordan det blir på nettsiden før du eventuelt implementerer det. Selvfølgelig så har dette vektøyet mange andre muligheter og bruksmønstre, men for de fleste bloggere et det de mulighetene nevnt over som er aktuelle.

For å vise litt hvordan det hele fungerer så har jeg et bilde her med forklaring under:

1. Når du har åpnet Firebug trykker på du på “Inspect Element” (nummer 1). Da vil du få mulighet til å trykke på elementer på nettsiden du befinner deg på.

2. Velg det elementet du vil inspisere. På bildet over har jeg valgt elementet som befinner seg under hver post på bloggen min.

3. På nummer 3 (ref. bildet) ser du html-koden for nettsiden og det elementet jeg trykket på blir markert. Her ser vi at jeg trykket på en “div” med klasse “entry-utility”.

4. På nummer 4 (ref. bildet) får vi se all css-kode som påvirker elementet vi har valgt. Her ser vi at css-koden begynner med “.entry-utility” og det er dette vi må bruke for å forandre på elementet (designet). For eksempel om jeg vil ha svart bakgrunn på elementet kan jeg skrive “.entry-utility { background: black; }”.

Du kan lese mer http://getfirebug.com/ og lære mer om CSS på W3Schools.com.

Blogg.no: Er foreløpig det største bloggsamfunnet i Norge. Her benyttes et egetutviklet bloggverktøy som desverre begynner å gå ut på dato. Majoriteten av bloggere på denne plattformen går under beskrivelsen rosablogg.

iPublish: Det er her jeg i skrivende stund befinner meg. På denne siden benyttes bloggverktøyet WordPress i likhet med ekstremt mange bloggsamfunn i hele verden. Fordelen her er at du kan ta i bruk et eget domene.

Bloggr: Denne tjenesten har presentert seg selv som en konkurrent av blogg.no og kjører på samme system på iPublish, nemlig WordPress. Fordelen her er vel at bloggen din kan bli promotert på nettsider som klikk.no, spill.no og biip.no.

WordPress.com: Kort fortalt så kjører denne siden samme system som iPublish og Bloggr, men noen andre muligheter. For nordmenn tror jeg en av de andre tjenestene over egner seg bedre.

WordPress.org: Her kan du laste ned systemet som kjører på for eksempel iPublish og Bloggr. Dette er aktuelt for bloggere som har kjøpt eget domene og serverplass, og som ønsker å styre alt selv.

Blogger.com: En tjeneste som drives av Google. På denne plattformen kan du endre mesteparten av det du måtte ønske og du kan ta i bruk eget domene.

Det finnes også en hel haug med andre muligheter om du ønsker å starte en blogg. Dette er bare en liten oversikt over kanskje de største aktørene i Norge. Fordelen med å velge et bloggsamfunn (for eksempel bloggr.no, blogg.no eller ipublish.no) er at det er enklere å få lesere da innleggene som regel havner på hovedsiden til tjenesten.

Jeg har ikke ryddet i css-koden og alt leveres derfor “som det er”. Noe kan kanskje være tilpasset mitt bruk, men det bør ikke være noe problem. Skal det derimot være et problem, så kan du ta å legge igjen en kommentar.

Her er den komplette css-koden for designet. Informasjon om header og farge befinner seg litt lengre ned i dette innlegget:

*{margin:0;padding:0;}
*,:focus{outline:none;}
body{background:#ffffff;font-family:Arial,'Helvetica Neue',Helvetica,sans-serif;font-size:12px;color:#333;}
#content,#content input,#content textarea{line-height:22px;}
#access .menu-header,div.menu,#colophon,#branding,#main,#wrapper{width:840px;}
#wrapper{padding:0;margin:0;width:100%;}
#branding img,#site-description{display:none;}
#masthead{margin:0 auto;width:840px;height:160px;}
#header{padding:0;background:#008fcb url(http://idev.ipublish.no/files/2011/03/menu.png) repeat-x bottom left;}
#site-title{width:840px;margin:0 auto;float:none;}
#site-title a{width:840px;height:120px;line-height:130px;font-weight:normal;font-size:22px;color:#fff;margin:0;display:block;}
#access{background:transparent;float:none;margin:0 auto;width:840px;}
#access .menu-header{width:840px;font-size:12px;}
#access .menu-header,div.menu{margin-left:0px;}
#access a{line-height:40px;color:#aaaaaa;}
#access ul li.current_page_item a,#access ul li.current-menu-ancestor a,#access ul li.current-menu-item > a,#access ul li.current-menu-parent a{background:#444444;color:#ffffff;}
#access li:hover a,#access ul ul :hover a,#access ul li.current_page_item{background:#000000;color:#ffffff;}
#container{margin:0;width:620px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;background:#ecebe7;padding:4px 0;}
#content{margin:0;font-size:13px;background:#ffffff;border:1px solid #dcdcdc;margin:0 4px;padding:10px;}
#main{overflow:hidden;padding:25px 0 50px;background:url(http://stihk.com/files/2011/03/avstihk.png) no-repeat center bottom;}
#primary,#secondary{width:200px;}
#main .widget-area ul{padding:0px;}
.widget-container{margin:0 0 13px;}
#footer-widget-area ul.xoxo{margin:0;}
#footer-widget-area .widget-area{float:none;width:100%;}
#footer{margin:20px 0 0;background:#efefef;color:#777777;text-align:center;font-size:11px;border-top:1px solid #dddddd;}
#site-info,#site-generator{display:none;}
#colophon{border:none;margin-top:0px;padding:15px 0 0;}
.hentry{border-bottom:1px dotted #DCDCDC;margin:0 0 25px;padding-bottom:30px;}
a:link,a:active,a:visited{color:#3b5998;text-decoration:underline;}
a:hover{text-decoration:none;}
.entry-title a:active,.entry-title a:hover,
.navigation a:active,.navigation a:hover,
.comment-meta a:active,.comment-meta a:hover{color:#0093d1;}
.entry-meta a:hover,.entry-utility a:hover{color:#000000;}
#nav-above{margin:0 0 5px;display:none!important;}
#nav-below{margin:-18px 0 25px;}
#content .entry-title{font-size:28px;font-weight:normal;}
#entry-author-info{background:#ECEBE7;border-top:none;font-size:12px;line-height:20px;margin:25px 0;padding:10px;}
#entry-author-info #author-description{padding-top:3px;margin:0 0 0 88px;}
#entry-author-info #author-avatar{background:#ffffff;border:1px solid #dcdcdc;padding:5px;}
h3#comments-title,h3#reply-title{font-weight:normal;}
.comment-author img.avatar{padding:1px;background:#ffffff;border:1px solid #666666;}
.commentlist .avatar{left:10px;top:10px;}
.comment-author{padding-top:8px;}
.comment-meta{position:absolute;right:10px;top:8px;font-size:11px;}
.commentlist li.comment{background:#f7f7f7;border-bottom:1px solid #dddddd;border-top:1px solid #dddddd;padding:0 0 0 65px;margin:0 0 5px;}
.comment-body{font-size:12px;line-height:18px;padding:3px 0 0;}
.reply{font-size:11px;padding:0 0 5px;}
.commentlist ul.children li.comment{margin-right:5px;background:#f1f1f1;}
.commentlist li.bypostauthor,.commentlist li.comment-author-devpublish,.commentlist li.comment-author-stihk,
.commentlist ul.children li.comment-author-devpublish,.commentlist ul.children li.comment-author-stihk{background:#ffffdd;border-bottom:1px solid #ddddcd;border-top:1px solid #ddddcd;}
input[type="text"],textarea,
#content input,#content textarea{background:#f5f5f5;border:1px solid #dedede;font-size:14px;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none;}
#respond .form-submit input{background:#f2f2f2;border-color:#dddddd #aaaaaa #aaaaaa #dddddd;border-style:solid;border-width:1px;cursor:pointer;font-size:13px;margin:10px 0;padding:5px 10px;}
#respond .comment-notes{font-size:12px;}
h3#reply-title{margin:18px 0 10px;}
#respond .form-allowed-tags{display:none;}
.entry-meta{font-size:11px;}
#content img{max-width:590px;}
#comments .pingback{border-bottom:1px solid #E7E7E7;border-top:1px solid #E7E7E7;margin:5px 0;padding:8px;}
#content .wp-caption{padding:10px 0 3px;margin-left:-10px;width:610px!important;border-top:1px solid #dcdcdc;border-bottom:1px solid #dcdcdc;}
#content .wp-caption img{margin:0 auto;}
#content .wp-caption p.wp-caption-text{color:#888888;font-size:11px;margin:2px 0;}
#content pre,#content kbd,#content tt,#content var{font-size:12px;line-height:20px;overflow:auto;}
.one-column{width:840px!important;}
.one-column #content{margin:0 auto;width:810px !important;}


Ønsker du å bruke en header eller bare bytte bakgrunnsfarge på headeren? Da kan du benytte css-kodenene under. Lager du en header bør den være maks 840px bred. Husk å gjør de forandringer (på f.eks høyde) som passer ditt behov.

For å legg til en header:

#site-title a {
background: url(LINK_TIL_HEADER) no-repeat top center;
height: 120px;
text-indent: -9999px;
}

For å endre bakgrunnsfarge (bytte den blå bakgrunnen):

#header {
background-color: #940000;
}

Pass på at du legger disse kodesnuttene under den andre css-koden.

Tar du i bruk designet ønsker jeg at du forteller leserne dine om at du fant designet her og gir meg litt cred. Håper noen får nytte av dette :)

Det kan være lurt å ta backup av ditt nåværende design i tilfelle du angrer.

Selv om det nå begynner å bli en god stund siden jeg oppdaterte noen av bloggene jeg har tilgjengelig, får jeg fortsatt regelmessig mail og kommentarer fra nye (og gamle “kjente”) mennesker som har hørt om eller funnet meg via andre bloggere. Det setter jeg pris på og jeg vil fortsatt prøve å svare på det meste dere eventuelt lurer på.

Selv om jeg i hovedsak har fokusert på iPublish og blogg.no, vil jeg nå også i tillegg prøve å bidra med mitt for bloggere på det nye nettverket bloggr.no (kanskje andre nettverk etterhvert). I fremtiden regner jeg med å lage design og muligheter for alle disse alternativene når tiden tillater det.

Hva kan du regne med å finne på denne bloggen? I tillegg til gratis design til bloggnettverkene nevnt over, satser jeg på å skrive guider/artikler om temaer innen blogg, design, sosiale medier og annet som interesserer meg. Muligheten for noe mer personlig enn tidligere er også tilstede. Jeg vil muligens også reposte innlegg som kan være nyttig.

Jeg setter stor pris på tilbakemeldinger, tips/ønsker i forhold til (gratis)design og rapportering av eventuelle bugs/feil på bloggen.

Og du, følg meg gjerne på Twitter!

Ka du tru?

Og for de som lurer så er denne bloggen fortsatt hos iPublish og designet basert på standardtemaet “Twenty Ten”.