slide show

Centrera ALLA bilder i inläggen blogg.se

Jag insåg precis att det var över ett år sedan jag postade ett bloggdesign-tips (förutom tipset jag postade förra veckan)! Jag som tycker det är så kul att koda och ofta får frågor kring olika saker borde verkligen göra det oftare. Idag tänkte jag tipsa om hur du centrerar ALLA dina bilder i inläggen. Tex om du tidigare laddat upp dina bilder i 700px och ändrat i din design så att du i fortsättningen kommer ladda upp dom i 800px, då kommer alla äldre bilder vara för små och hamna till vänster. Personligen föredrar jag dom centrerade och det görs hur enkelt som helst.
 
Klista in koden här nedan i din Stilmall, kanske under klassen entrybody (sök: ctrl +f). 
 
Margin: auto; gör att ALLA bilder i dina inlägg kommer att hamna i mitten.
 

Annat typsnitt (från Google Font) blogg.se

Att ha ett snyggt och stilrent typsnitt är viktigt när det kommer till bloggdesign, man vill ju att läsarna ska kunna läsa inläggen. Kanske har du inte hittat någon av de vanliga så som Arial, Times New Roman eller Helvetica och istället vill ha ett lite annorlunda till dina rubriker eller liknade. Då rekommenderar jag dig att använda google fonts. För det räcker nämligen inte att DU laddar ner ett typsnitt i din dator, för då är det endast de med samma typsnitt i sin dator som kan se det. För att alla dina bloggläsare ska kunna se dina typsnitt kan du göra såhär:
 
1. Gå in på fonts.google.com och sök efter det perfekta typsnittet
 
 
2. När du hittat ett typsnitt du gillar: Klicka på pluset som är inringat och sedan där det står "Family Selected".
 
 
3. Kopiera koden som står under Standard (<link href="https......) och klistra in den i din kodmall ovanför </head>.
 
 
4. Kopiera koden som står under Specify in CSS (font-family...) och klistra in den vars i stilmallen du vill ha typsnittet. Är det till rubriker på inläggen kan det vara under h3, är det typsnittet i inläggen kolla under entrybody.
 
Hände du inte riktigt med får du gärna lämna en kommentar!

Hur jag redigerar i photoshop

 
Det händer då och då att jag får frågor om hur jag redigerar mina bilder som jag postar här på bloggen. Ni som själva redigerar lite smått förstår att det kan vara lite svårt att beskriva. Visst, det går, men jag kände att det var enklare att göra en liten video på det där jag visar en bild som ni sett på bloggen. 
 
Har du en sekund över skulle jag bli såså glad om du ville nominera mig till Blogg.se-priset (såklart om du tycker jag förtjänar det). Det gör du HÄR.

Popup fönster

Om du klickar där det står "Om mig" i min meny öppnas ett nytt fönster med bilder och information. I det här inlägget har jag tänkt förklara hur jag gjorde själva popup fönstret. Det är egentligen väldigt enkelt.
 
 
1. Skapa en bild i ex photoshop med det du vill ha i ditt popup fönster. Jag har som sagt information om mig, du kanske vill ha något helt annat. Ladda sedan upp bilden och kopiera url-adressen.
 
2. Kopiera koden i rutan här under och klistar in den ovanför </head> i din kodmall på alla sidor där du vill ha popupen.
 
 
3. Där det står "http://adressentilldinbild.se" byter du ut mot din kod från bilden du nyss laddade upp. Du kan även ändra storlek genom att ändra siffrorna som står vid width och height.
 
4. Koden här under klistarar du in där du vill ha länken. "Din text" kan du byta ut mot det du vill ska stå på länken innan och koden går att placeras ex i din meny.
 

Icon bredvid bloggadressen "favicon"

Du kanske har sett att olika sidor, bloggar, företag osv har en lite icon bredvid sidan adress? Det kallas favicon och är väldigt enkelt att lägga till på sin egna blogg för en proffsig touch.
Jag har för tillfället en cirkel där det står AL. Så i det här inlägget har jag tänkt visa hur du gör för din blogg.se blogg.
 
Först behöver du en bild eller en icon. Antingen gör du en egen, exempel 30x30px stor. Annars finns det mängder om du googlar pixel, icon, favicon eller något sånt. Du laddar upp den på din blogg eller annan sida för att få fram url-koden.
Koden här under kopierar du och klistrar in på din blogg ovanför </head> i din kodmall (alla sidorna). 
 
Där det står "din bild" klistar du in adressen till din bild. Super enkelt!

Hur jag gör mina bloggdesigner

Efter hyffsat efterfrågat inlägg är hur jag gör mina bloggdesigner. För er som har missat det så gör jag mina egna designer och även designer för andra, mer info här. I det här inlägget har jag tänkt gå igenom tre steg hur jag gör. Ni kanske inte blir så mycket klokare men ni kanske förstår hur jag tänker och gör.
 
Det första jag gör när jag ska göra en design är att skissa den, för hand. Jag gör en ruta som ska föreställa en skärm sen ritar jag in vart inläggen, menyn och headern ska vara. Om det ska vara någon yttligare meny, om det ska vara en wrapper osv. Sedan kan jag även rita en sepparat bild för menyns upplägg. Från bilden drar jag sedan pilar eller skriver små kommentarer bredvid. Ex att bakgrunden ska vara #c0c0c0, 250px bred meny, rubrik i typsnitt blabla, skugga runt wrapper osvosv. Det är inte alltid det blir som jag tänkt men jag har iallafall något att utgå ifrån. 
 
Sedan öppnar jag photoshop och en vit bild. Där målar jag olika färger som designen skulle kunna gå i. Jag har oftast 2-3 färger (förutom vitt och svart som min bakgrund i menyn/inläggen och text är). Ofta googla jag colour board + spring/autumn/blog/pink beronde på vad jag söker för färger. Sedan klickar jag ut de färger jag gillar och ser då tydligt vilka som passar ihop. Här under är två av mina senaste colour boards, höst15 och vår16.
 
Jag utgår oftast från min senaste design när jag gör en egen till min egna blogg. När jag gör till andra har jag färdiga mallar, jag väljer då den som passar kundens önskemål bäst. När planeringen är klar går jag vidare men att bygga själv grunden. Jag flyttar om i kodmallen (html) för att få det att se ut som jag vill. Flyttar saker upp och ner i menyn, lägger till nya menyer. Jag ändrar mått och de lite större sakerna i stilmallen (css) för att få grunden att se bra ut. 
 
Sista steget som är mitt favorit steg är att ändra så designen blir "fin". Ändra färger, bakgrund, header, bilder, typsnitt osv för att ge designen sitt utseende. Det är ibland det steget som tar längst tid, har jag ingen header eller bakgrund jag gillar så kan det ta ett tag att få ihop en bra. Ibland kan färgerna krångla till det här, att hitta en bra färg om det inte blev som jag tänkt från början.
 
Ett stort tips till er som gör era egna designer är att göra den på en test blogg, inte på den riktiga där ni bloggar. Jag gör väldigt sällan nu för tiden klart en design på en dag och det är inte så kul att lämna designen halvt kaos fram till nästa gång jag har tid att koda på den.
Hoppas att inlägget uppskattas och har du frågor är det bara att fråga!

Hur jag redigerade

Ett efterfrågat inlägg är hur jag redigerar. Jag brukar inte redigera så mycket, men litegran bara för att piffa upp bilden lite innan jag lägger upp den på bloggen. Här ovan ser ni före och efter och nu har jag tänkt visa lite hur jag har gjort. Oftast ser redigeringen något liknande som den jag har gjort på den här bilden.
 
Jag började med att beskära ner bilden lite innan jag la på ett kurvlager. Just till den här bilden valde jag att börja min kurva sådär. Jag använder för det mesta en S-kurva men får testa mig fram beroende på hur bilden ser ut.    //    Sedan ökade jag kontrasten och intensiteten.
 
Lite mer lyster för att framhäva färgerna    //   Jag brukar ofta ändra färgbalasen lite, lite mer cyan, grön och blå för att få en kallare ton i bilden.
 
Jag "målade" lite skräpa på bilden med hjälp av skärpaverktyget och minskade bilden till 800px innan jag sparade den i PNG för att sedan ladda upp den på bloggen. Att minska bilden till samma storlek som du laddar upp den på bloggen tycker jag gör stor skillad på kvaliten.

Spotify musikspelar blogg.se

Att lägga in en spotifyspelare på sin blogg är väldigt enkelt. När jag gör det går jag inte på den här sidan. Där står det även beskrivet väldigt bra med bilder hur du ska göra.
Du kopierar koden från spotify, klistar in den på sidan, ändrar storlek och kopierar den färdiga koden som ska klistras in i ett inlägg.
Om jag vill ha tre rutor i rad sätter jag min width på 230px, då min content är 700px bred. Men det ändrar du självklart efter hur du vill ha det och hur det ska passa på just din blogg. 
 

Photoshop tips - action

Här kommer ett litet photoshop tips då jag har insätt att den kategorien är lite tom.
Actions eller funktionsmakron. En av mina favorit funktioner i photoshop. Vad gör en action? Det är som "är en förinspelad serie av kommandon i Photoshop". Tycker det är himla smidigt och går fort. Man kan ladda ner färdiga eller skapa egna. Och i det här inlägget tänker jag visa hur jag laddar ner. 
 
1. Jag börjar med att hitta en action att ladda ner. Exempelvis från deviantart.com eller googla. 
2. Öppna sedan photoshop och action/funktionsmakro menyn (1). Om du inte har den öppen eller inte använt den tidigare hittar du åt den under Fönster/Window - Funktionsmakron/Actions. 
2. För att öppna din action i photoshop klickar du på den rullgardninsmenyn (2) och välj Load actions eller Läs in makron. Du väljer den action du vill ha och poff så har du det i till PS.
3. För att använda din action klickar du bara på play knappen (3) så är det klart. Värderna kan ändras för att passa just den bilden du vill redigera. Men här under ser ni för och efter bilder med bara några klicka.
 

Skapa en ruta med text/koder

Jag ha fått ett gäng frågor hur jag gör för att få en ruta där jag skriver koder. Det är super enkelt.
 
 
 
1. Skriv ett inlägg, markera där du vill ha rutan genom att skriva ex HEEEJ
2. När du är klar med ditt inlägg klickar du "ändra redigerare" (längst ner till höger)
3. Där det står HEEEJ klistarar du in koden som står här under.
4. Där det står "DIN TEXT" skriver du din text som ska stå i rutan.
 
<textarea readonly=”readonly” onclick=”this.select();” onfocus=”this.select();” wrap=”soft” cols=”40″ rows=”1″>DIN TEXT</textarea> 
 
Hoppas ni hängde med, annars är det bara att slänga iväg en kommentar.

Bakgrunds tips

Kanske nästan den svåraste delen engligt mig när det kommer till bloggdesign i bakgrunden! Det är ofta där jag brukar fastna när jag bestämmt mig för hur designen ska se ut. 
Jag gör oftaste mina egna i photoshop, men om man inte kan/vill/orkar så finns det ju mängder av gratis bakgrund man får använda. Jag har tänkt länka några av mina favorit sidor så kanske ni får lite tips.
 
 
Här är mina 9 senaste bakgrunder jag har gjort själv!
 
Hur sätta man in en bakgrund på sin blogg? Du hittar ett inlägg här

Egen bakgrund blogg.se

Att lägga in en egen bakgrund kanske är något av det enklaste man kan göra i sin blogg design, och det gör stor skillnad. Men hur gör man då?
 
Sök upp stycket (ganska högt upp):
body {
  background: #fff; url(http://RTYFHJCGVHBJ);
}
 
Det är "url(http://RTYFHJCGVHBJ)" man ändrar. För att få en bild som bakgrund kopierar man bildens URL (hur får man bildens URL [länk]) och klistrar in koden mellan parantesen. 
Har du ingen url( ) kan du bara lägga till den i din kod. Se till att du inte tar bort några tecken.
 
 

Mina favorittypsnitt #2

En uppdaterad verson på min favoritttypsnitt. Den första videon hittar du här och en video på hur man laddar ner typsnitt (pc) har jag gjort en video för längesen här.

Skugga runt din blogg

Super lätt och blir verkligen snyggt! Man kan fixa skugga med hjälp av bilden, men personligen tycker jag att det är lättare med en kod.
Kopiera koden i rutan här nedan och klistra in den i din stilmall beroende på vart du vill ha skugga. Ex runt menyn#side ) inläggen#content ) eller runt hela bloggen ( #wrapper )
 
 
Där det står #888; ändrar du färgen på din skugga. Om du vill ha ex röd skriver du #ff0000;
 
Hoppas att du förstod (:

Photoshoptips - Gör din egna vattenstämpel

Att göra sin egna vattenstämpel är super lätt, här kommer ett enkelt photoshop tips.
 
Öppna en ny bild maybe 1000x200px med genomskinlig bakgrund. Arkiv > Nytt (File > New)
Skriv en text med svart färg. Tex ditt namn, bloggnamn eller vad du nu vill ska stå på stämpel. 
Klicka Redigera > Definera Penselförinställningar (Edit > define brush preset)
Döp din pensel
Klart
 
När du vill använda din pensel väljer du brush verktyget (klicka på tangenten "B") och välj din pensel.

Ett tips:
- Öppna bilden du vill stämpla
- Gör ett nytt lager och markera det nya lagret
- Välj stämpel verktyget och din stämpel
- Välj svart färg och ändra storleken & stämpla
- Sen efteråt kan du ändra opaciteten på lagret. Som du ser på min bild är texten ganska genomskinlig.

Bra kvalité

Jag får ofta frågor hur jag gör för att få bra kvalité på bilderna när jag laddar upp dom på blogg.se. Här kommer ett litet tips ni kan tänka på:
 
Ändra storleken på bilden i ditt redigeringsprogram innan du laddar upp bilden på bloggen. När jag fotar bilder med min kamera är dom ungefär 3000-5000 px bred. Men min blogg är bara 700px bred. Då brukar jag minska bildens bred till 700px i photoshop innan jag sparar den.
 
random bild från arkivet

Snö på bloggen

Här kommer ett super enkelt design tips.
 
Kopiera koden i rutan här under och klista in den ovanför <head> i alla kodmallar du vill ha snö i.
 
 
Sen är det bara att ändra värderna i koden. Vad det är du ändrar står bredvid, tex hur mycket det ska snö, hur stora, hur fort osv. Testa runt tills du är nöjd.
 
Men om du vill ha en annan färg på din snö, eller att det ska falla ner något annat ändrar du det i där här stycket som du hittar ungefär i mitten av koden:
 
document.write("<div id='Obj" + i + "' style='position:absolute; left:0px; top:-20px; z-index:10000; visibility:hidden; color:#fff; font-weight:normal; font-family:Verdana;   (klicka f5 om du inte hittar det och skriva in en bit av koden)
 
För att ändra färg:
Ändra color:#fff; till önskad färg, ex color:#f00000; för röd färg
 
För att ändra vad som faller ner:
ändra det som står mellan >< i den här raden  font-size:"+StarSize[i]+"pt'>•</div> till valfri symbol, ex ♣Ω ♥ ♦ ☆ ♫ * ¤ •∞◊↓

Photoshop tips - text effekter

Glitter penslar finns att ladda ner på brusheezy.com
 
En snabb tutorial på hur man ändrar texten i photoshop. Förstår du inte eller har frågor är det bara att kommentera! Vill ni ha fler photoshop tips? bara att säga till.

Hur jag redigerar

 
 
 

Få ett mellanrum mellan inläggen och menyn

Nu ska jag visa hur jag får ett mellanrum mellan inläggen och menyn i blogg.se
Det finns flera sätt att göra det på, du kan tex ändra "width" i #side eller #content. Men då finns det en risk att om du har bilder där rymms dom inte. Såhär gör jag.
 
Gå in i stilmallen och bläddra ner till #wrapper. Du hittar det ganska långt upp, sök genom att klicka ctrl+f.
Öka det tal som står vid width med kanske 20px (jag ändrade med 20px på bilden där uppe↑)
Så för mig blev det "width: 1029px;"
 
Förhandsgrandska/spara. Så lätt får du ett mellanrum på 20px. Om du vill ha större eller mindre mellanrum så ökar du mer eller mindre. Det är bara att testa sig fram!