Flickristä kuvat blogiin ilman Flickr-logoista mouseover-efektiä

Lue ensin, miten kuvat saa Flickrin kautta blogiin. Flickr on tosin uudistunut tuosta postauksesta hieman, mutta periaate kaikissa vaiheissa on tietääkseni yhä sama.

Eli jos lataat kuvia Flickrin kautta blogiin nykyisellä systeemillä ilman, että teet mitään muutoksia kuvakoodiin, kuva näyttää tältä, kun viet hiiren blogitekstin kuvan päälle:

Jos et halua tuota Flickrin mouseover-efektiä, toimi näin:
Kun liität kuvan koodia blogitekstin HTML-palstalle, poista siitä (koodin alusta) punaisella alleviivattu pätkä:

Sitten kuvakoodin pitäisi näyttää jotakuinkin tältä:

Tosi simppeli juttu, toivottavasti auttoi :)!

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;
}

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;
}

Postausten kuvien pyöristäminen

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

.post-body img {
border-radius: 30px;
}

Border-radiuksen jälkeinen arvo 30 vaikuttaa postauksen kuvien kulmien pyöreyteen. Sitä lukua voi siis muuttaa pienemmäksi tai suuremmaksi. Mitä suurempi arvo, sitä pyöreämmät kulmat postausten kuville.  

Tuolla luvulla 30px kuvan kulmat näyttävät jotakuinkin tältä:

Kuvanmuokkausohjelmat / kuvaneditointiohjelmat

Päätin tehdä näistä ihan oman postauksen - kyseessä on nimittäin

melko laaja aihe. Kuten otsikosta huomaa, käsittelemme

tässä postauksessa kuvanmuokkauspaikkoja/-editointipaikkoja. Eli siis
netistä ladattavia & netissä käytettäviä ohjelmia, joilla voi muokata
kuvia.

Kaikki postauksessa esitellyt kuvanmuokkausohjelmat ovat

ilmaisia ainakin suurimmaksi osaksi & itse

kokeilemiani. Ainakin tietääkseni. :D

NETISTÄ LADATTAVIA:

 GIMP
- tosi paljon ominaisuuksia
- käyttö vaatii paljon opettelua & kärsivällisyyttä
- ehdottomasti näistä monipuolisin 
- bugii yllättävän paljon
- youtubesta löytyy paljon opetusvideoita
- mahdollisuus suomen kieleen

PAINT.NET
- muistuttaa ominaisuuksiltaan paljon Gimpiä
- mutta Gimpistä helpompi & typistetympi versio
- ominaisuuksia löytyy paljon
- suomenkielinen

PHOTOSCAPE
- paljon ominaisuuksia
- omalla koneellani aika hidas
- aluksi ehkä vaikea käyttää, mutta tähän tottuu nopeasti!
- kivoja ominaisuuksia, kuten helppo & laadukas gif-animaatioiden teko
- suomenkielinen

PICASA
- tosi helppo, nopea & kätevä
- ei paljon ominaisuuksia
- hyvä perusmuokkaukseen
- lifestyleblogini kuvat muokkaan yleensä aina vain tällä
- suomenkielinen

SUOSITTELUT YMS.

GIMP: Vaativalle & kokoneelle käyttäjälle

 PAINT.NET: Ei niin vaativalle ja kokeneelle, mutta laajat

muokkausominaisuudet haluavalle käyttäjälle

PHOTOSCAPE: Toiminnoilla leikittelyyn, soveltuu

kyllä myös hieman haastaviinkin operaatioihin

PICASA: Nopeutta & kätevyyttä haluavalle käyttäjälle,
jossa myös muutamia hauskoja efektejä, pääasiassa kuvien
valotuksen muokkaukseen (erinomainen siinä !!)

huom. suositteluni ovat omakohtaisia kokemuksistani johtuen.
mielipiteet ovat aina mielipiteitä, joten te saatatte olla hyvinkin
erimieltä totutellessanne yllä oleviin muokkausohjelmiin. 


NETISSÄ KÄYTETTÄVIÄ:

FOTOR
- helppo, lataa kuitenkin hitaasti
- mainio kollaaseissa!

IPICCY
- paljon toimintoja (tosin osa vaatii ilmaisen & nopean rekisteröinnin)
- todella kätevä & helppo editointiohjelma
- monet picmonkeyn maksullisiksi muuttuneista toiminnoista ipiccyssä
- jos haluan kuviini jotain extraa, mitä picasa ei tarjoa, teen muokkaukset täällä

PICMONKEY
 - paljon kivoja toimintoja, joista kivoimmat
kuitenkin harmillisesti maksullisia
- hyvin helppokäyttöinen
- suht hyvä kollaasien tekoon

