Fick en kommentar igår från en tjej som säger att hon inte rikigt kan läsa gamla inlägg, är det nån mer som har samma problem? Jag kan läsa alla gamla inlägg, förutom att det blivit nåt knepigt med texten.. I vissa inlägg så är mellanrummet mellan textraderna jättestort, och i vissa inlägg är texten jättekonstigt centrerad.. Blir så trött, för jag har haft problem med detta jätelänge nu, trots att jag mailat med blogg.se som säger att inget ser konstigt ut, efter vissa ändringar av stilmallen..

I alla fall, min så kallade stilmallsskola känns lite förlegad nu då alla stilmallar uppdaterats och ändrats om litegrann, så jag uppmanar alla som vill behöver hjälp med sin frågor om bloggdesign att gå in på

Han som driver den bloggen är superduktig och förklarar väldigt utförligt hur man ändrar i sin stilmall osv. Jag får mycket mail ifrån folk som vill ha hjälp med en header osv, men som det ser ut nu så tar det för mycket tid, och jag kommer inte att göra några gratisdesigner på beställning. Kanske att jag i framtiden gör färdiga designer som jag sen ger eller säljer bort till högstbjudande. Det tar helt enkelt för mycket tid att sitta i pula och trixa i photoshop för ett jobb som man gör gratis, det hoppas jag att ni förstår.

En annan tjej som börjar bli riktigt duktig på det här med bloggdesign, är ju Linda, så hennes blogg tycker jag verkligen att ni ska besöka.

Pia undrade hur man får en upp en sån klocka som jag har. Det ska jag så gärna förklara. ",)

Glöm inte bort att göra din röst hörd om du vill ha en bloggdesign.

Vad använder du för typsnitt i dina inlägg? Jag har sett flera bloggar som använder sig utav alltför dekorativa typsnitt. Det kan vara okej i rubriken, men INTE i hela inlägg, det blir för rörigt att läsa.

Det här är dom FEM typsnitt som är garanterade på alla datorer, även mac.
Så vill du vara säker på att din bloggtext ser likadan ut på allas datorer, så ska du välja någon utav dessa.
Georgia var länge min favorit, men nu kör jag på Arial. Men helst vill jag ha Cambria, men efter att jag såg hur det såg ut på Annas dator (som inte har Cambria på sin dator) så insåg jag att det är bättre att ha något som är webbsäkert.

Det finns ett jättebra statistikprogram på Google som är gratis. Det visar hur många besökre din blogg har per dag, och du kan även se mer detaljerat vart de kommer ifrån. Vilket land och vilken stad, och vilken webbsida som genererar mest läsare till din blogg.

När du signar upp dig för Analytics så får du en kod, som du ska klistra in:

längst upp i stilmallen och längst upp i varje kodmalls-sida (arkiv, startsida…) :

Tänker inte gå in på det närmare än så, för vet du inte hur jag menar, så kommer du nog inte förstå Google Analytics så bra heller.

Google Analytics.

Fick frågan från Angelica hur man får bakgrunden på bloggen att "stanna" sådär. Det ska jag så gärna tala om.

Klistra in detta i din stilmall (under body):

background-attachment: fixed;

Sen är det klart. Enkelt va?

Detta kan vara ganska bra för oss som inte har en helt enfärgad bakgrundsbild. Står bilden still blir bloggen mindre rörig, och det gillar vi förstås. Ingen gillar en blogg som känns för rörig.

Ett annat tips jag har, som jag önskar att jag visste för ett år sen när jag inte kunde nånting om stilmallen:
Om man har en enfärgad bakgrund så tror många att man bara kan ta fram vilken färg som helst i färgblandaren i tex Photoshop och lägga in den färgkoden i stilmallen. FEL! Tyvärr är det så att det finns bara 216 webbsäkra färger, dvs endast 216 färger som ser exakt likadana ut i färg, vilken dator du än sitter vid. Färgen du lagt in kan alltså se HELT annorlunda ut på nån annans dator, vilket kan förstöra hela din "design". Alltså, mitt tips är att ta fram en färg du gillar, färglägga ett "ark" med den färgen i photoshop, sen spara den som en .jpeg-fil, ladda upp den på www.tinypic.com och lägga in den som en bakgrundsbild i stilmallen
(hur man lägger in en bakgrundsbild har jag redan förklarat i det första inlägget i den här kategorin).

Då ser alla "rätt" färg.

