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!



Designskola: Hur man enkelt gör ett färgschema

Vad är ett färgschema och varför ska man använda det?
Ett färgschema är ett par färger (max 5) som man i förväg bestämt att man vill använda i en design eller annat. Det underlättar rätt mycket när man satt ihop ett färgschema innan man börjar med designen; man vet vilka färger som passar ihop redan och man slipper sedan fundera "vilken färg ska jag välja här då?". Det finns ändå över 10 miljoner nyanser att välja mellan. Genom att sätta färgerna man valt bredvid varandra såsom jag gjort nedan, slipper man hålla alla färgkoder (#b2b88f t.ex) i huvudet. Istället tar man en pipett i photoshop eller paint exempelvis, och kollar vilken färgkod färgen i fråga har.
 
Här nedan är färgschemat jag gjorde till min nuvarande design. Jag valde att ha de mesta i grått men detaljer i blått. Ni ser även vad jag menar med att sätta färgerna bredvid varandra.
Från vänster: #3c3c3c, #c5c5c5, #f8f8f8, #7fade4
 
 
Istället för att ha massa olika, slumpvist valda färger, såsom det extrema färgschemat jag skrapat ihop nedanför..
..så bör man träna upp ögat för vilka färger som passar tillsammans. "Chockrosa" och brunt är ingen höjdare, enligt mig - men smaken är ju olika såklart och man måste testa för att bilda sin egna uppfattning om detta.
 
Hur vet man vilka färger som passar ihop?
Istället för att sitta med en färgväljare helt slumpvist och testa sig fram i år och dar så kan man fuska hur enkelt som helst!
Leta fram en bild ni tycker är behaglig för ögat och fin. Behaglig för ögat = inte för många eller för skrikiga färger.
Sådanna bilder kan ni hitta i we♥it t.ex. Sedan är det bara att sitta med en pipett och plocka ut både mörka och ljusa färger man tycker är fina och testa sig fram. Ett tips är att lägga färgerna bredvid varandra, som jag gjort ovan, för att enkelt avgöra om de passar ihop eller inte. Max 5 färger blir bäst.
 
Några färgscheman och dess färgkoder, feel free to use.
 



Responsivt med hjälp av media queries

Fick en fråga om jag kunde visa hur man gjorde sin blogg responsiv, och måste säga att jag är inte alls något proffs på detta utan dehär är helt nytt för mig, jag vet inte om mitt sätt är rätt eller fel - det verkar iallafall fungera någorlunda. Ska ni försöka er på detta, så bör ni göra detta i en testblogg eftersom de kan bli fullkomligt galet ibland.
 
Varför ska man mobilanpassa sin blogg/hemsida?
Jo, för att vi lever just nu i en tid där det är vanligare att surfa med mobilen eller surfplattan än med dator. Man vill ju att designen både ska vara bra funktionsmässigt och snygg, via mobil och dator. Tanken med media queries är att designen anpassar sig utefter vilken skärmupplösning användaren har!
 
Breakpoints.
Det finns massor av olika breakpoints, men eftersom jag är väldigt ny inom responsiv design så valde jag att bara använda en breakpoint för att lägga all energi på att få den att funka.
Den jag använde till stilmallen ser ut såhär: 
...och den betyder att ifall användaren i fråga har en skärm på max 800px så ska koder inom { och } gälla. Annars ska andra koder gälla; antingen andra breakpoints eller den ordinära stilmallen.
 
Hindra användare från att zooma. Gör designen användarvänlig istället så man slipper zooma in och ut för att kunna läsa texten i t.ex inläggen.
Denna kod ska läggas precis innan </head> i alla kodmallar:
 
Tänk på detta när ni kodar i @media queries:
 
Max-bredd istället för en fast bredd och procent istället för pixlar.
De är precis som de låter. Man vill ha relativa värden och inte fasta värden så att breddarna ska kunna ändras utifrån upplösningen på skärmen. Istället för att skriva:
wrapper {width: 1000px; } så skriver man wrapper {max-width: 1000px;}. Vilket direkt leder oss in på nästa bra-att-tänka-på grej.
 
När man gör en design till något som är max 800px bred så vet man ju inte om användarens skärm är 150px bred eller 800px bred. Därför vill man ha pixlar/avstånd/mått i procent så att t.ex en wrapper på 300px bred blir jätteliten på skärmen som är 800px bred men väldigt liten på skärmen som är 150px bred. Har man istället mått i procent så blir breddarna lika stora i förhållande till de olika skärmarna. Ni fattar!
 
När man handskas med så små utrymmen så gäller det att ta vara på varje liten del av skärmen. Därför gjorde jag min wrapper 100% bred, den ska alltså vara lika bred som hela skärmen den visas på. Jag använde sedan wrappern som en linjal ungefär, tex. content blev 90% bred för att jag inte ville att den skulle ta upp hela skärmen utan att det skulle finnas en viss marginal.
 
Meny-problemet.
Jag valde att ta bort menyn helt i min mobilanpassade design för att de var väldigt svårt att få den att se okej ut med dess udda dropdown. 
Har man däremot en sidomeny går det att lägga den nederst på sidan. 
Ett alternativ kan vara att göra en speciell meny som endast ska visas på den mobilanpassade designen, vilket man inte ska tveka på att göra ifall man har tålamod och kunskap.
 
Förhandsgranska.
Förhandsgranska kan man göra genom att öppna sin blogg/hemsida i en ny flik och förminska webbläsarfönstret/zooma in & ut. Annars kan ni leta rätt på en surfplatta eller en telefon och kolla!
 
Fler breakpoints.
 
Mina koder ifall de kan hjälpa er förstå: 
(kopiera inte dessa rakt av ifall ni tänkte de, koderna kommer röra till ordenligt i era designer eftersom mina koder hör till min design)
Mina koder är inte helt felfria, det är jag medveten om. men jag fick det att fungera, vilket var huvudsaken för min del!



Manuellt bildspel

Okej, nu har jag fått lite frågor om hur jag gjorde mitt manuella bildspel i headern jag hade förut, så tänkte visa nu.(Bildspelet styrs genom att man trycker på knappar som gör att man tar sig vidare i bildspelet som du ser på bilden ovan). 
 
Tänker inte gå igenom vad varenda rad kod betyder utan ni får läsa, tänka lite logiskt och prova er fram. Som en liten hjälp på traven har jag lämnat lite kommentarer i koderna om var man ändrar storlek och så. 
 
Bilderna jag lagt in som grund är tagna från we♥it: 1 / 2 / 3 / 4 och jag har använt blogg.se's tema "egen mall" när jag visat detta. Rekommenderar att man gör detta i en testblogg och det kommer underlätta såklart om du har lite förkunskaper inom koder, men det är inte nödvändigt.
 
Stilmallskoden kan läggas in vars som helst så länge det är i stilmallen/css'en, längst ner ifall du inte har så stor koll på koder:

Kodmallskoden ska ersätta <div id="header></div> i kodmallarna, glöm inte att lägga den i alla kodmallar om du inte använder blogg.se's nyare koder!
 
Har du några funderingar, lämna en kommentar så ska jag försöka svara så gott jag kan!



Hur jag lärde mig html & css och hur du kan lära dig


Varför började jag?
2010/2011 började jag blogga här på blogg.se för andra gången, fast inte med llii.blogg.se. Jag hade bloggat tidigare hos blogspot men tyckte att bordern längst upp på bloggen, där de stod blogspot, nästa blogg och sånt, var onödig och jag ville liksom inte ha den, så jag flyttade hit. När jag väl var här så tyckte jag att blogg.se's teman var så förskräckligt fula och jag förstod vekligen inte hur css&html fungerade då, men ville ändå ändra på utseéndet och göra det till min egna blogg.
 

Hur lärde jag mig?
Jag hade hållt på med photoshop ett tag innan, så jag förstod vad t.ex font var och att "arial" var ett typsnitt. Måttet "pixlar" (px) var även bekant. Läste sedan css'en och såg att de mesta var på engelska. Border, de är ju nån slags ram. Font-size, ja men font har ju med texten att göra och size betyder ju storlek. De var lite så jag började & var de något jag inte förstod så googlade jag. Google har hjälpt mig på många sätt och jag gav verkligen inte upp googlingen förrän jag hittat det jag sökte.
 
Css/stilmallen lärde jag mig relativt fort, jag visste vars jag skulle titta ifall jag ville lägga in en header osv.
Html/kodmallen tog längre tid innan jag förstod hur den och css'en hängde ihop. Men likadant där, jag läste i htmlkoderna för att få en överblick av vad den innehöll osv.
 

Hur ska du lära dig?
» Googla mycket! Kommer det inte fram något på svenska så googla på engelska (men då måste du ju såklart kunna lite engelska). 
» Ge inte upp. Hur ska du lära dig om du känner att allt är omöjligt och du är redo att ge upp när som helst ? Lär dig att det tar tid. Att lära sig ett språk gör man inte över en natt, det tar tid.
» Arbeta i testblogg. Experimentera aldrig med din riktiga blogg om du inte är säker på vad du gör. Går något fel kan det va svårt att rätta till det. Genom att använda testbloggar så är det bara att återställa från grunden ifall något går snett.
 

Kan jag hjälpa dig?
Jag tar gärna emot förslag på vad jag kan lära er via designskolan. 
Har dock inte möjlighet att logga in på era bloggar och göra saker åt er eller ha mailkontakt för att lära er något. Jag tar ju emot beställningar på designer etc. och det är självklart dom måste prioriteras framför allt annat som har med design att göra. Vill ni lära er något specifikt så gör jag gärna inlägg om det så alla kan se, istället för att jag ska förklara samma sak för en och en, gång på gång. Det blir effektivare då!



Ändra header i temat "Dotty" utan Pro

Detta kan man göra på två sätt. Första sättet bygger på att ändra de befintliga headrarna och de andra går ut på att ta bort alla headrar och göra en enda stor.
 
1.
Temat Dotty är uppbyggt på egentligen 7 headrar; en större och sex mindre. Dedär bilderna kan man ändra hur enkelt som helst ! Den största headern heter .header-big och de mindre är numrerade som du ser.
Den största headern är 253px bred och 290px hög och de mindre är 116px bred och 84px hög vardera, så tänk på det när du gör headrarna och laddar upp dom!
 
Ta bort detta i stilmallen:
.header-big { background-image: {{options.image.header.urlsrc}}; }
.header-small:first-of-type { background: #000;
.header-small:nth-of-type(2) { background-image: {{options.image.header2.urlsrc}}; }
.header-small:nth-of-type(3) { background-image: {{options.image.header3.urlsrc}}; }
.header-small:nth-of-type(4) { background-image: {{options.image.header4.urlsrc}}; }
.header-small:nth-of-type(5) { background-image: {{options.image.header5.urlsrc}}; }
.header-small:nth-of-type(6) { background-image: {{options.image.header6.urlsrc}}; }
 
Alltså från .header-big till .header-small:nth-of-type(6)
 
Och ersätt det med detta:
.header-big { background:url(här ska länken vara) }
.header-small:first-of-type { background: url(här ska länken vara); }
.header-small:nth-of-type(2) { background: url(här ska länken vara); }
.header-small:nth-of-type(3) { background: url(här ska länken vara); }
.header-small:nth-of-type(4) { background: url(här ska länken vara); }
.header-small:nth-of-type(5) { background: url(här ska länken vara); }
.header-small:nth-of-type(6) { background: url(här ska länken vara); }
 
Nu kan du ändra "här ska länken vara" mot länkarna som du fått när du laddat upp bilderna och spara! OBS! Förhandsgranskningen kan se väldigt knasig ut men spara iallafall och kolla på bloggen hur det ser ut. Ser de knasigt ut så återställ då temat och gör om allt igen.
 
2.
I dehär sättet ska du alltså göra en enda stor header som är 633px bred och 300px hög. När du gjort det och laddat upp den är det dags att ersätta stilmallens koder och startsidans koder med de som jag lagt i två boxar här nedanför. Precis som i första sättet så kan förhandsgranskningen se helt galen ut så spara och titta i själva bloggen för att se ett riktigt resultat. Ser de knasigt ut där så får du återställa temat och göra om.
 
Stilmallskoden, ersätt din stilmall med denna:
 
Kodmallskoden till startsidan, ersätt din startsidas kodmall med denna:
Lycka till och säg till ifall de är något du inte förstår!



Ändra header i de "nya" koderna

I samma veva som blogg.se gjorde en mer seriös grej av designeditorn så ändrades koderna, för att dom ska anpassas utifrån designeditorn. Förstår ni ? Är man inte pro- medlem så går det i många teman (kanske t.o.m alla) inte att ändra header via designeditorn. Men det går med hjälp av stilmallen, man gör ungefär på samma sätt som förut.
 
Man gör helt enkelt en header, som är exakt den storlek man vill att den sedan ska vara i på bloggen. T.ex 800px bred och 335px hög, det kan man göra i paint, photoshop eller annat bildbehandlingsprogram. Sedan laddar man upp bilden på blogg.se, Arkiv » Bilder. Kopiera url'en (länken) som tillhör fullstorlek och klistra in den i en ny flik, förslagsvis.
 
I stilmallen finns det oftast ett headerstycke som kan se ut ungefär såhär : (taget från temat Bokeh)
 

#header {
background-image: {{options.image.header.urlsrc}};
background-position: center center;
background-repeat: no-repeat;
height: 355px;
}

 
Kolla efter ett liknande stycke i din stilmall!
Nu ska man ersätta det jag fetstiltat, alltså {{options.image.header.urlsrc}}; till url(här ska url'en till din header vara);. Mellan paranteserna är det alltså meningen att en bildurl ska vara så klistra in den där. Förhandsgranska och spara! :)
 
Ex. på hur det kan se ut:
 

#header {
background-image: url(https://cdn3.cdnme.se/3398317/7-3/1k_5277c59ae087c3062d5b6073.png);
background-position: center center;
background-repeat: no-repeat;
height: 355px;
}

 



Koppla ihop din blogg med Bloglovin'

Bloglovin' är ett väldigt bra verktyg tycker jag, både för bloggaren och för läsarna. Nu tänkte jag förklara hur man kopplar ihop sin blogg med bloglovin så ens läsare kan börja följa ens blogg!
1. Skapa ett konto om du inte redan har ett & logga in. Sen trycker du på den där lilla ikonen bredvid där man kan söka efter bloggar. Då kommer en lista ner med en mängd alternativ men du ska gå till Your blog.
 
 
2. Nu kommer du till en sida som ser ut ungefär så ↑. Då ska du trycka på Den blåa knappen, Claim blog. Det innebär att du kan ta kontroll över din blogg, se hur många följare du har osv.
 
 
3. Nu kommer en sån ruta som är på bilden komma upp. Du gör precis som det står, du ska kopiera koden till ett nytt inlägg och publicera det men gör det i en ny flik så du fortfarande har bloglovin öppet! När du ser att inlägget är uppe på bloggen trycker du på Claim blog som är nedanför rutan med kod. Om du vill kan du sen ta bort inlägget med koden.
 
Inte svårare än så ! :)
 



Endast 3 inlägg visas på bloggen ?

OBS! Detta är inte säkert att det fungerar längre, HÄR har jag skrivit ett nytt inlägg om detta.
Det verkar som många har problem med det så tänkte att jag kan förklara detta en gång för alla ! 
 
Varför har så många problem med detta och vad är det egentliga problemet?
Jo, när man skapar en blogg får man välja ett tema som grund. Väljer man inte ett tema då utan väljer att göra det längre fram så får man temat silentium som grund - oavsett om man vill eller inte - det är standardtemat, vad jag märkt. Eller så kanske man väljer silentium själv för att det är ett stilrent och ljust tema.(?) 
 
Temat silentium må vara ett ljust och kanske populärt tema men det har sina nackdelar.
{% entry in entries [:siffra] %} - så ser kodstycket ut där man ändrar antal inlägg som ska visas på startsidan. Har man temat silentium så fungerar inte det kodstycket oavsett om man skriver dit 100 eller 0 som siffra. Temat är förinställt på att visa 3 inlägg. Inte 4, inte 5, inte 11 utan 3 inlägg, punkt.
 
Vad kan jag göra åt det?
Byt tema som *grund.  Detta betyder INTE att man måste göra en helt ny design eller så, utan kopiera alla htmlkoder och stilmallen och klistra in i ett worddokument vardera, eller vilket textprogram som helst under tiden så har man sin design i tryggt förvar.
 
Nu, byt till vilket tema som helst huvudsaken det inte är silentium eftersom målet var att råda bot på problemet med 3 inlägg. Kugghjulet » design » byt tema och bläddra ner så hittar du några gratis teman.
Jag har testat några teman där jag garanterar att just det problemet inte finns på; Dusty Rose, Happy Blue, Plenitude och Basic.
 
...Om det inte fungerar då?
Testa med ett annat tema och var lite envis! Syns fortfarande bara tre inlägg? Då kan det helt enkelt vara så att de ligger ett fenomen i det hela, "never-ending-scroll". Bläddra då ner tills alla inlägg tar slut och vänta ½ sek, då dyker några fler inlägg upp.
 
Lycka till !
 
*Grundtemat är ett tema som ni har i bakgrunden men som inte behöver synas. Lägger ni in koder som inte har något med grundtemat att göra alls så syns grundtemat inte, men det finns fortfarande där i bakgrunden. 



Designskola: Ändra antal inlägg på startsidan

Funderar väldigt starkt på att göra videotutorials istället för skriftliga. Vad tycker ni är bäst?
 
Det första du gör är att klicka dig in till koderna, kugghjulet » design. Sen väljer du Startsidans kodmall i rullisten om den inte redan är förvald.
 
Bläddra sedan ner till  <div id="content">. Hittar du inte så ta hjälp av ctrl/cmd + F !
Precis under <div id="content"> bör du hitta något som ser ut såhär:  {% for entry in entries[:siffra] %}. Ändra "siffra"till antalet inlägg du vill ska synas på din blogg!
 
Stöter du på några problem eller vill se något annat här i designskolan så låt mig veta !
 
 
 
 



Desingskola: Radbrytning på htmlspråk

 Du kanske redan har märkt eller kommer och märka att för att göra en radbrytning (ny rad) i html så fungerar inte enter.
Enter i htmlkoderna fungerar för att göra själva htmlkoderna lite luftigare men i bloggen/webbsidan kommer inte några radbrytningar att visas.
 
Istället för enter
Det finns en kod för radbrytning, nämligen <br/>. Så istället för att trycka på enter så skriver man <br/> !
 
Ett exempel på hur det kan se ut i htmlkoderna:
<div class="presentationstext>
En text om dig själv. Vad du heter och hur gammal du är.
Lite om vad bloggen handlar om kanske.<br/>
Här kanske du skriver om dina intressen och vad du allra helst
gör på fritiden.
</div>
 
Hur det kommer se ut på bloggen:
En text om dig själv. Vad du heter och hur gammal du är.
Lite om vad bloggen handlar om kanske.
 
Här kanske du skriver om dina intressen och vad du allra helst
gör på fritiden.
 

Hoppas någon har nytta av detta. Har du några frågor så får du gärna fråga !



Designskola: Dropdowntips

Här kommer jag inte förklara hur du gör en dropdown utan mer hur du ska göra för att sätta den på det ställe du vill ha ! 
 
Vill man ha dropdownen ovanför headern så ska man placera sina koder precis ovanför <div id="header"> i kodmallen.
Såhär kan det då se ut i kodmallen:
 
<ul id="navbar"> « dropdownkoden börjar alltså här
<div id="header">
</div>
 
Vill man istället ha dropdownen under headern så ska man placera sina koder precis under <div id="header></div>
Såhär kan det se ut i kodmallen då:
 
<div id="header">
</div>
<ul id="navbar"> « dropdownkoden börjar alltså här



Designskola: Bild bakom datum och tid

Fått en hel del frågor om hur jag fick en 'boll/ruta/bild' bakom datum och tid. Jag googlade runt och testade en rad olika saker innan jag tillsist fick hjälp av Sannasrum.se. Det hela är mycket enkelt,  varför jag inte kom på det själv kan man ju fråga sig.
 
Kopiera och klistra in koderna ni hittar längst ner i inlägget.
Gör en bild i t.ex photoshop som är i den storlek ni vill ha den i, med genomskinlig bakgrund. Spara som .png ! Ladda upp bilden på din blogg (arkiv » bilder) och kopiera länken. Klistra in den i stilmallskoden, background: url(här);. Sen är det bara att trixa med padding och margin för att få den att passa där du vill ha den! 
 
Stilmallskoden,lägg längst ner: (jag har gått igenom vad de mesta betyder i stilmallen HÄR)
 
.datumbilden {

background: url(bildlänk) no-repeat;
color: #fff;
float: left; 
font-family: arial,calibri; 
font-size: 12px; 
height: 83px; 
width: 83px; 
padding-top: 23px; 
text-align: center;
margin: 45px 0px -50px 750px;

}

 

Koden till kodmallen (jag har lagt den precis under h3 eftersom jag vill ha den under rubriken):

<div class="datumbilden">Här ska datum- & tidkod vara</div>

 

 




Gör så sidomenyn (eller annat) sitter fast när man scrollar

Detta är otroligt enkelt. Samma metod kan man använda på många andra element också, så som dropdown, bakgrund och andra saker. Men i denna tutorial så använder jag mig av en sidomeny som exempel.
 
Det du gör är att gå till stilmallen och leta upp det stycke som hör till din sidomeny, alltså #side. (Ifall du inte hittar det så söker du på side med hjälp av ctrl/cmd+f. Var sökrutan kommer upp beror på vilken webbläsare du använder.)
 
Lägg till position: fixed; i stycket och sen är det klart !
 
ex. på hur det kan se ut:
 

#side {
margin-right:0;
padding: 8px 12px 0px;
background: #fff;
width: 316px;
position: fixed;
}


Några viktiga saker att tänka på:

» Har du en för lång sidomeny kommer inte hela menyn att synas, så det gäller att hålla sig kortfattad.

» Har du panorama- annons aktiverad så kommer det ställa till problem. Annonsen visas inte på alla sidvisningar som du får, bara på ungefär hälften har jag räknat ut. Det innebär att om du ställer in menyns avstånd från toppen avsett för när inte annonsen visas kommer menyn halka ner när annonsen väl visas och tvärt om, tyvärr. Jag har försökt åtgärda problemet med egna metoder men det funkar inte alltid eftersom annonserna är olika bred osv. 

» Det blir lätt jobbigt för ögat när nånting distraherar på sidan av inläggen, så tänk på att använda en enkel design med helhet och mjuka & behagliga färger för ögat så inte fler saker distraherar!

 

Är det något jag förklarat otydligt som du inte förstår eller övriga frågor så kommentera så svarar jag omedelbums. 




Tidigare inlägg