PIXLR
- kolme eritasoista muokkausohjelmaa
- muokkausvaihtoehtoja laidasta laitaan
- voi valita kolmesta mieluisimman ohjelman omia tarpeita
ajatellen; vaativa, keskitaso & helppo 
- editor (haastavin) suomenkielinen

PIZAP
 - helppokäyttöinen ohjelma, jonka ominaisuuksilla
piristää omia kuvia
- toimintoja ei ole erityisen paljon, itse asiassa
niitä on aika vähän
- hauskoja, erilaisia toimintoja

 ***   

Siinä nyt pienet esittelyt editointiohjelmista, joita olen
käyttänyt (okei, olen käyttänyt monia muitakin, mutta
suurimman osan nimet ovat jääneet aivojeni syvimpään
lokeroihin/käyttöni oli hyvin pientä).

Toivottavasti tästä oli apua!

xoxo, iltsu

Toivepostaus: Kivat varjostukset kuville

Se olisi ensimmäisen toivepostauksen vuoro! Toivepostauksia voi kommentoida aina tähän postaukseen. Mutta siis asiaan! Tässä postauksessa käsitellään kuvien varjostuksia. Jos mitään ei blogissa muuteta, kuvissa on usein valmiina varjostukset. Ne eivät ole kuitenkaan erityisen kauniit. Onneksi on olemassa erilaisia vaihtoehtoja saada blogiin näyttävät ja siistit varjot.

Postauksessa olevalla koodilla saa aikaan tällaiset varjostukset (siis jos koodin lukuja ei muuta):

 (kuva ei ole oma otokseni, linkki siihen: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEO66SCfjP9CY7ELSNymvYfC9l7sxhYnnbN4UH9GD0t9d0MUXpKyphItu6nCBLmDh7V_gY5ng6M6LWyYQXbsDMHLGXsZ3UKaiKTf9ziANIRBI6v8gk-I7j8TgNUrGfL3Wn2sv0MYw-xg/s1600/image554.jpg)

Jos haluat yllä olevan kuvan kaltaiset varjostukset, mene Malli -> Mukauta -> Lisäasetukset -> Lisää CSS ja liitä alla oleva koodi sinne:

.post-body img, .post-body .tr-caption-container {
padding: 0px;
border: none;
background: transparent;
box-shadow: 1px 1px 10px rgba(0, 0, 0, .8);
}

Kuten aina, koodista värjättyjä lukuja voit muuttaa mieleisesi mukaan. 

Siniseksi värjättyä lukua muuttamalla voit muuttaa varjon suuruutta. Kokeile siihen vaikka lukua 100 :D

Punaiseksi värjättyä lukua muuttamalla voit muuttaa varjon tummuutta. Siihen vaikuttavat vain luvut 1-9. Mieluinen tummuus selviää vain kokeilemalla.

***

 Teitä on tullut jostain kummasta ihan kamalasta lisää, kiitos siitä! Ja kiitos myös palautteestanne - sitä on aina niin mukava saada ja lukea! Mutta tosiaan, toivepostauksia saa laitella postauksen alussa linkittämääni postaukseen. Olisi nimittäin huippua toteutella sitä, mitä te toivotte! Kohta menee 30 lukijan raja rikki - mahtavuutta!

 xoxo iltsu

Kuvat blogiin Flickrin kautta ilman ärsyttävää Shadow Gallery Boxia

Hui, tänä vuonna ei ole tullut vielä yhtään apupostausta, joten taitaakin olla jo korkea aika laittaa lyyti kirjoittamaan... Tällä kertaa neuvon, miten kuvat saa Flickrin kautta blogiin ilman ärsyttävää "mustaaboxia", "kehystä" tai "shadow gallery boxia" (kaikki nimitykset ovat siis alla olevalle kuvannäyttötavalle):

Flickrin uudistusten myötä kuvan vieminen Flickrin kautta blogiin näyttää blogissa tuolta. Uusi näyttötapa siis näyttää lukijan halutessa kaikki bloggaajan flickr-gallerian kuvat suoraan blogissa sekä Flickrin logon ynnä muut pienet jutut kuvan alareunassa hiiren vietäessä kuvan päälle. Jos et halua kuvista tuollaisia, noudata postauksessa olevia ohjeita. Ensin kerron kuitenkin, miksi kuvat kannattaa ladata Flickrin kautta:

1. Flickriin pääsee Googlen tilitiedoilla - sinun ei siis tarvitse luoda Yahoo-tunnuksia Flickriä käyttäessäsi.
2. Kuvien lataaminen on helppoa ja nopeaa. 
3. Tilaa on paljon.
4. Kuvien laatu ei kärsi.
5. Kuvien väleistä tulee automaattisesti pienemmät.
+ monta muuta asiaa! :-)


JA SE OHJE ILMAN ÄRSYTTÄVÄÄ SHADOW GALLERY BOXIA 
 (samalla neuvo Flickrin kautta kuvan lataamiseen)


