tiistai 15. elokuuta 2017

Koodivinkkejä 3: Instagram gadget

Tänään luvassa pitkästä aikaa koodipostausta, ei tosin ihan perinteistä sellaista. Tässä osassa nimittäin kerron vain yhden koodin, jolla saat instagram gadgetin blogisi sivupalkkiin. Kyseinen gadget löytyy jo varmasti erittäin monesta blogista, sillä koodin lisäämiseen liittyviä ohjepostauksia on lukuisia, mutta siitä huolimatta halusin toteuttaa tämän ohjepostauksen blogissani.

Tämä koodi EI ole CSS-koodi, vaan tämä lisätään postauksen aikana ilmi käyvien ohjeiden mukaan.
Opastan tässä postauksessa vain ilmaisen instagram gadgetin tekemisen, mutta maksullisen widgetin luominen tuskin hirveästi poikkeaa ilmaisen luomisesta. Selvennykseksi, postauksessa sanat gadget ja widget tarkoittavat samaa asiaa! Ohje on myös suunnattu tietokoneella toteutettavaksi, mutta tämän pitäisi onnistua myös esimerkiksi puhelimella.


Instagram gadget sivupalkkiin


Aluksi sinun täytyy mennä Snapwidgetin sivuille. Jotta sen etsintään ei menisi sinulta tunti tolkulla aikaa, pääset sinne tästä. Linkistä klikkaamalla sinun pitäisi päätyä seuraavan näköiselle nettisivulle:



Jos onnistuit tehtävässä, onnittelut, olet päässyt vaiheeseen, jossa alamme tekemään tätä gadgettia!
Tehtävänäsi on ensimmäiseksi painaa oikeasta yläkulmasta kohtaa "widgets". Se heittää sinut sivulla alaspäin oikeaan kohtaan.



Seuraavaksi sinun täytyy valita haluamasi widget. Widgetin niin sanotuissa tiedoissa lukee, mille sovellukselle se on, onko se ilmainen, ja millainen se on. Nyt sinun tarvitseekin valita haluamasi widget. Minun blogissani on tuo, jonka tiedoissa lukee "Free, Instagram, Gird".

Kun valinta on tehty, paina gadgetin alapuolella olevasta "Create your free widget" -nappulasta. Sen jälkeen sinun pitää kirjautua sisään tai luoda tunnukset sivustolle, jotta pystyt tekemään widgetin.

O


Kun se on hoidettu, täytä kohdat. Alla kerron mitä mikäkin kohta tarkoittaa ja mitä niihin pitää/kannattaa laittaa. Jos kaikkia kohtia ei löydy, älä huolestu, silloin gadgetissasi ei vain kysytä niitä.

Username: Instagramisi käyttäjänimi
Description: Kuvaus (ei pakollinen)
Thumbnail size: Kuvan koko
Layout: Monta kuvaa haluat. 3x3 on siis kolme riviä kuvia, joissa kaikissa on kolme kuvaa.
Photo border: Kuvien reunat
Backround color: Taustaväri
Photo padding: Kuvien täyttö
Hover efect: Kuvien efektit
Sharing buttons: Jakopainike, eli kuvaa/kuvia klikkaamalla pääsee instagram profiiliisi.
Responsive: En tiedä, mutta jätä sellaiseksi kuin se on
Widget width: Widgetin leveys

Kun kaikki tarvittavat kohdat on täytetty, paina sinisestä "Get widget" -napista, jolloin eteesi kuuluisi ilmestyä suurin piirtein seuraavanlainen näkymä:


Kopioi kyseinen koodi/linkki, ja mene bloggerissa kohtaan ulkoasu. Sitten lisää sivupalkkiin uusi "HTML/JavaScript" -gadget ja liitä kopioimasi teksti sisältö-kohtaan. Lopuksi otsikoi gadget haluamallasi tavalla, ja paina vielä "tallenna" sekä "tallenna asettelu".
 
 



Ja näin sinulla pitäisi olla hieno instagram gadget blogissasi!



Toivottavasti tykkäsitte tästä koodipostauksesta, vaikka tässä opastinkin vain yhden koodin lisäämisen. Instagram gadget on kuitenkin lähes joka blogista löytyvä gadget, joten sen voisi luokitella lähes tärkeäksi, jos instagram-käyttäjän omistaa.

Tänään, tiistaina, minulla alkoi koulu ja kahdeksas luokka! Ensimmäinen päivä sujui hyvin, ja huomenna taas nokka kohti koulua.

Kivaa alkuviikkoa! -Pihla
Oliko tämä teistä hyvä ja hyödyllinen koodipostaus?

2 kommenttia:

  1. Tämä oli kyllä hyvä postaus! Varmasti monelle todella hyödyllinen ja varsinkin sellaiselle, kuka on yhtä tumpelo ulkoasujen kanssa kuin minäkin.

    VastaaPoista

Ennen kuin kysyt..
.. Muokkaan kuvani Adobe Photoshop Fixillä
.. Otan postausten kuvat puhelimellani, iPhone 6:lla
.. Mikään blogissa esiintyvistä hevosista ei ole omistuksessani

Muista kommentoidessasi olla asiallinen! Positiiviset kommentit piristävät kirjoittajan päivää, mutta rakentava palaute on ehdottomasti tervetullutta, kunhan et lähde haukkumaan ketään.