Lär dig koda bloggdesign - Bild bakom kommentarsfältet

Alla koder är för blogg.se's bloggar!

Ibland kan det se lite extra festligt ut med en fin bakgrund bakom kommentarsfältet, vilket ni nu kommer att få lära er hur man gör.
 
1. Till att börja med så måste vi ta reda på hur bred inläggen är, vilket vi gör genom att gå in under Stilmallen och leta reda på #content. Där kommer det sedan att stå något i stil med
width: 870 px;
vilket betyder att den är 870 pixlar bred.
 
2. Nu måste man alltså ha själva bilden som sedan ska agera bakgrund. Om man vill veta exakt vart hur bakgrunden kommer att sitta så kan det vara smart att ta en screenshot på själva kommentarsfältet och sedan använda detta som mall när man gör beskär/redigerar bakgrunden. Min var 869 px bred och jag vill ha den 500 px hög vilket betyder att min bild alltså kommer att vara 869 px bred och 500 px hög. Bilden kan t. ex. se ut såhär
Här har jag satt en liten ruta ungefär där alla boxar kommer att vara. Jag har även skalat bort lite från kanterna så att bilden inte går hela vägen ut i kanten.
 
3. Nu är det alltså dags att lägga in bakgrunden och detta gör vi genom att gå in i vår Stilmall och leta reda på .commentform . Skriv in koden 
 
background: url(bildlänk) no-repeat;

height: 500px;
width: 869px;


Där det står "bildlänk" ska du lägga in länken till själva bilden, vilket du får fram genom att ladda upp den till bloggen/tinypic.com eller liknande. Där det står "height" och "width" ska du skriva in hur hög och bred bilden är.
 
4. Spara! Nu har du en fin bakgrund till ditt kommentarsfält.

Lär dig koda bloggdesign - Fina typsnitt

Alla koder är för blogg.se'e bloggar!
 
Ibland vill man kanske ha lite finare typsnitt på sin blogg än de vanliga standardtypsnittet. Jag använder mig av något som heter Google Web fonts.
 
1. Börja med att gå in på Google Web Fonts och leta reda på ett typsnitt som du, t. ex, vill använda till dina rubriker.
 
2. När du hittat ett typsnitt som du gillar så ska du klicka på knappen som säger Quick-use.
 
 
 
3. Du ska nu skrolla ner tills du ser något som liknar detta
 
 
Där det står "Add this code to your website" så ska du alltså kopiera koden och lägga in den i alla dina kodmallar (startsida, inläggsida, kategorisida, arkivsida) någonstans mellan <head> och </head>.
 
4. Sedan ska du ta koden nedanför, där det står "Intergrate the fonts into your CSS", och klistra in den i din Stilmall där du vill ha detta typsnitt (förslagsvis vid rubriker etc.), vilket kan se ut ungefär såhär
 

.navheader {
font-family: 'Open Sans', sans-serif;
letter-spacing: 1px;
font-weight: normal;
font-size: 25px;
text-align:center;
background: #ffc5c7;
font-weight: 100;
color: #f98284;
text-transform: normal;
margin-bottom: 10px;
margin-top: 10px;
margin-left: 5px;
margin-right: 5px;
border: 1px #f98284 solid;

}

5. Spara! Nu kan du lägga in fler typsnitt på samma sätt om du vill.

Tips! Försök att inte använda typsnitt som är alltför komplicerade eftersom vissa kan ha svårt att läsa dessa. Försök även att inte ha för många typsnitt på din blogg eftersom det gör så att sidan kan ladda otroligt mycket.


Lär dig koda bloggdesign -Fetstil i sidmenyn

Alla koder är för blogg.se's bloggar!
 
Att lägga in lite text i fetstil i sidmenyn, precis som jag gjort på de flesta ställen, är mycket enkelt och jag ska lära er hur man gör.
 
1. Börja med att gå in i din kodmall (startsida, inläggsida, kategorisida, arkivsida) och leta reda på <div id="side">.
 
2. Skriv sedan din text där du vill ha den (kan se ut ungefär såhär)

<div class="navheader">Om mig</div>
<ul>
<div>I spelet så heter jag Luna Snowwatche men jag kallas även för "Lunis", "Lu" eller "Strudel". Jag bor i området Silverglade, i Valedale, med mina underbara hästar.</div>
<div>Själv så upptäckte jag inte SSO förrän i somras, men innan så har jag spelat Starstable- och Star Academy spelen, då jag var medlem i Pollux och TL-klubben.</div>
</ul>
</div></br>

3. Nu ska du välja vilken del av texten du vill ha i fetstil (jag väljer vissa viktiga ord och även början av paragrafer) och sätta <strong> framför den delen och </strong> efteråt. Ser ut ungefär såhär

<div class="navheader">Om mig</div>
<ul>
<div><strong>I spelet</strong> så heter jag <strong>Luna Snowwatcher</strong> men jag kallas även för "Lunis", "Lu" eller "Strudel". Jag bor i området Silverglade, i Valedale, med mina underbara hästar.</div>
<div><strong>Själv så upptäckte</strong> jag inte SSO förrän i somras, men innan så har jag spelat Starstable- och Star Academy spelen, då jag var medlem i Pollux och TL-klubben.</div>
</ul>
</div></br>