1. Mene Flickriin. Klikkaa kohtaa "Upload"

2. Klikkaa kohtaa "Choose photos and videos". Sitten vain valitset kuvat koneeltasi.

  
3. Pääset alla olevan näköiseen paikkaan. Jos haluat kuvasi yksityiseksi, valitse yläpalkista All ja klikkaa vasemmassa palkissa olevaa "Owner settings" -kohtaa. Valitse sieltä "Visible to everyone" ja sen alta "Only you". Sitten vain klikkaat "Upload Photos" -kohtaa.

4. Kun kuvasi on latautunut, klikkaa sitä. Klikkaa sen jälkeen puhekuplan vieressä olevaa nuolta, josta aukeaa valkoinen kuvassa näkyvä laatikko. Nyt tulee tärkeä osa tätä ohjetta! Sinun täytyy valita kuvassa punaisella ympäröity kohta eli HTML. Sinisellä ympäröidystä kohdasta suosittelen valitsemaan Originalin, eli kuvan alkuperäiskoon (muuta koko haluamaksesi vaikka Paintissa). Vihreällä ympäröity kohta on kuvan HTML-koodi, joka sinun tulee liittää postauksesi HTML-koodiin.

5. Sitten vain menet tekemään uutta postausta, ja klikkaat "Luo"-kohdan (minulla Compose, koska käytän bloggerin englanninkielistä versiota) vieressä olevaa kohtaa "HTML". Liitä sinne kopioimasi kuvan HTML-koodi (kuvassa sinisellä ympäröity). Jos haluat kirjoittaa kuvan alle, suosittelen painamaan koodin jälkeen enteriä ja lisäämään ainakin kaksi <br /> -tunnistetta, jotka ovat siis enter-lyöntejä blogitekstissä. Ilman niitä et välttämättä voi kirjoittaa postaukseesi.

 6. Sitten vain lisäät kaikki haluamasi kuvat postauksen HTML-koodiin ja tadaa, kuvat ovat blogissasi huippulaatuisina ja ilman Shadow Gallery Boxia! 

********************************

Jos teillä on jotain toivepostauksia / kysyttävää koodailusta yms., kommentoikaa
postaustoiveenne ihmeessä tähän postaukseen! Alan toteuttelemaan piakoin
postaustoiveita, joita on tullut vasta muutama.

xoxo iltsu

Kuvien välit pieneksi ilman Flickriä

Malli -> Mukauta -> Lisäasetukset -> Lisää CSS

Lisää CSS:ään alla oleva koodi:

img { 
margin-top: -5px; 
margin-bottom: -5px; 
}

Punaiseksi värjättyjä lukuja voit muuttaa mielesi mukaan.

xoxo iltsu

Vähän Photobucketista

Ajattelin tehdä Photobucketille ihan oman postauksen, jossa

kerron vähän siitä, mikä se on & miten kuvat saa sen

kautta ladattua esim. blogin gadgetiin TAI postaukseen.

kuva ladattu laittomasti googlen kuvahausta. kuvaa klikkaamalla pääset alkuperäislinkkiin.

Photobucket on kuvanlatauspalvelu, jonne siis voit

ladata kuvia. Omasta mielestäni Photobucket on kätevä,

nopea ja helppo ladata kuvia esimerkiksi gadgetiksi.

Yllä oleva kuva on Photobucketin etusivusta, kun käyttäjälle

on kirjaudutta sisään. Punaisella ympyrällä vedetystä alueesta klikkaamalla

voit ladata kuvan/kuvia.

NÄIN LATAAT KUVAT PHOTOBUCKETIIN

1. Olet Photobucketin etusivulla (yllä oleva kuva). Klikkaa "Upload".

2. Klikkaa "Choose photos and videos".

3. Aukeaa kuvakansiosi, ja valitse sieltä kuvat, jotka haluat ladata.

4. Kuvat latautuvat sivun alareunaan, ja sitten voit klikata

kuvaa, jotta näet sen alkuperäisessä koossa.

Ja tadaa kuvat on ladattu photobucketiin!

 MITEN KUVA GADGETIIN TAI POSTAUKSEEN?

Kun olet ladannut kuvan Photobucketiin, saatat halua

laittaa kuvan esim. blogin gadgetiin tai postaukseen. Alla olevan

kuvan ympäröidyssä laatikossa (Links to Share this photo) on koodit siihen.

Jos haluat laittaa kuvan postaukseen, klikkaa laatikon HTML-kohtaa, 

jolloin koodi kopioituu hiireesi. Sitten liitä se postauksen HTML-koodiin,

ja tadaa, pitäisi näkyä!

Jos haluat kuvan gadgetiin, mene ulkoasu -> lisää gadget ->

HTML/JavaScript. Kopioi Links to share this photo -laatikon

