Bloggskolan

Oftast är det trevligare för bloggbesökaren att se bilder med ansikten i närbild istället för en helkropp som står långt bort i bilden. (Förutsatt att du inte har en modeblogg, med syfte att visa upp kläderna som personerna på bilden bär.)
 

Tänk dig att du ska använda nedanstående bild på prinsessan Madeleine och drottning Silvia. Då föreslår jag att du beskär bilden (se längst ner) så att den den fula bordskanten försvinner och det känns som att du kommer närmare människorna på bilden. Om du inte har ett bra bildredigeringsprogram i din dator så kan Picnik vara till hjälp!

På Passagen Blogg finns ett antal teman eller mallar att välja mellan när du vill byta utseende på din blogg. Alla teman hittar du under fliken Utseende. Varje tema visas i fönstret under menyn så att du vet vilka utseenden du väljer mellan. Du kan även välja en full förhandsgranskning av ett tema för att se hur din blogg kommer att se ut med det valda temat.
 

När du valt ett tema kan du sedan ändra temats stylesheet så att din blogg blir mer personlig. Obs! Tänk på att du kommer att förlora alla stylesheetändringar om du väljer ett nytt tema!
 

På svenska heter stylesheet stilmall och är ett språk som anger formerna för ett strukturerat dokument, t ex typsnitt och bakgrundsfärg. Det är helt enkelt här du ställer in allt som har med designen av din blogg att göra.

Ändra stylesheet
Klicka på fliken Utseende och sedan på Stylesheet (nere till vänster). Där kan du editera ditt stylesheet. Om du stöter på problem du inte vet hur du ska lösa kan du fixa detta genom att klicka på Återställ stylesheet och börja om från början.

Så här gör du för att ordna ett eget utseende på din blogg.
 

Skapa en bild som du vill ha i toppfönstret på din blogg (även kallad header) i ett bildredigeringsprogram som t ex Paint (som PC-användare har i sin dator), Photoshop eller något av följande gratis program:

Picasa

Pixenate

Picnik

Fotoflexer
Splashup

Du kan även använda ett illustrationsprogram som t ex Illustrator.

Vi rekommenderar dig att spara bilden i något av dessa format: PNG, GIF eller JPG.
 
Du kan välja vilket bloggtema du vill men våra anvisningar här gäller temat Mystic Wolf så vi rekommenderar dig att välja det.
 

Mystic Wolfs header är 760x187 pixlar så vi föreslår att du göra din bakgrundbild lika stor.
Ladda upp bilden i din blogg. Här kan du läsa hur du gör.
Kopiera bildens adress och gå in på Utseende.
 
 
Klicka på Stylesheet. Gå in på Här ändrar du bloggens huvudbild eller header om du har valt ett annat tema än Mystic Wolf (se inringat område nedan).
Skriv in nedanstående kod mellan ”måsvingarna” d v s dessa tecken {   }.
 
background-image:url(”din bilds adress”);

 Klicka på Spara. Sedan bör det vara klart.

Om det inte funkar, kolla att citattecknen är korrekta. Kanske behöver du ta bort dem och skriva in dem igen.

Här har du en grundmall som du gärna får använda. Det enda du behöver göra är att trycka på länken så kommer du till koden. Kopiera och klistra in den i ditt eget stylesheet.
 

Koden

Du vill ju naturligtvis ändra huvudbilden du ser här nere. 

Här under ser du var du behöver ändra i ditt stylesheet för att få upp din egen bild. Först måste du ladda upp din huvudbild. Hur du gör detta ser du på denna länk

Och hur du sen inför det i ditt stylesheet ser du här

Det är inte svårt att ändra bakgrundsfärgen på din blogg, lite klurigare är det att ändra till en bakgrundsbild men med denna guide ska inte heller det vara något problem.

Ändra bakgrundsfärg

Leta upp koden för body i ditt stylesheet. Klistra in HTML-koden eller det engelska namnet för den färg du vill ha på din background. Om du väljer att skriva kod (ovan har vi till exempel skrivit #FFFFFF som är kod för vit) måste den innehålla # samt sex bokstäver eller siffror. Här hittar du färgkoder för HTML. Spara ändringar och titta på resultatet i din blogg.

Ändra bakgrundsbild

Ladda upp den bild du vill använda som bakgrund i Filuppladdaning. Det bästa är att använda sig av en stor bild som täcker hela bakgrunden, runt 1200 pixlar. Klicka på bilden och kopiera adressen, URL:n.

Gå in i Utseende och Stylesheet. Här letar du upp koden för body igen och anger adressen till din bild inom den parantes som visas i bilden ovan.

Upprepa bakgrundsbilden

Om bilden du valt inte är tillräckligt stor kan du välja att upprepa bakgrundsbilden. Klistrar in koden background-repeat efter adressen till din bild. Ange koden repeat-y om du vill att bilden ska upprepa sig neråt i bloggen, vill du däremot inte att bilden ska upprepa sig anger du koden no-repeat.

Så här ska det se ut i koden:

body{
background-image: url(http://bildadressen);
background-repeat: repeat-y;
}

Lycka till!

Med hjälp av denna kod får du bort rubriken i headern.

/* ------- Här ändrar du bloggrubriken ------- */
#intro #pageHeader h1
{
text-indent: -9999px;
}
 

Du ska alltså se till att ta bort nedanstående kod helt. Du hittar den ganska långt ner i stylesheet.

 /* ------- Här ändrar du utseendet på bloggrubriken ------- */
#intro #pageHeader h1 a
{
                             /* color: #FF0000; */
                             /* font-size: 14px; */
                             /* text-decoration: underline; */
                             /* font-weight: bold; */
                             /* text-align: right; */
}

/*
Theme - Mystic Wolf
Design by Passagen
http://www.passagen.se
*/

.moa
{
position: absolute;
bottom: 40px;
left: 10px;
}
.moatext
{
position: absolute;
bottom: 36px;
left: 75px;
font: 11px arial;
}

#footer a
{
color: #FFF;
}

.hCalendarDayNameRow
{
color: #00365c;
}

#wrap
{
background: #7e888b url(http://blogg.passagen.se/leifgw/resource/bg_wrap.gif) repeat-x 0 219px;
}

/* ------- Här ändrar du bloggens bakgrund ------- */
body
{
background: #1d2125 url(http://blogg.passagen.se/leifgw/resource/bg.gif) repeat-x;
}

/* ------- Här ändrar du färgen på länkarna ------- */
a:link, a:visited, a:active
{

}

/* ------- Här ändrar du färgen på länkarna när man har musen över ------- */
a:hover
{

}

/* ------- Här ändrar du bloggens huvudbild ------- */
#intro #pageHeader
{
background: url(http://blogg.passagen.se/martin1978/resource/Huvudbild.jpg);
}

/* ------- Här ändrar du bloggrubriken ------- */
#intro #pageHeader h1
{
text-indent: -9999px;
}

/* ------- Här ändrar du bloggbeskrivningen ------- */
#intro #pageHeader h2
{
text-indent: -9999px;
}

/* ------- Här ändrar du rubriken på inläggen ------- */
#entries .entrybox h3.entryheader a
{

}

/* ------- Här ändrar du datumet på inläggen ------- */
#entries .entrybox p.stamp
{

}

/* ------- Här ändrar du avsändaren på inläggen ------- */
#entries .entrybox p.meta
{

}

/* ------- Här ändrar du inläggen ------- */
#entries .entrybox .entrycontent
{

}

 /* ------- Här ändrar du rubrikerna i högermenyn ------- */
#sidebar #sidebar-col1 #sidebar-alias h3, #sidebar #sidebar-col1 #sidebar-comments h3, #sidebar #sidebar-col1 #sidebar-tags h3,
#sidebar #sidebar-col2 #sidebar-bookmarks h3, #sidebar #sidebar-col2 #sidebar-links h3, #sidebar #sidebar-col2 #sidebar-pageviews h3
{

}