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.

 

Skribent och ansvarig för DDB. Driver Designa din blogg sedan juni 2015. Har bland annat studerat webbdesign, marknadsföring och online strategier både i Sverige och USA. Jobbar inom IT.

Läs mina andra inlägg

Lämna ett svar

Din e-postadress kommer inte publiceras.