HTML-kohta niin kuin ylemmässäkin ohjeessa & liitä tyhjään

kenttään.

Jos sinun pitää kopioida kuvan linkki, ÄLÄ kopioi linkkiä selaimen

ylälaidassa olevasta "linkkilaatikosta" (en muista mikä se on

nimeltään, joku osoitekenttä tms.) sivun linkkiä, vaan Links to share this photo 

-laatikon Direct-kohta. Tätä taitoa tarvitaan esim. tässä ja tässä ohjeessa.

 KYSY IHMEESSÄ, JOS PHOTOBUCKETISTA ON JOTAIN KYSYTTÄVÄÄ! :)

xoxo iltsu

Kuvagadget, josta pääsee johonkin linkkiin, muttei sille tarvitse laittaa otsikkoa

Melko monille on tullut ongelmia kuvagadgettia lisätessään; gadgetille

pitäisi laittaa otsikko, jotta gadgetin voisi tallentaa. 

Tällä tavalla sinun kuitenkaan ei tarvitse laittaa gadgetillesi otsikkoa.
Tässä vielä linkki postaukseen, jossa käsittelen Photobucketia. 

1. Lataa kuvasi esim. Photobucketiin (itse suosittelen tätä). Jos sinulla

ei ole Photobucketissa tiliä, luo se. Tulet luultavasti hyötymään tilistäsi.

2. Blogger -> ulkoasu -> lisää gadget -> HTML/JavaScript

Lisää tyhjään kenttään alla oleva koodi:

<a href="tähän tulee linkki, jonne kuvaa klikkaamalla pääsee"><img src="tähän tulee kuvan osoite Photobucketista" /></a>

Punaiselle tekstille laitat kuvan osoitteen, jonne pääsee,
kun klikkaa kuvaa. Siniselle tekstille laitat

kuvan osoitteen Photobucketista.

3. Tallenna & Tallenna asettelu.

LISÄYS: MITEN MUUTAN TÄLLÄ TAVOIN LISÄTYN KUVAN KOKOA?

Toimi siis ihan samalla tavalla, mutta kohdassa 2 lisää tässä postauksessa aiemmin esitellyn koodin tilalle tämä koodi:

<a href="tähän tulee linkki, jonne kuvaa klikkaamalla pääsee"><img src="tähän tulee kuvan osoite Photobucketista" width="40px" height="auto" /></a>
 Vihreää lukua 40 voi muuttaa. Kyseinen kohta kertoo kuvan leveyden sivupalkissa.

Toivottavasti tämä toimi!

xoxo iltsu

Pystykuvat samanlevyisiksi vaakakuvien kanssa

Monet bloggaajat tuskailevat tämänkin ongelman kanssa; miten saada

vaaka- että pystykuvista samanlevyisiä. Itse asiassa se ei ole vaikeata.

Aiemmassa postauksessa *click* käsiteltiin kuvan koon muuttamista.

Jotta saat vaaka- ja pystykuvista samanlevyisiä, sinun 

tulee osata muuttaa kuvan leveys.

JA ASIAAN...

Muutat Paintissa vain jokaisen kuvan leveydeksi saman, 

eli vaaka- ja pystykuvien Paintin vaaka-koko on sama, 

esim. 750, jota minä käytän lifestyleblogini *click*

kuvien leveytenä. Voit tietenkin itse päättää

omien kuviesi leveyden.

Asia ei ole sen vaikeampi. :)

xoxo, iltsu

Kuvakoon muuttaminen Paintilla

Monet bloggaajat tuskailevat kuvan koon muuttamisesta. Miten blogin kuvien koon

pystyisi itse määrittämään? Minäpä kerron.

Itse muokkaan kuvieni koon aina Paintilla, sillä olen sen mieltänyt

helpoimmaksi & nopeimmaksi tavaksi.

1. Olet avannut kuvan Paintiin. Se on kuitenkin liian iso.

2. Klikkaa kohtaa "Muuta kokoa", jonka jälkeen avautuu laatikko. Alla oleva kuva saattaa olla hieman sekava, pahoittelut siitä! Se kuitenkin kertoo koko jutun. 
Kuvapisteet -> säilytä kuvasuhde -> vaaka
ÄLÄ muuta pystykokoa, tai ainakin itse teen kuvan koon muuttamisen aina
vain käyttämällä vaaka-kohtaa. Sitten paina "ok".

3. Ja tadaa, kuva on sopivan kokoinen! 

Huomaathan, että jos laitat kuvan leveyden Paintilla esim. kokoon 300, 
tallennat, mutta jälkeen päin haluatkin kuvasta suuremman, vaikka 
leveyden kokoon 700, kuvasta tulee pikselimössöä. Tee siis kuvan 
koon muuttaminen aina vähitellen suuresta pieneen, ei pienestä suureen, 
jos kyseessä on Paint!

xoxo iltsu