Instagram gadget sivupalkkiin

Mikä on Instagram gadget?
- Se on blogin sivupalkissa oleva widget eli gadget, jossa esiintyy instagram-tilisi kuvia esimerkiksi slideshow'na eli ns. diaesityksenä. Postauksen lopussa on havainnollistava  kuva lopputuloksesta.

Miten blogiin?

1. Ihan ekaksi sun kannattaa mennä blogisi mallin suunnittelutyökaluun (malli -> mukauta) ja mennä siellä kohtaan "Säädä leveyksiä". Tarkista sieltä sivupalkkisi leveys (mulla esim. testiblogissani 360px niin kuin alla olevassa kuvassa näkyy).

2. Sitten kun tiedät blogisi sivupalkin leveyden, mene osoitteeseen http://snapwidget.com/ ja rullaa sivua alaspäin. Sinun pitäisi päästä seuraavanlaiseen näkymään:

3. Mitä mihinkin kohtaan?
Username = ig-käyttäjänimesi
Hashtag = jaa'a, itse jätin tyhjäksi :D
Widget Type = jos haluat diaesityksen, kannattaa valita Slideshow.
Thumbnail Size = tähän sivupalkkisi koko tai sitten sitä pienempi numero riippuen siitä, miten ison Instagram gadgetin haluat blogiisi.
Photo Border: Jos haluat gadgetille kehykset, paina yes, jos et halua kehyksiä, paina no.
Background Color: Gadgetin taustaväri, suosittelen itse valkoista eli ffffff.
Hover Effect: Kun hiiri viedään päälle, voit valita, haluatko jonkun efektin tähän gadgetiin: esim. haalenemis- tai tummenemisefektin.

4. Paina vihreällä pohjalla olevaa Get Widget, maalaa ja kopioi boksista koodi (minulla alla olevan näköinen):

5.  Mene blogissasi Ulkoasuun ja valitse Lisää Gadget. Rullaa alaspäin ja valitse HTML/JavaScript. Liitä tyhjään boksiin juuri kopioimasi koodi.

6. Tallenna ja valmista tuli :)

Gadgetien (ja blogiarkiston) keskittäminen

Olin varma, että mulla on tästä jo postaus - mutta kun sellaista etsin linkattavaksi, en sellaista löytänyt. No, jos se joskus tulee vastaan, poistan sen, mutta jos sellaista ei kerran oikeasti ole, tämä olkoon pysyvä postaus siitä eli sivupalkin gadgetien keskittämisestä.

Malli -> Mukauta -> Lisäasetukset -> Lisää CSS:ään alla oleva koodi:

.sidebar {
text-align: center;
}

Kaikki gadgetit eivät kuitenkaan keskity tuolla koodilla. Jos haluat keskittää blogiarkiston sisällön (joka ei tuolla aiemmalla koodilla siirry keskelle), lisää alla oleva koodi CSS:ään:

#ArchiveList{
text-align: center;
}

Gadgetien otsikon koon muuttaminen ja hieman niiden kustomointia

Otsikko puhuu puolestaan! Postauksen koodilla voi siis muuttaa  sivupalkin gadgetien otsikon kokoa ja aakkoslajia (selitän alempana). Jos haluat tämän ominaisuuden blogiisi, toimi siis näin:
Malli -> Mukauta -> Lisäasetukset -> Lisää CSS:ään alla oleva koodi:

.sidebar h2 {
font-size: 20px;
text-transform: uppercase;
color: grey;
background: blue;
}

Font-size-ominaisuuden jälkeistä arvoa 20 voi muuttaa - se kertoo otsikon kirjainten koon. Arvo voisi olla esim. 15 tai 46.
Colorin (= tarkoittaa tässä itse gadgetin otsikon tekstin väriä) jälkeistä arvoa grey voi muuttaa mieleisekseen väriksi. Värit voivat olla heksakoodimuodossa (eli esim. #cccccc) tai englanninkielisiä värejä, kuten koodissa olen käyttänyt. Tässä postauksessa lisää väreistä.
Background on tässä gadgetin otsikon tausta, ja ominaisuuden jälkeistä väriarvoa blue (=eli sininen) voi muuttaa. Jos gadgetille ei halua taustaa, voi kohdan poistaa koodista tai bluen tilalle laittaa esim. transparent (=läpinäkyvä). 
Text-transformeistä ei olekaan tässä blogissa aiemmin ollut puhetta, joten kerron niistä nyt vähän.
Text-transform tarkoittaa ainakin wikipedian mukaan aakkoslajia. Aakkoslaji taas tarkoittaa suuria ja pieniä kirjaimia. Text-transform on ominaisuus, ja sen jälkeinen osa arvo, kuten koodissa uppercase eli TÄLLAINEN KIRJOITUS.
Esimerkkejä text-transformin arvoista:
lowercase: tällainen kirjoitus, eli ei isoja kirjaimia
uppercase: SE TULIKIN JO ÄSKEN ELI VAIN ISOJA KIRJAIMIA
none: Ei mitään, eli samanlainen, kuin tekstin aakkoslaji oli ennen text-transformin valitsemista.
capitalize: Tällainen Kirjoitus, Eli Joka Sanan Ensimmäinen Kirjain On Iso Kirjain
Koodissa arvon uppercase tilalle voi siis valita jonkin ylläolevista arvoista.

Olen nyt joululomalla, joten kerkeän luultavasti auttaa teitä enemmän ja tekemään myös toivomianne postauksia mm. kehystämisestä :)!

Miten pienennetään marginaaleja?

Tämän postauksen aiempi versio hävisi tuhkatuuleen huonon tietokoneeni takia kommentteineen - pahoittelut vielä siitä hässäkästä! Jouduin siis tekemään tämän uudestaan. Jospa tästä saisi selvää yhtä hyvin kuin edellisestäkin!

Marginaalit ovat teille varmasti jostain yhteydestä tuttuja - jo ala-asteen ekoilla luokilla opettajat neuvoivat piirtämään marginaaleja matikan vihkon reunoihin. Toiset piirsivät marginaaleistaan leveämpiä, toiset taas kapeampia. Yksinkertaisesti sanottuna marginaalit ovat reunoja, joita voi pienentää tai suurentaa. Alla oleva kuva havainnollistaa teille, mitä marginaalien pienentäminen blogimaailmassa tarkoittaa.

Marginaalien pienentämiseen on olemassa erilaisia tekniikoita. Olen kuitenkin mieltänyt seuraavan koodin kätevimmäksi tähän hommaan. Toimi siis näin:
Malli -> mukauta -> lisää css:ään alla oleva koodi:

.content-inner {
padding: 0px;
}

Punaista lukua 0 voi muuttaa. Jos käytät siis arvoa 0, marginaalit ovat olemattomat. Nolla on tässä koodissa pienin mahdollinen arvo. Jos muutat lukua 0 suuremmaksi, marginaalit levenevät eli valkoiset reunat kasvavat. Kannattaa kokeilla erilaisia vaihtoehtoja, jotta löytää sen arvon, joka miellyttää eniten omaa silmää. Muistakaa muuten pienentää blogin leveyksiä samalla, kun käytätte tätä koodia!

Jos sivupalkki ei mene tarpeeksi reunaan, voitte muuttaa sivupalkin siirtymistä enemmän reunaa kohti lisäämällä tämän koodin suunnittelutyökalun CSS:ään:

.sidebar {
margin-left: 10px;
}

Punaista lukua 10 voi muuttaa.

Toivottavasti tämän postauksen koodit auttoivat! :)