Pretty baby spin-doktorer http://1apotekonline.com/cialis/ sterling sølv pille kasse

Lägg dina senaste Instagrambilder i headern

En ny trend i bloggvärlden är den om att lägga sina senaste Instagrambilder på en rad i headern. Vi ser flera bloggare som gör sin header mer personlig och intressant genom att göra detta, och det sätter en modern prägel på bloggen samtidigt som att den känns ny och uppdaterad. Tanken är att man designar en header i valfritt redigeringsprogram – till exempel Photoshop – och sedan placerar ut en widget från Snapwidget så att den passar in i headern.

OBS! Detta fungerar inte om du har en privat Instagram.

 

Stilmallskod (du får justera margin-left & margin-top så att det passar din header):

#instagram {
margin-left: 100px;
margin-top: 100px;
}

 

Kodmallskod (läggs inom <div id=”header”></div>):

<div id="instagram">INSTAGRAMKODEN FRÅN SNAPWIDGET HÄR</div>

 

instagram

 

Från filmen:

Senaste instagram-bilderna i headern

Hej.

Jag tänkte visa er hur man gör som Ida har gjort som, som har bloggen adaras, att man lägger de senaste instagram-bilderna i sin header och då använder vi oss för att få själva instagram-bilderna så använder vi oss av snapwidget och det är snapwidget.com jag lägger den länken här nedanför. Vi rullar ner här och så skriver man in sitt username och mitt är ju sannasrum sedan så kan man ha en board eller vad man nu vill ha, det spelar liksom ingen roll. Vi tar en grid och då vill vi ha en bild gånger kanske sex bilder. Det betyder att det blir en på höjden och sex på bredden. Om jag lägger två stycken på höjden och sex på bredden då blir det tolv bilder men lägger jag en på höjden och sex på bredden så blir det sex bilder i en rad och sedan så ställer man in det här vad man vill. Om man vill ha en photo border eller om man vill ha en background color eller precis vad man vill. Sedan trycker man på get widget.

 

Men det vi behöver göra innan vi gör detta, jag visade detta på en testblogg så att det kommer inte se jättesnyggt ut här för jag har inte gjort en header som, vad heter det, kommer matcha med detta. Men jag visar bara hur man lägger in den i headern för att den ska hamna där.

 

Det man gör det är att man först går in i stilmallen och så gör man ett nytt, en ny regel som heter till exempel instagram och då lägger jag en hashtag där för att den ska bara visas en gång, det ska bara finnas med en gång i min kodmall. Så skriver jag typ margin-left 100 pixlar, margin-top 300 pixlar och det här är alltså vart den ska vara när den väl hamnar här och till att börja med så kan man ju bara lägga värden här för att vi kommer troligtvis behöva justera det sedan ändå och så sparar vi det.

 

Sedan går vi in på startsidan och vill man ha detta på alla sidor så ska man ju göra det på startsidan, inläggssidan, kategorisidan och arkivsidan, men vi börjar med startsidan. Bläddra ner till div id header och inom den så lägger vi in den här som vi hade och då är det ju div id och så döpte vi den till instagram och det är i den här då som vi ska lägga in snapwidget-koden så då hämtar den där. Så och så går vi in där igen och så lägger vi in den. Indenterar den lite så att är snygg, men det ville den inte, då lägger vi in den igen. Det är inte alltid det går att indentera så här långa koder men i alla fall så trycker vi på förhandsvisa, det visas ju inte så bra här på, vad heter det, i den här förhandsgranskningen så vi får spara den och så går vi in och kollar och då ser ni, då hamnar mina bilder här som en grid liksom.

 

Men nu ser ni att då hamnade dem nedåt istället så då gör vi som så att vi lägger sex på där och så lägger vi en där istället så ska vi se om det blir skillnad men det beror ju precis helt på hur man vill ha det liksom. Man får ju bygga upp den här, vill man ha en fyrkant så kan man ju lägga en fyrkant och vill man ha en board så kan man lägga en board. Så, nu blev det åt sidan istället men det som jag behöver göra här egentligen det är att jag behöver flytta upp den lite för nu så ligger ju den bakom content som är här och då blir det liksom som en border där som ni ser men det jag kan göra då det är helt enkelt att jag går tillbaka till stilmallen och så istället för att jag har den här att den är margin-top 300 pixlar, för margin-top är ju hur långt ifrån toppen den ska vara. Så då kan jag lägga in 200 pixlar där och så kan jag spara så ser vi hur det ser ut istället. Då ser man ju alla bilder i alla fall och sedan så i snapwidget är där jag bestämmer hur stora bilderna vara så nu är thumbnail size 125 men om jag till exempel lägger 90 pixlar istället och trycker på get widget och så tar jag den så sparar vi där. Går in på startsidan och byter ut den här koden, snapwidget-koden, så, sparar den och uppdaterar. Då ser ni att då blir det mindre bilder istället.

 

Sedan då om jag skulle vilja göra liksom så att det verkligen ser ut som att här är mina senaste instagram-bilder så gör jag det på själva headern så att när jag skapar min header i Photoshop så gör jag liksom en ram runt de här och sedan så placerar jag med hjälp utav min stilmallskod, den här som vi la in här, så placerar jag den precis vart jag vill helt enkelt. Så om jag lägger margin-left 50 pixlar då kommer den att hamnar mer åt vänster för margin-left är ju hur långt ifrån vänster den ska vara, margin-right är hur långt ifrån höger den ska vara, margin-top är hur långt ifrån toppen den ska vara, ni fattar säkert. Men i alla fall, det var det som jag skulle visa er idag så får ni ha en fortsatt trevlig dag. Ha det så gott, hej hej.

 

24 år, läser till Webbutvecklare, driver eget företag inom design, grafik & SEO samt ett företag som designar posters. På fritiden skapar jag bloggar, hemsidor och gör andra projekt inom webb. Jag har bloggat sedan 2007 under namnet Sannas Rum och har också två egna Youtubekanaler.

Läs mina andra inlägg

5 comments

  1. Svaraselina

    Hej! Jag försökte följa din video men de blev helt konstigt, rubrikerna ändrades och det kom ingen bordes på min header 🙁 Vill du hjälpa mig & sätta in den för mig? 🙂


    1. Author
      SvaraSanna

      Hej, vi har tyvärr inte möjlighet att hjälpa mer än de tips vi lägger ut. Det är också svårt att hjälpa till när koderna inte finns kvar, men som du ser i videon så gör jag det, så koderna fungerar och allt, men man måste göra allting korrekt enligt instruktionerna. Lycka till!

  2. SvaraSara

    Hej, jag har för tillfället ingen blogg, men när jag hade en så var denna sidan till otrolig hjälp, så tack för det. 🙂

    Men nu har jag startat en webbshop, en gratisvariant (tictail) som också har kodsystem så jag borde ju kunna fortsätta och göra webbshopen personlig, precis som jag gjort med bloggen.

    Jag fick ordning på lite färger, den lilla stunden jag satt, men skulle hemskt gärna vilja ha in ett instagramflöde och en annan bakgrund, men det fick jag inte till. Ja har ju inte helt koll och testar mig fram, men än så länge har inget funkat haha.
    tillochbörja med har jag inget “div-id” går det att lägga in det bara eller hur gör man?

    VÄLDIGT tacksam för hjälp då jag tycker det här med koder är himla kul och blev superglad när jag insåg att jag kan fixa massa själv igen.

    Mvh Sara

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *