Instagram Widget till din Blogg!

 
Vill du ha en Instagram Widget på din blogg så vet Jag två sidor som du lätt kan skapa en Widget på. Jag använder mig av båda dessa sidor och tycker de är väldigt enkla. Vilken av dem du vill använda är helt upp till dig själv och det enda som är skillnaden är valet av olika extra effekter du vill lägga till.
 
1. Lightwidget.com
Visa: Användarnamn eller #Hashtag = Inlogg är ej ett måste
Stil: Grid, Slideshow, Columns
Hover Effects: 7 st olika
Border: Nej
 
2. Snapwidget.com
Visa: Användarnamn = Inlogg är ett måste
Stil: Grid
Hover Effects: 4 st olika
Delnings knappar: Facebook, Twitter, Pinterest
Border: Ja

 
Det förklarar enkelt på varje sida hur du skapar din Widget + får koden, så det tänker Jag inte ta upp här. Men sen när du skapat din Widget och vill lägga in den på din blogg så gör du detta enkelt genom följande steg;
 
1. Design → Redigera HTML → Startsida
2. Leta upp kodavsnittet → <div id="side">
3. Välj vart i din sidomeny du vill lägga din Widget.
4. Förhandsgranska → Spara om du är nöjd!
 
Extra: Vill du ha en rubrik över din Widget så kan du lägga in följande kod över din Widget kod;
<div class="navheader">Instagram</div>


Stor Header / Full Screen Header

 
Jag har fått många frågor om hur man får en Stor Header, större än 1000px på sin blogg, en så kallad Full Screen Header. Och det går att få på Blogg.se, men man måste klura lite med koderna och använda sig av en annan bildkälla/uppladdningsställe än Blogg.se, då maxgränsen här är 1000px.
 
- Din header bör vara minst 1920px bred för att täcka hela sidan på bredden, sen får du välja höjd själv.

1 ♥ Du börjar med att ladda upp din önskade header bild på en sida där maxgränsen för bredd är mer än 1000px, till exempel; tinypic.com. Efter att du laddad upp bilden där så kopierar du bildadressen.
 
2 ♥ Du ska nu byta plats på vart header avsnittet ligger i dina Kodmallar och lägga in denna koden istället;
<div id="header"><img src="http://bildadressentilldinnyaheader"></div>
 
http://bildadressentilldinnyaheader = Din bildadress som du kopierade innan!
 
3 ♥ Du ska lägga in detta OVANFÖR <div id="wrapper"> - Mycket viktigt! och gör samma på alla kodmallar!
 
4 ♥ När du är klar med alla Kodmallarna, så går du in i Stilmallen. Här ska du nu ändra två kodavsnitt. Du börjar med #Header / Du kan antingen ändra så det blir samma eller kopiera kodavsnittet här nedan;
DETTA KODAVSNITT SKA DU HA;
(Kopiera och byt ut mot din nuvarande #header avsnitt.)

#header {
margin-left: -10px;
margin-top: -10px;
margin-right: -10px;
width: auto;
height: auto;
margin: 0px;
padding: 0px;
}


5 ♥ Nu är du nästan klar! Det enda du ska göra nu är att FÖRHANDSGRANSKA och SPARA. Om det är något som fortfarande ser konstigt ut så kan du behöva ändra kodavsnittet body som du se här nedan;

 
 DETTA KODAVSNITT SKA DU HA;
(Kopiera och byt ut mot din nuvarande body avsnitt.)
body {
background: #ffffff;
background-attachment: normal;
margin: 0px auto;
width: auto;
background-position: top;
}
 
- Har du frågor eller behöver hjälp, tveka inte att Lämna en kommentar!


Lägg in FONTS från Google Fonts

Jag har fått många frågor om hur man lägger in egna fonts från Google Fonts, så här kommer en gude om hur du gör detta. Det är väldigt enkelt och det finns över 800 olika fonts att välja mellan, så finns något för alla.
 
 Du börjar med att gå in på Google Fonts och väljer den Font du vill använda dig av.
- I detta exempel kommer Jag använda mig av Fonten Raleway.
 
♥ När du har valt vilken Font du vill använda dig av, så ska du kopiera in denna kod nedan i dina Kodmallar;
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
 
♥ Du ska lägga in koden precis under avsnittet <head>, detta är mycket viktigt!
 
SPARA och gör sedan samma sak i alla dina Kodmallar.
 
När du sedan är färdig med att lägga in det i dina Kodmallar så är det fritt fram att använda dig av Fonten där du vill ha den. Du lägger då in Fontens namn i din Stilmall - font-family: Raleway, Arial, Verdana;
 
♥ EXEMPEL; Du vill använda dig av Fonten till dina Blogginläggs Rubriker;

/** Entry headers **/
h3 {
font-family: Raleway, Arial, Verdana;
font-weight: normal;
font-size: 18px;
text-align: left;
background: #ffffff;
color: #000;
text-transform: uppercase;
margin: 0px;
padding: 0px;
}


 

♥ EXTRA; Vill du lägga in mer än en font, så kommer koden att se ut såhär;
<link href='http://fonts.googleapis.com/css?family=Raleway|Alex+Brush' rel='stylesheet' type='text/css'>

OBS. Tänk dock på att inte lägga in mer än max 3-4 stycken fonts, då det belastar din blogg och det kommer att ta längre tid att "ladda" din blogg. Men om du använder dig av upp till 2 stycken, så kommer du och andra inte märka så mycket skillnad.



← Tidigare inlägg