Designtips - Dela upp kategorierna i menyn.

Rubriker är inte min starkaste sida så säg till ni inte tycker att rubriken stämmer överens med inlägget. Mjo jag har lite bloggtorka så jag tänkte att jag kan ju i alla fall försöka förklara hur man delar upp kategorierna i menyn i två kolumner så som jag har gjort. Det här är inte särskilt svårt egentligen men det kan ändå vara bra att ha lite grundkunskaper i det här med koder. 

Så här kan slutresultatet se ut.

Ta upp ett tomt textdokument, exempelvis Anteckningar om du använder Windows eller Textredigerare om du använder Mac. Det kan vara bra att kopiera över koden där innan du lägger in det på din egen blogg. Kopiera koderna gör du genom att markera texten i rutorna här nedanför och håller in ctrl + C för Windows eller cmd + C för Mac.


Kodmallen. Så här ser då kodmallen ut och den består av två delar, alltså "fotografi1" och "fotografi2", det går att byta namn på den från "fotografi1/2" till vad du själv vill ha, det gör det också lättare att hitta koderna sen igen om man skulle vilja gå tillbaka och ändra sin design i framtiden. 
Rubrik. Sedan kanske ni ser också att jag har lagt in en "navheader"-div innan länkarna i första delen och det är min rubrik för dem kategorierna och denna går att ta bort om man skulle vilja det och det är så enkelt som att bara radera hela den raden.
Länkar. För att länkarna ska rada upp sig så måste br-koden vara kvar innan länken, annars hamnar länkarna på samma rad och i detta fallet vill vi ju inte det. Annars är det en helt vanligt länk-kod och inget mer märkvärdigt med det.


Stilmallen. Här har vi alltså stilmallen som också består av två delar. Här är det viktigt att stilmallen har samma namn som kodmallen, i mitt fall då "fotografi1" och "fotografi2, annars kommer det se väldigt knasigt ut när du går in på din blogg. Det är nu det kan vara bra att ha lite kunskap om koder så man vet vad man ska ändra på för att få det resultat man vill ha.
Ändra utseende på länkarna. För att ändra utseende på länkarna så får man ändra färgkoderna under ".fotografi1 a" och ".fotografi1 a:hover". Den färg du vill att din länk ska ha i normala fall lägger du in i koden för ".fotografi1 a" och den färg du vill att din länk ska ha när man för musen över den lägger du in under ".fotografi1 a:hover". Förutom att ändra färg på länken så kan du bestämma om texten ska bli understruken eller fet eller kursiv och liknande. För att texten ska bli understruken gäller "text-decoration: underline" och för kursiv eller fet text så gäller "font-style: bold/italic".

Jag hoppas detta har hjälpt några av er och att ni lyckats tyda min förklaring. Fråga gärna om det är något ni undrar över så ska jag försöka hjälpa er så gott jag kan. ツ