It was so easy that night

image110 Okej, jag har på sista tiden fått många frågor angående hur man byter utseende på sin blogg utan att behöva hålla sig till de mallar som blogg.se erbjuder (Maja insåg inte ens att min blogg ligger kvar på blogg.se, nice Maja, nice) därför tänker jag nu göra mitt bästa för att visa hur man går till väga.

Detta skulle man kunna säga är part 1, för nu visar jag hur man gör rent designmässigt. Man kan nämligen också gå in och ändra i koderna som styr t.ex vad de olika kategorierna heter, men det tar vi nästa gång.

Det är ganska många steg och detta inlägg är image heavy så var patient om det tar lång tid att ladda. Bilderna behövs (klicka på dem för att se dem i full storlek)!

1. Logga in på din blogg.

2. Välj fliken som heter design.

3. Välj en färdig stilmall. Ja, gör det! Makes no sense jag vet men lita på mig. Jag brukar välja Orange City för att den ger en bra bas att jobba med. Valt? Bra!

4. Nu scrolla up på sidan och klicka på knappen som heter "Redigera kodmall". Kodmallen är den som du fått nu när du valde stilmallen i steg 3.


5. Nu har vi alla koderna. Vi börjar med att byta ut the header, alltså bilden längst upp på bloggen. Just nu är det ju, i mitt fall, den svartvita bilden på en stad. Scrolla ner en liten bit och leta reda på kodningen som gäller "header".

Där hittar vi adressen för bilden. Nu ska vi byta ut den mot vår egen istället.

6. Välj egen bild. Jag har lekt runt på photoshop och har gjort den här header'n med Harry Judd's favorite one night stand som objekt.




Nu är den här 670x622 pixlar stor och ganska, inte helt, men ganska fyrkantig... med andra ord inte alls ultimat att använda som header då den är gigantisk men ibland får man offra sig, jag vill nämligen inte förminska den, då den skulle bli alldeles för smal, och inte heller vill jag crop it differently då jag vill ha med alla färgerna så nu får vi stå ut med detta.

7. För att jag ska kunna använda bilden på Internet så måste jag ladda upp och hosta den någonstans. Det finns olika hemsidor som gör detta gratis och den som jag använder är www.photobucket.com. Har du inte redan ett konto där så är det bara att skaffa ett.

8. Ladda upp bilden på photobucket (eller imageshack eller vad du nu använder i vanliga fall). Välj och kopiera koden som heter Direct Link. Den ska börja med http:// och se ut som en webbadress.


9. Gå tillbaka till din blogg och koderna. Leta reda på koderna för "header" och ta bort koden för den gamla bilden och klistra in din Direct Link kod från photobucket. Välj sedan förhandsvisa eller spara.


10. Nu syns bilden på bloggen men det ser ju inte speciellt snyggt ut.

Det ska vi fixa, no worries. Hets down!

11. Gå tillbaka till koden igen och ändra "height". Min bild är ju 622 pixlar hög så jag skriver det istället för 90 som det står från början och sparar sen.


12. Nu syns hela men den är lite sned.


13. Jag vill ha den här bilden på mitten. Då går jag tillbaka till koden och efter url'et som är min bild så står det "top left" vilket gör att den lägger sig just i vänsta översta hörnet. Jag skriver "center" där istället.


14. Scrolla nu ända upp och ändra färg på bakgrunden. Jag vill ha kvar min svart så jag låter koden vara kvar som den är. Vill man istället ha en bild som bakgrund så gör man precis som man gjorde med sin header. Glöm inte att spara när du är nöjd med en ändring.


15. Scrolla nu ner till den biten av koden som gäller för "content" den är inläggsbiten. För att ändra färg på den byt bara ut hexkoden (eller lägg till ett url för att ha en bild som bakgrund istället). Jag passar också på att byta font (stil) på texten. Eftersom jag har använt Georgia i min header så vill jag att mina inlägg ska ha den fonten också.


16. Överst på varje inlägg finns ju titeln, och den har egen färg, både texten i sig men också fältet. Antingen kan man trolla bort denna "remsa" genom att ge den samma färg som sitt "content" eller så ger man den en egen färg. Scrolla ner tills du hittar kodningen som gäller för "Entry headers" och byt här ut hexkoderna för texten, samt fältet/remsan och ändra även storleken på texten och tyngden (bold t.ex).

Jag har valt att se till att färgerna i min header tas upp i resten av bloggen och jag har sett till att jag har en och samma font genomgående.


17. Längst upp på bloggen syns din titel, det du döpte bloggen till när du skapade den. Den titeln vill inte jag ha uppepå min header så den ska jag nu ta bort.


18. Spara din kodning (glöm inte detta!!) och klicka nu på fliken som heter "Inställningar" längst upp på sidan när du är inloggad på din blogg. I fältet "Rubrik" tar du bort den nuvarande rubriken, i mitt fall themissingchapter (en referens till McFly's låt Ignorance bara för att reta Emelie) och skriver istället in 2 stycken mellanslag. Det går inte att lämna fältet tomt, men de två mellanslagen ger samma tomma effekt. Scrolla ner och spara dina nya inställningar.


19. Gå tillbaka till design-fliken och scrolla nu fram koden som gäller för "side". Vi ska nu ändra utseendet på navigeringsområdet på sidan av bloggen. Antingen så ändrar man bara hexkoden till en färg man vill ha och sparar så, eller så tycker man som jag, att det känns lite tråkigt. Så jag har gjort en bild i photoshop som jag vill ska ligga som bakgrund.

Det här mönstret vill jag bara ska finnas en gång, uppe i hörnet, precis som på bilden och jag ser till att bakgrundsfärgen på bilden är den samma som färgen på min "side" i kodningen, på så vis syns det inte att bilden faktiskt har en begränsad storlek när bloggen växer i antal inlägg och likaså navigeringsområdet. (Vill man istället, som jag har på den här bloggen, ha ett återkommande mönster så får man se till att bilden är skuren så att "repeat" kan anges i kodningen.) Bilden laddar jag upp på photobucket och lägger in i bloggen med hjälp av dess url, precis som jag gjorde med min header. Jag skriver in att jag inte vill att bilden ska repeteras (no-repeat) och att jag vill att den ska vara placerad i högra hörnet (right top).


20. Nu ligger bilden som jag vill men texten ser lite stökig ut.


21. För att ändra detta så letar jag reda på koden som påverkar "navheader". Jag anger vilken font jag vill ha, i mitt fall Georgia igen, storlek på texten samt färg och sparar.


Resultat:


22. Precis som vi gjort tidigare så ändrar vi hexkoderna för att påverka färgen på texten i inläggen. Även storlek, font och dyngd ändras precis som tidigare...

Q&A's
Q: Vad är hexkoder?
A: Det är den siffer- och bostavskod som anger färgen som ska visas. Koden börjar med # och följs sedan av en kombination av 6 stycken siffror och bokstäver. #000000 är svart och #FFFFFF är vit t.ex.

Q: Hur får jag tag på hexkoderna?
A: Har du ett bildbehandlingsprogram som Photoshop, GIMP eller PSP så kan du lätt hämta hexkoderna där antingen genom att använda pipetten och hämta färgen från en bild, eller genom färgpalletten. Har man inget program så finns ett stort antal av koderna här.

Q: Hur vet jag vad fonterna heter och ser ut?
A: Kolla i MS Word eller i något annat ordbehandlingsprogram om du inte tycker att du har koll på vad fonterna heter, eller använd ditt bildbehandlingsprogram igen.

Q: Kan jag använda vilken font som helst?
A: Ja och nej. Du kan fylla i vilken font som helst av de du har installerade på din dator men är det en ovanlig font, nedladdad, eller kanske till och med köpt och nedladdad så är det antagligen bara du som kommer kunna se den. Andra som besöker din blogg kommer se samma text förtås men fonten kommer att vara Verdana eller Arial.

Q: Vad mer ska man tänka på när man väljer font?
A: Tänk på att alla inte har samma skärmupplösning och en font som är mycket detaljerad kan vara svår eller jobbig att läsa, speciellt om den är liten. Sen tycker jag personligen också att det är snyggast om man håller sig till högst två olika fonter och då inklusive en eventuell font i sin header.

Lycka till och har ni fler frågor eller om det är någonting som är oklart eller som ni har problem med så fråga. Den färdiga bloggen som jag byggt som exempel här hittar ni här om ni vill titta på den.


Kommentarer
Postat av: Jos

MYCKET DUKTIGT GJORT! :D

Postat av: Ida

Vilket tålamod att skriva allt det där!!! :D Bra gjort ;)

2007-11-03 @ 17:34:34
URL: http://lifeisfordummies.blogg.se
Postat av: Casha Granat

Ååh, du är underbar, vet du det! Någon gång, japp nån gång, så ska jag fixa allt det där på min blogg också! Mañana, mañana! Loooove you sweetie! xxx

2007-11-03 @ 18:34:39
Postat av: Luisa

ÅH! daaaamn good job att skriva allt det där, och såå bra förklarat, hjälpte till och med en IT-retarded människa som mig :)

2008-01-06 @ 22:44:24
URL: http://chiquita.blogg.se
Postat av: nadine

heeeerregud vilket jobb :D jag tänkte ändra min men sen
insgå jag hur mkt jobb de var...

2008-01-12 @ 00:00:33
Postat av: Krillan

Tackar för tipsen! Jag börjar bli nöjd med min stilmall, tack för hjälpen jag fick av ditt inlägg.

:)

2008-02-23 @ 19:08:48

Kommentera inlägget här:

Namn:
Kom ihåg mig?

E-postadress:

URL:

Kommentar:

Trackback