5 tips som gör din blogg finare - del 2

Jag har gjort en del 1 Här. Vill ni ha fler liknande inlägg så let me know genom att trycka på gilla-knappen eller kommentera!
 
1. Skippa läs mer - knapp
Jag hatar dessa lösningar som en del använder sig utav! Det må vara fint, men gud så opraktiskt. Tycker inte om att behöva klicka en massa, helst ska man inte ens behöva klicka sig bort från inläggens flöde för att kommentera, det är bäst om allt kan ske så enkelt och smidigt som möjligt.
 
2. Styckeindelningar
Behöver jag ens förklara mig något här. Har ni läst en uppsats eller lång text utan styckeindelningar? Då vet ni vad jag menar.
 
3. Radavstånd
Tycker om luftiga texter mer och mer för var dag som går. Detta kan ändras i stilmallen/css genom line-height, varsågoda att experimentera!
 
4. Underrubriker
Okej, denna måste jag också bli bättre på! Användandet av underrubriker från min sida ligger i underkant, så att säga. Det jag syftar på är sådanna rubriker som strukturerar inläggen, sådanna jag använt mig av i det inlägg du läser precis nu till exempel.
 
5. En röd tråd
Nyckeln till en bra design är egentligen att det finns en röd tråd i allt du visar och gör. Här kan jag också förbättra mig lite. För att ge några exempel har jag använt mig av borders (ramar,linjer) i både dropdownmenyn ovan samt sidomenyn till höger vid rubriker. Använder mig utav samma färger rakt igenom, liknande och passande typsnitt. Listan kan göras lång! Lika viktigt när man läser en blogg som en bok - ögat och huvudet måste få en chans att hänga med. Ha alltså samma stil överallt, så inte sidomenyns rubriker är rosa och inläggets gröna osv. Det är ungefär som när man väljer kläder: man tar ju inte på sig ett par skoterkängor till en vit sommarklänning, det rimmar dåligt.


Designskola: Meny som täcker skärmen

Här ovan på bilden ser ni vad inlägget kommer handla om, alltså hur man får menyn att täcka skärmen på bredden istället för att det ska saknas en bit på vardera sida om menyn! Visar med hjälp av min egna nuvarande design och med hjälp av bilder. 
Precis som med allt inom html & css går problem att lösa på alla möjliga vis. Men såhär brukar jag gå till väga!
 
Låt oss börja med att förstå vad wrapper egentligen är för något. Wrapper betyder ungefär omslag på engelska och alla element (= objekt, såsom sidomeny, header, content osv.) "bör" ligga inom den för att det ska se så bra ut som möjligt för så många som möjligt, eller hur?
Utan wrapper skulle kanske mina inlägg ligga mer åt vänster samt sidomenyn mer åt höger för vissa och tvärtom för andra. Det vi vill åstadkomma i detta läget är att menyn inte ska vara beroende av någon wrapper, vilket vi ordnar genom att lägga menyn utanför wrappern.
 
När vi lägger menyns koder innan <div id="wrapper">, dvs. utanför wrappern kommer det se ut såhär (alla element skulle varit positionerad lite knepigt utan wrapper), inte riktigt så vi ville ha det - men på god väg.
 
Det vi då gör är att ändra bredden på menyn. 
Istället för att använda oss utav fasta mått i enheten pixel så kommer vi använda oss utav procent, 100% = täcker hela skärmen, beroende på upplösning. 50% = halva skärmen, beroende på upplösning m.m.
 
Men om man vill centrera menyns innehåll, alltså texten? Då skapar man en form av wrapper fast för menyn! Jag brukar kalla den topmenu eller bara top. Såhär bör det se ut: <div id="topmenu"> *menyns koder* </div>. Sedan skapar man ett kodavsnitt i stilmallen som kan se ut någonting såhär, men bör anpassas så den passar just dig:
 

#topmenu {
background: #ccc;
width: 100%;
height: 40px;
margin-bottom: 20px;
}

 

Efter det är det bara att centrera menyns innehåll genom att sätta dess margin-left & margin-right till auto - då kommer den automatiskt lägga sig i mitten.
Det som kan spela roll då är bredden på själva menyn. Den bör inte vara 100% bred utan något som passar för ens egna meny. Något mellan 50-70% brukar ofta fungera, alternativt fasta koder t.ex. 800px.
 
Vill poängtera en gång till att detta går att göra på olika vis, men att sättet ovan är något som jag brukar köra med. Hoppas ni förstår vad jag menar, annars är det bara att fråga. Lycka till!


5 steg till en lyckad header

Ovan syns resultatet då jag följt mina egna tips som står nedanför.
 
1. Gör den inte för hög. Något jag tycker är störande är breda headrar, man vill ju inte behöva scrolla så mycket för att komma till sidans innehåll, t.ex. inlägg. Det tar ju massa onödig tid som man kan ägna åt att läsa inlägg och dylikt istället.
 
2. Vill du ha med bilder? Placera dessa så man ser att du tänkt till. Bilderna får gärna gå i samma färgskala och vara i samma kvalité. Exempel: Två bilder, varav en bild är mörk & brusig medan den andra är ljus och i bra kvalité. Dessutom är den ena på ett landskap vars gröna färg drar åt det blåa hållet och den andra på en blomma med gröna blad som drar åt det gula. Dessa bilder kommer inte se så fina ut tillsammans.
 
3. Håll dig till max två typsnitt. Ska du skriva något i headern, t.ex. ditt namn, vad bloggen handlar om, din bloggadress och ett par citat, använd max två olika typsnitt som passar ihop - inte ett typsnitt till varje enskild grej för då är det inte stilrent längre. Då blir det rörigt och förvirrande.
 
4. Klipp inte i bilder. Utklippta saker börjar jag bli allergisk emot! Det är omodernt och inte tufft för fem öre. Framför allt när man verkligen ser att det är utklippt och "pixligt". Behåll istället kanter och sådant om du ska ha flera bilder, jobba med placering för att de ska bli fint. Dessutom sparar du massa tid om du helt enkelt struntar i att sudda bort bakgrunden.
 
5. Matcha med färger i resterande design. Består ditt färgtema till designen av vitt, grått och rött så ska även headern göra det - då är det som finast!
 
Lycka till med headerskapandet!


Designskola: Lägg in videoklipp från Youtube

Sofia: Hej. Hur laddar jag upp en video ifrån Youtube? Jag vill inte länka utan ladda upp video? 

Det är inte alls svårt att ladda upp något från Youtube och hit!
 
1. Klicka på "Dela" under videoklippet du vill lägga upp.
2. Klicka därefter på "Bädda in".
3. Kopiera det som är i textrutan (vill du modifiera om klippet på något vis så klicka på Visa mer)
4. Klistra in koden i inlägget där du vill ha klippet.
 
Klart!
 


Bara 3 inlägg som visas? Snabb och enkel lösning här!

..Med never ending scroll/infinite scroll.
Får fortfarande mycket frågor om detta och nej, ni har inte gjort något fel i era koder utan detta beror på blogg.se och detta problem är ni långt ifrån ensamma om! Den här lösningen finns förmodligen på andra ställen också och nu finns den även här ifall ni behöver den.
Det som ska göras är alltså att lägga till en never ending scroll och det är precis som det låter, det laddas in inlägg allt eftersom man scrollar ner på er blogg.
 
1. Gå in på design via kugghjulet och sedan vidare till startsidans kodmall.
 
2. Leta efter </head> och lägg denna kod ovanför:
 
 
3. Kolla om hela denna kod: {% for entry in entries [:och en siffra]%} finns i din kodmall, isf ska du ta bort [:siffra].
 
4. Lägg denna kod precis ovanför {% for entry in entries %}:
 
 
5.  Leta efter {% endfor %} och lägg denna kod direkt efter {% endfor %}:
 
 
6. Tillsist ska du lägga den här koden alldeles före </body>:
 
Lycka till!


Dropdown med horisontella undermenyer

Vanligtvis har en dropdown lodräta undermenyer/underkategorier men här tänkte jag dela med mig utav mina koder som radar upp undermenyerna horisontellt.
Nackdelen med denhär menyn är att det inte går att ha oändligt med underkategorier om man vill ha det snyggt eftersom de radas upp horisontellt och bredden på en blogg har ju ett slut till skillnad från längden som oftast fortsätter, förstår du? Det är ganska logiskt.
Koderna visar en med upp till de 10 senaste inläggen, 10 kategorier och 10 länkar, bloglovin samt en startknapp. 
Antalet kan du ändra om du har lite förståelse för koder och har ett "humm" om hur de fungerar. Du kan även göra om, så du delar upp kategorierna på samma sätt som jag gjorde när jag hade min meny, istället för att ha alla kategorier i en och samma undermeny.
 
Css: (Kan klistras in var som helst i stilmallden, är du osäker så klistra in det längst ner eller längst upp)

 
 
Html: (Klistras in i kodmallarna där du vill ha den, men direkt efter <div id="header"> </div> valde jag att lägga den i exemplet. Kom ihåg att ändra till din bloglovinlänk i slutet av nedanstående koder)
 
 
Jag har lagt lite kommentarer i koderna som du kan ta hjälp av för att göra den mer personlig.
Är det något du undrar över är det som vanligt bara att kommentera eller fråga via mitt kontaktformulär så kan jag försöka hjälpa dig!


Designskola: "Namn" osv. i kommentarsrutor

För att ni ska få en förståelse för vad detta är kan ni kolla här:
Det man lägger in kallas placeholders och jag hittade dom bland massa andra html-trix på en sida, tyvärr har jag glömt vad den hette.
 
1. Kugghjulet » Design » Inläggssida (spara inläggsidan i anteckningar eller dylikt ifall något skulle gå snett)
2. Tryck på ctrl/cmd + f och sök på commentform. Det ordet kommer bli grön-/gulmarkerat så sedan är det bara att scrolla och leta, ganska långt ner i kodmallen.
3. Kort efter commentform-taggen finns förhoppningsvis något som ser ut såhär (hittar du inte kan du söka på Namn med ctrl/cmd + f): 


Den koden ska du justera lite. Börja med att ta bort Namn: och lägg sedan till placeholder="Namn" efter maxlenght="255".

Så det ser ut ungefär såhär:

Du kan ändra "Namn" till något annat, t.ex Alias eller Name ifall du vill.

4. Gör samma sak med Epost- rutan, men ändra då Namn till t.ex Mail eller E-post.

5.När det kommer till Url-rutan så finns det redan något ifyllt, och det måste vara kvar för att länkarna som kommentatorerna skriver ska fungera. Så där kan du enbart ta bort överskriften, som i mitt fall var URL/Bloggadress:

6. Sen när du ska ändra i själva kommentarsrutan kan koden se ut såhär och bör finnas nedanför url-koderna:

Här ska du ta bort överskriften Kommentar:, precis som överallt annars, och lägga till placeholder="Kommentar"> innan < /textarea >

Så det ser ut såhär ungefär:


Sen är det klart, lycka till och lämna en kommentar ifall något krånglar!