Här kommer då en lättare förklaring till vad din stilmall innehåller.

body {

background: #FFFFFF url(http://DinBildsUrlAdress.com/bild.jpg);

margin:0;

padding:0px 0 14px;

text-align:center;

color:#333;

}

Färgen på dina länkar i inläggen:

a {color: #000000;text-decoration:bold;}

a:hover {color: #fff;text-decoration:bold;}

#000000 står för färgen svart. Vill du ha en annan färg, byter du bara ut #000000 mot en annan färgkod. Koder kan du hitta här.

Bloggarket, det vita som header, inlägg osv ligger på.

#wrapper {

text-align: left;

width: 830px Här kan du ändra vilken bredd arket ska ha.

margin: 50px auto;

padding: 30px;

vertical-align: top;

border: 5px solid #D9CCD0; Ramen runt arket.

background-color: #FFFFFF; Färgen på arket.

}

Om du inte vill ha någon ram runt arket så ändrar du bara så att border-färgen är samma som på bakgrund-color.

Header
#header {

background: #FFFFFF url(http://DinBildsUrlAdress.com/bild.jpg) no-repeat right center;

padding-left: 30px;

padding-bottom:15px;

padding-top:30px;

margin: 0px 0px 20px;

width: 700px; Ändra width till 800px; om din header är 800 pixlar bred.

height: 200px; Ändra heigh till 400px; om din heder är 400 pixlar hög

Sidkolumnen

#side {

margin-right:0;

padding: 24px 12px 0px;

background: #ffffff; (Färg på bakgrunden i sidokolumnen)

width: 150px; (Bredden på sidokolumnen.)

margin-left: 620px;

}

Ta bort det originala blogg-namnet;

Kopiera detta och klistra in det nånstans i stilmallen.

#header a {

color: #ffffff;

text-decoration: none;

font-family: Arial, Helvetica, sans-serif;

font-size: 0px;

font-weight: normal;

}

Inläggsrubriker:

/** Entry headers **/

h3 {

font-family: papyrus; Anger vilket typsnitt du vill ha på rubriken.

font-size: 20px; Anger vilken storlek det är på rubrikerna

font-weight: medium;

color: #000;

background:#ffffff; Om du vill ha en särskild bakgrundsfärg till rubrikerna så

padding:14px 10px 10px 15px; ändrar du färgkoden.

margin: 0px 0px 10px;

height: 14px;

vertical-align: top;

text-align: left; om du ändrar left till right så högerjusterar du rubriken.

}

Rubrikerna i sidokolumnen (Kategorier, länkar..):
.navheader {

font-family: arial; Typnitt på rubrikerna

font-size: 15px; Storlek på rubrikerna

font-weight: bold;

color: #000000; Färg på rubrikerna

margin-bottom: 3px;

}

Länkar i sidokolumnen
.nav a {

color: #000000; Normal färg på länken

text-decoration:none;

font-family: century gothic; Typsnitt på länkarna

font-size: 12px;

}

.nav a:hover { color: #999999;text-decoration:bold;} Färg på länken när du håller pilen där.

Inläggstexten

/** Post’s body text **/

.entrybody {

font-family: "Times New Roman", Times, serif; Typnitt på texten

font-size: 12px; Storlek på texten

font-weight: normal;

color: #000000; Färg på texten

line-height: 130%;

text-align:justify;

padding:20px;

margin: 10px 0px 0px 0px;

}

Datum då inlägget postades:

/** ‘Posted by’ txt **/

.entrymeta {

font-family: century gothic; Typsnitt

font-size: 10px; Storlek

font-weight: normal;

color: #000000; Färg

padding:20px;

text-align:right;

}

Färg på länkarna bredvid datumet på inlägget postades

(permalink, kommentarer osv.)

.entrymeta a { color: #ffffff; text-decoration:bold;}

.entrymeta a:hover { color: #fff;text-decoration:bold; }

Irriterande streck mellan inläggen?

.separator {

border-top: 2px solid #000000; byt till samma färgkod som färgen på ditt ark.

border-bottom: 0px solid #000000;

margin: 14px 0px 14px 0px

Välkommen till stilmalls-skolan, haha ",)

För att göra ändringar vad gäller färger och så vidare i din blogg så måste du gå in i något som heter stilmallen som du säkert känner till. Jag är självlärd, men det tar lite tid så därför tänkte jag göra en kategori i min blogg där du kan hitta svar på allt du velat veta och lite till. Förhoppningsvis.

Det första du förmodligen vill göra i din blogg när du skaffar den är att ändra bakgrunden och få en personlig header.

Bakgrunden som jag har, har jag gjort själv i Photoshop. Du kan ha vad som helst som bakgrund egentligen men det finns en sak som är viktig att tänka på – storleken. För att slippa fula kanter så bör din bakgrundsbild vara 1024 pixlar bred. Om den inte är det så kan du lätt ändra det i photoshop. Höjden på bilden kan vara hur lång som helst, men minst 768 pixlar för att det ska bli snyggt.

För att lägga in en bild som bakgrund så måste du ha en url-adress till bilden. Om du har hittat den på Internet (och kollat upp att det är okej att du använder den) så kopierar du bara adressen som står i adressfältet

Om du inte har en urladress till bilden, om du tex har gjort en egen bakgrund, så måste du skaffa en url-adress till bilden.

Det enklaste tycker jag är att göra det på www.tinypic.com. Där kan du gratis ladda upp en bild och få en mängd olika koder till den. Koden som du ska kopiera heter "Direct Link for Layouts".

Sen kommer vi till det att du ska lägga in din bildadress (URL) i din stilmallen.

Gå in i stilmallen och hitta detta (längst upp):

body {

background: #FFFFFF url(http://static.blogg.se/shared/img/css/retroblue_bg.gif);

margin:0;

padding:0px 0 14px;

text-align:center;

color:#333;

Det enda du behöver göra nu är att klistra in DIN url-adress där den nuvarande står.

Du ska alltså ta bort  http://static.blogg.se/shared/img/css/retroblue_bg.gif och istället klistra in din adress.

Nu borde du ha din nya bakgrundsbild.

Om du vill ha en enfärgad bakgrund så kan du självklart ta bort url-adressen från stilmallen.

body {

background: #FFFFFF

url(http://static.blogg.se/shared/img/css/retroblue_bg.gif);            < Ta bort adressen.

margin:0;

padding:0px 0 14px;

text-align:center;

color:#333;

För att ändra bakgrundsfärg skriver du in din färgkod där det nu står #FFFFFF (som står för vit).

Här finns massor av olika färgkoder.

Steg två är att göra en header.

Detta gör du enklast i photoshop. Det finns de som kan göra det i paint, men jag gillar inte paint så fråga inte mig om det. Då får du testa dig fram själv.

Bredden på en header bör vara mellan 700 – 830 pixlar.

Höjden bör vara mellan 200 – 400 pixlar.

830 pixlar är så brett som hela det vita "arket" på bloggen är. Med andra ord så är min heder 830 pixlar bred. Ganska lätt att räkna ut.

För att få in en header så behöver du precis som med bakgrundsbilden en url-adress så ladda upp din snygga header på www.tinypic.com. Leta sen upp detta i din stilmall:

#header {

background: #EEEEEE;

margin: 0px;

padding: 10px 0px 40px;

height: 90px;

text-align: left;

border: #000000;

Om du tittar noga nu så ser du att det inte finns någonstans att klistra in din url-adress. Så det du behöver göra att kopiera detta:

Klistra sen in det du just kopierade så att det ser ut såhär i din stilmall (och ändra så att DIN url-adress står där istället:

#header {

background: #EEEEEE url(http://dinbildurl.com/bild.jpg) no-repeat center;

margin: 0px;

padding: 10px 0px 40px;

height: 90px;

text-align: left;

border: #000000;

Skulle du trycka "spara" nu skulle det se lite konstigt ut.

Du måste nämligen ändra siffrorna som står efter "height:"

Nu är alltså höjden på headern bara 90 pixlar, och du har ju en header som är mellan 200 – 400 pixlar. Så ändra 90 till t.ex 400px, om headern du gjort är i den höjden. Har du gjort en header som har höjden 300 pixlar så ändrar du givetvis till 300px.

Nu när du har sparat så syns förhoppningsvis din nya header på bloggen.
Men du kommer även att stöta på ett nytt problem, nämligen att ditt originala bloggnamn är i vägen för headern.
För att åtgärda detta problem kopierar du detta:

#header a {

color: #fff;

text-decoration: none;

font-family: Arial, Helvetica, sans-serif;

font-size: 0px;

font-weight: normal;

Och klistrar in sen det i stilmallen, längst upp förslagsvis. Vips så försvann bloggnamnet.

Så, nu var kapitel 1 avslutat. Fortsättning följer.