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 :)

Kuviin mouseover-efektejä

Olenkin esitellyt teille jo mustavalkoisuusefektin tässä postauksessa. Nyt kerron teille kuitenkin muutaman kuvaefektin lisää, koska mouseover-efektit ovat olleet viime aikoina tosi kyseltyjä :)!

(Mikä ihmeen mouseover-efekti? Kun hiiren vie kuvan päälle, kuva muuttuu)

Nämä tämän postauksen koodit tuottavat kuvaefektin siis vain postausten kuviin. Ja kuten lähes aina, lisää koodit mallin suunnittelutyökalun CSS-boksiin (malli -> mukauta -> lisäasetukset -> lisää CSS)

HAALENEMISEFEKTI

.post-body img:hover {
opacity:0.2;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}

.post-body img{
opacity:1;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}

BLURRAUSEFEKTI

.post-body img:hover {
filter: blur(5px);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}

.post-body img{
filter: blur(0px);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}

SEEPIAEFEKTI

.post-body img:hover {
filter: sepia(1);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}

.post-body img{
filter: sepia(0);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}

LISÄÄ VÄRIKYLLÄISYYTTÄ

.post-body img:hover {
filter: saturate(200%);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}

.post-body img{
filter: saturate(100%);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}

LISÄÄ KONTRASTIA

.post-body img:hover {
filter: contrast(130%);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}

.post-body img{
filter: contrast(100%);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}

Mouseover banneri / kun hiiren vie bannerin päälle, banneri muuttuu

Tämä onkin vähän monimutkaisempi juttu, joten tämän postauksen suunnittelussa ja tekemisessä kului vähän enemmänkin aikaa. Mutta hei, siirrytään suoraan asiaan.

Mouseover banneri? Mikä se on?
Jos ette tämän postauksen otsikosta saaneet punaisesta langasta kiinni, mouseover banneri on siis banneri (mikä on banneri ja miten se lisätään blogiin -postaus), josta tulee erilainen, kun hiiren vie sen päälle. Alla esimerkkikuva siitä - viekääs hiiri kuvan päälle!



MITEN SAAT MOUSEOVER BANNERIN BLOGIIN?

1. Sinulla pitää olla kaksi samankokoista kuvaa - toinen kuvista on se, joka näkyy, kun hiiri viedään bannerin päälle ja toinen on se kuva, miltä haluat bannerin näyttävän silloin, kun hiiri ei ole bannerin päällä.

2. Lataa nuo kaksi kuvaa nettiin, esim. Photobucketiin.

3. Mene malli -> mukauta -> lisäasetukset -> lisää CSS:ään alla oleva koodi:

#header{
display:none;
{

Kyseinen koodi poistaa blogisi headerin eli Ulkoasusta käsin laittamasi alkuperäisen bannerin. Älä pelkää vanhan bannerin katoamista, nimittäin bannerittomuuden tilalle saat pian vähän eri tavalla laitetun bannerin!

4. Seuraavaksi mene ulkoasuun. Paina Ylätunnisteen alla olevaa kohtaa "lisää gadget". Jos blogisi Ulkoasussa ylätunnisteen alla ei ole palkkia, jossa lukee lisää gadget, valitse sitten blogitekstit-ruudun viereisestä palkista "lisää gadget" -kohta ja paina sitä.

5.  Rullaa alaspäin ja valitse "HTML/JavaScript".

Lisää sinisellä rengastettuun boksiin tämä koodi:

<a href="TÄHÄN BLOGISI OSOITE"><img src="ENSIMMÄISEN BANNERIKUVAN OSOITE" onmouseover="this.src='SEN BANNERIKUVAN OSOITE, JOKA NÄKYY, KUN HIIRI VIEDÄÄN BANNERIN PÄÄLLE'" onmouseout="this.src='ENSIMMÄISEN BANNERIKUVAN OSOITE UUDESTAAN'" /></a>

Laita tähän blogisi osoite -kohtaan blogisi osoite http-muodossa, eli kopioi se selaimesi yläreunassa olevasta linkkipalkista.

EI siis näin: www.blogikoodeja.blogspot.fi
VAAN NÄIN: http://blogikoodeja.blogspot.fi/

Muistathan, että jos latasit kuvat Photobucketin kautta, kopioit kuvien URL-osoitteet kohdasta Direct. Täällä lisää tästä asiasta.

6.  Jos lisäsit tuon äskeisen HTML/JavaScript-koodin sivupalkkiin etkä ylätunnisteen alle, siirrä se nyt ylätunnisteen alle vetämällä.

7. Valmista! Sitten vain painat "Tallenna".

MOUSEOVER BANNERIN KESKITTÄMINEN

Lisää kohdan 5 koodin alkuun <center> ja loppuun </center>. Koodi näyttää siis tältä:

<center>
<a href="TÄHÄN BLOGISI OSOITE"><img src="ENSIMMÄISEN BANNERIKUVAN OSOITE" onmouseover="this.src='SEN BANNERIKUVAN OSOITE, JOKA NÄKYY, KUN HIIRI VIEDÄÄN BANNERIN PÄÄLLE'" onmouseout="this.src='ENSIMMÄISEN BANNERIKUVAN OSOITE UUDESTAAN'" /></a>
</center>

Toivottavasti toimii! :)

Kuvien muuttuminen mustavalkoisiksi hiiren vietäessä päälle

Tarkoitan siis sitä, että tämän postauksen koodilla blogin kuvasta, jonka päälle vie hiiren, tulee mustavalkoinen. Eli kyseessä on siis eräänlainen mouseover-efekti.
Jotta asia selkiytyisi, vie hiiri alla olevan kuvan päälle:



Ja miten tämän efektin sitten saa omaan blogiin?

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

img:hover{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
-webkit-filter: grayscale(1);
}

 Tuo yllä oleva koodi tuo efektin kaikkiin blogin kuviin (banneri, sivupalkin kuvat, postausten kuvat). Jos haluat efektin vain postausten kuviin, toimi muuten samalla tavalla, mutta lisää äskeisen koodin tilalta tämä koodi:

.post-body img:hover{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
-webkit-filter: grayscale(1);
}

Entä sitten feidaantumisefektillä?

Lisää edellä mainittujen koodien tilalta nämä koodit, jotka luovat hitaan, ns. liukuvärjääntymismäisen, siistimmän mustavalkoisuuden hiiren vietäessä päälle. Olenpas hyvä selittämään asioita :D

.post-body img {
filter: grayscale(1%);
-webkit-filter: grayscale(1%);
-moz-filter: grayscale(1%);
filter: grayscale(1%);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}
.post-body img:hover {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}