2012-04-22 / 15:56:18 / Designtips: Dela upp dina kategorier

Jag har ju lovat er denna guiden, och här kommer den. Den handlar alltså om hur du delar upp dina kategorier i olika små grupper, med över- och underkategorier {precis som i min kategorimeny}. Det är en aning krångligt om man inte har lite erfarenhet av bloggdesign, men prova er fram och läs noga.

STEG 1
Börja med att gå in i kodmallen och leta upp stycket där dina kategorier ligger. Det börjar med <div class="navheader">Kategorier</div>. Under den raden står det ett stycke koder som börjar med <ul> och slutar med </ul>. Ta bort hela det stycket, från <ul> till </ul>.

Där ska du nu lägga in länkkoder till alla dina kategorier. Länkkoden till varje kategori ser ut såhär:
<a href="http://din bloggadress/category/kategorins namn.html">kategorins namn</a><br />

Vi låtsas att jag har en kategori som heter Mitt liv. Länkkoden till den kategorin blir då såhär:
<a href="http://sagajessica.webblogg.se/category/mitt-liv.html">Mitt liv</a><br />

Lägg in länkkoden för varje kategori du vill ha med.


STEG 2
Nu kommer vi till själva uppdelningen. Nu ska du lägga in överkategorier och sortera länkkoderna i grupper. Om du till exempel vill ha en överkategori som heter "Foto", så skriver du kort och gott Foto i kodmallen. Under Foto lägger du alla länkkoder som du vill ha i den gruppen.
Fortsätt sedan på samma sätt, skriv bara namnet på en överkategori och lägg länkkoderna under.



Sådär ja. Hoppas ni förstod, trots att det blev lite komplicerat. Prova er fram tills det blir som ni vill ha det.



2012-03-08 / 19:46:11 / Designtips: Hitta rätt i kodmallarna

Det blir ett snabbtips idag! Många av er känner säkert redan till det här, men jag tänkte dela med mig av det ändå, då det är helt sjukt bra för alla nybörjare därute.

Det handlar om hur man hittar rätt i kodmallarna (och även i stilmallen). Det är en hel massa koder och annat tjohejsan som är ivägen när man letar efter ett speciellt stycke i kodmallen. Nu har jag visserligen lärt mig vart allt finns, men i början använde jag det här tipset hela tiden.
Okej, så här gör du för att enkelt hitta det du är ute efter:

Vi säger att du är inne i kodmallen. Du letar efter ett stycke som börjar med "content", men du hittar det inte. Klicka då bara på Ctrl och F samtidigt. En liten sökruta kommer då upp (olika för olika datorer osv, men för mig hamnar den uppe i högra hörnet). I rutan skriver du content och klickar på enter för att söka. Kodmallen kommer då att sökas igenom, och när den hittar ordet content så blir det en färgad markering på det ordet. Se nedan. Observera att markeringen kan ha lite olika färger, så som röd, gul, blå eller orange.

När det ser såhär färgglatt och fint ut är det inte särskilt svårt att hitta! Superbra om man är lite ovan vid bloggdesign.




2012-02-04 / 09:45:29 / Installera ett eget typsnitt

Har du tröttnat på alla gamla trista typsnitt du har i din dator? I så fall ska du titta hit! 
Så här gör du för att ladda ner och installera ett nytt typsnitt (font) till din dator:

1.
Börja med att klicka dig in på en jättebra sider för typsnitt; www.dafont.com. Det är helt gratis att ladda ner därifrån och du behöver inte vara medlem eller någonting.


2. Välj ut det typsnitt du vill ha och klicka på Download (längst till höger bredvid typsnittet). Såhär kan det se ut:


Du klickar alltså bara på DOWNLOAD för att ladda ner, som sagt. Ett typsnitt kan innehålla flera olika filer - alltså flera olika typsnitt av samma stil. Den här fonten ovan innehåller till exempel 4 filer.

3. När du klickar på download kommer det komma upp en liten ruta. Klicka då på Öppna.


4.
Då kommer nästa ruta upp. Där kan du se dina typsnittsfiler. Nu måste du Extrahera filerna. Vad detta innebär vet jag inte, men det måste man för att det skall fungera. Klicka alltså på Extrahera alla filer.



5. Ännu en ruta öppnas. Klicka bara på Extrahera i rutan. Då visas dina extraherade typsnittsfiler i en annan mapp.
Nu är de redo att installeras, vilket är mycket enkelt.

6. Öppna mappen där alla dina typsnitt finns installerade. Du når den oftast via Kontrollpanelen > Utseende och anpassning > Teckensnitt.
Lägg över dina typsnittsfiler till teckensnittsmappen (kopiera-klistra in eller bara dra dem med musen). Sedan är det klart! Typsnitten finns nu på din dator och kan användas som vilket annat typsnitt som helst.