4. Spara! Glöm inte att fylla detta på exakt samma ställe i de kodmallar där du vill att texten ska kunna synas.


Lär dig koda bloggdesign - Bakgrund bakom rubriker

Alla koder är för blogg.se's bloggar.
 
Ibland ser man att folk har antingen färger eller något fint mönster bakom sina rubriker så nu tänkte jag förklara hur man gör detta.
 
1. Om man vill ha någon färg på sina rubriker så börjar vi med att först och främst ta fram Stilmallen och leta reda på vart vi vill ha får bakgrund (t. ex. h3, navheader, commentheader).
 
2. Välj nu vilken färg du vill ha (det är viktigt att du har färgkoden till den också). Det enklaste sättet, tycker jag, är att antingen ta upp färgen i ett ritprogram eftersom koden oftast kommer upp där eller att välja en färg från en färgkarta och kopiera koden därifrån.
 
3. Där du nu vill ha din färg, leta reda på 
background: #färgkod;
Där det står "färgkod" ska du lägga in din färgkod.
 
4. Om du nu vill ha en bild som bakgrund så kan du lätt lägga in den genom att helt enkelt lägga till 
background: #färgkod url (bildlänk här);
Och sedan byta ut "bildlänk här" till länken till bilden som du vill ha som bakgrund.
 
5. Spara! Du kan även lägga till detta på alla rubriker (h3, navheader, commentheader).

Lär dig koda bloggdesign - Bildlänkar i sidmenyn

Alla koder är för blogg.se's bloggar!

1. Börja med att öppna upp kodmallen till din blogg (ex. startsida, inläggsida, kategorisida, arkivsida) och leta upp <div id="side"> .
 
2. Leta reda på där du vill ha din bildlänk och skriv in koden 
<a title="Pop-up meddelande" href="Länk"><img alt="" src="Bildlänk" border="0"></a>

Där det står Pop-up meddelande så ska du skriva in t. ex. ett ord som ska dyka upp när du för musen över bilden (ex. Följ mig på blablabla...). Där det står Länk ska du lägga in URL/webbadressen till vart du vill att bilden ska länka. Till sist, där det står Bildlänk ska du då lägga in länken till bilden som du vill ha (ladda upp bilden på din blogg/tinypic.com eller liknande så kan du hitta länken). Jag skulle rekommendera att du tar reda på hur bred din sidmeny är så att bilden inte blir för stor. Min sidmeny är 230 px bred, så därför är min bild 220 px bred.

Ett exempel på hur detta kan se ut:

<a title="Följ mig på Bloglovin" href="http://www.bloglovin.com/en/blog/11586797"><img alt="Bloglovin" src="https://cdn3.cdnme.se/4372754/6-3/bloglovinknapp_lila_har_535d4764ddf2b365fe7fd831.png" border="0"></a>

3. Lägg sedan in detta på samma ställe i alla kodmallar som du vill att bildlänken ska synas!


Lär dig koda bloggdesign - Vad betyder allt?

Från och med nu kommer jag att börja ge ut bloggdesigntips på hur man gör olika saker på sin blogg. Glöm inte att ni gärna kan föreslå vad för saker som ni vill lära er.
 

För att kunna göra detta, så måste jag först se till att alla förstår vad allt i Stil- och Kodmall betyder.

Stilmall - Det är här alla CSS koder finns, alltså här bestämmer du färg, storlek, typsnitt och liknande.
Kodmallar(start-, inlägg-, kategori- och arkivsida) - Här finns alla HTML koder, här lägger du in allt i din design och bestämmer vart allt ska ligga och vad det ska stå.
 
Eftersom det redan finns så väldigt många människor därute som redan gått igenom vad allt i mallarna betyder (och som dessutom förklarar bättre än vad jag skulle ha gjort) så tänker jag faktist länka till ett annat inlägg på en annan blogg. Framöver så kommer jag nog att förklara saker själv, men just detta kan faktist någon annan förklara lika bra.
 

Hmm...

Sitter och klurar lite på hur jag ska göra den där steg-för-steg saken. Några ville ju veta hur jag flyttade kropssdelar OCH hur jag redigerar hår. Så nu försöker jag fundera ut ett sätt att göra det. Troligtvis blir det en video med text som förklarar hur man gör. Så nu är det väl bara att ta fram screencast-o-matic igen!
 
Åter till att klura. Jobbeli jobbeli jobb!

Designtips - Skugga & Runda hörn

 
 
Om du vill ha skugga bakom t. ex. dina inlägg:
 

Börja med att kopiera följande kod:
 
-webkit-box-shadow: 0px 0px 8px #888; -moz-box-shadow:0px 0px 8px #888; box-shadow: 0px 0px 8px #888; } 
 
Klistra sedan in koden under #content, om du vill ha skugga runt dina inlägg, eller någon annanstans där du vill ha skugga.
 
 
 
Om du vill ha runda hörn på bloggen:
 
Kopiera denna kod:
 
-webkit-border-radius: 15px; /* Saf3-4, iOS 1-3.2, Android <e;1.6 */
-moz-border-radius: 15px; /* FF1-3.6 */
border-radius: 15px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
 
Sedan så klistrar du in den, precis som med skuggan, där du vill ha den t. ex. under #content