Här är några häftiga fonter som jag har laddat ner från dafont.com.




2012-01-07 / 22:44:55 / Designtips: Runda hörn

Det blir ett till designtips idag. Jag tänker lite snabbt berätta hur man får runda hörn på till exempel menyn eller inläggen, så som jag har i min design, på ett väldigt enkelt sätt.
Det enda som behövs är en liten kod som ser ut såhär:

-moz-border-radius: 10px;
border-radius: 10px;

Den här koden ska du sedan lägga in i stilmallen. Om du vill ha runda hörn på menyn, så lägger du koden under #side. Vill du ha runda hörn på inläggen, lägger du koden under #content.
Du kan också ändra 10px till ett annat tal, beroende på hur runda du vill att hörnen ska bli. Ju högre tal, desto rundare. Ju lägre tal, desto fyrkantigare. Busenkelt!

Jag blev helt crazy-överlycklig när jag hittade den här koden, så jag tänkte att jag kanske kan göra någon annan glad genom att dela med mig av den. Hoppas ni förstod, annars: våga fråga!



2012-01-04 / 09:05:21 / Designtips: Byt sida på menyn

Hej på er! Idag är det dags för ett litet designtips, ett väldigt enkelt sådant.
Jag tänkte berätta hur man byter sida på menyn. Ni ser ju att min sidmeny är till vänster om inläggen. Från början när man startar en ny blogg sitter menyn oftast till höger.
Såhär gör man för att byta sida!

1. Gå in i din stilmall. Bläddra ner till #side och #content (se bild). Observera att det ser lite olika ut i olika stilmallar.

2. Det ni ska ändra är float (understruket med rött i bilden). Om ni vill ha menyn till vänster ska det alltså se ut såhär:


div#side
float: left;

div#content
float: right;

Likadant som i bilden alltså. Om ni vill byta tvärtom, från vänster till höger, skriver alltså bara tvärtom (right under #side och left under #content).

Detta är ju ett väldigt basic, men användbart tips, som är enkelt att genomföra. Var det något ni inte förstod är det bara att kommentera & fråga, så hjälper jag! 



2011-12-08 / 21:17:34 / Designtips: Symboler i inläggen

Hej! Idag tänkte jag visa ett väldigt enkelt tips som kan piffa upp dina inlägg och texter: nämligen hur man lägger in olika symboler. Ni har säkert sätt att jag har små hjärtan (), smileys () och annat i mina inläggstexter ibland. Nu ska jag visa hur jag gör sådana!
Det finns två metoder som man kan använda sig av, beroende på vilken sorts symbol man vill ha.

1. SYMBOLER MED HJÄLP AV KODER

I det här systemet har varje symbol en egen kod. Det finns ett begränsat antal symboler att välja mellan, men å andra sidan är det superenkelt att lägga in dem i inlägg. Det enda som krävs är att man kan koderna. Här nedan har jag samlat några användbara och roliga symboler och dess koder, som du kan använda.


NAMN = SYMBOL = KOD
Vänsterpil = ← = &larr; =
Högerpil = → = &rarr;
Uppåtpil = ↑ = &uarr;
Neråtpil = ↓ = &darr;
Spader =  = &spades;
Klöver = = &clubs;
Hjärta = = &hearts;
Ruter = = &diams;
Copyright-symbol = © = &copy;

(Jag förstår om ni inte ser symbolerna riktigt, de är typ mikroskopiska. Har ni större textstorlek så syns de bättre).

Så, hur gör man nu för att lägga in dessa symboler i ett inlägg till exempel? Man lägger helt enkelt in koden där man vill ha den i texten. Det här är HTML-koder, vilket betyder att du måste lägga in dem i HTML-redigeraren.
Sedan klistrar du in koden där du vill ha din symbol. Om jag vill ha till exempel en vänsterpil efter den här meningen, skriver jag helt enkelt in koden för vänsterpil efter den här meningen i HTML-redigeraren.


2. SYMBOLER MED HJÄLP AV BILDER
Det här är den metod som jag brukar använda mig av. Man använder sig helt enkelt av vanliga bilder i texten.

Först får man helt enkelt göra en bild i Photoshop eller något annat program. Låt bilden vara ungefär 10x10 pixlar, det brukar bli lagom. Tänk på att använda samma bakgrundsfärg som bakgrunden på dina inlägg, eller gör bilden med transparent bakgrund!

När du har en färdig bild, laddar du helt enkelt upp den som om du skulle lägga upp en vanlig bild i ditt inlägg, och lägger den sedan där du vill ha den i texten. Lätt som en plätt!

Om du inte vill göra egna symboler så finns det bra sidor där du kan spara bilder och använda. Jag har tagit mina symboler HÄRIFRÅN!


Jag svarar gärna på frågor om du har några, så var inte rädda att hojta till om ni inte förstod! kram på er




RSS 2.0