keskiviikko 26. maaliskuuta 2014

Divider eli erotin gadgetien väliin

Multa pyydettiin koodia, joka toisi gadgetien väliin viivan, erottimen eli dividerin. Divider onkin tuttu tästä postauksesta. Mutta asiaan.

Ensimmäiseksi pitää tehdä mieleinen viiva/erotin jossain kuvankäsittelyohjelmassa. Viivan voi tehdä helposti muun muassa Paintissa. Sen jälkeen kuva pitää ladata esim. Photobucketiin. Siitä lisää tässä postauksessa. Jos käytätte Photobucketia, lukekaa se huolella, jotta koodi toimisi !!

Kun olet ladannut kuvan johonkin internetin kuvapalveluun, toimi näiden ohjeiden mukaan:

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

.sidebar .widget {
background: url(www.kuvasikaunisosoite.fi);
background-repeat: no-repeat;
background-position: bottom center;
margin:0 0 40px;
padding-bottom: 40px;
}

 
Sulkujen sisään (punaiseksi värjätty teksti) tulee kuvasi osoite. Tämä on tärkeä kohta käyttäessänne Photobucketia, että kopioitte kuvan osoitteen oikeasta kohdasta! Siniset pikseliluvut ovat taas välejä, joita voitte tuttuun tapaan muokata mielenne mukaan.

Toivottavasti tästä oli apua! :-)

xoxo iltsu

lauantai 22. maaliskuuta 2014

Kaikkien linkkien (hidas) liukuvärjääntyminen hiiren vietäessä päälle

Multa pyydettiin tämän postauksen linkkiefektiä kaikkiin linkkeihin, joten toteutin sen mielelläni! Tämä oli helpoimmasta päästä, sillä pohjakoodi oli valmiina. Kyseessä on siis KAIKKIEN LIINKKIEN liukuvärjäytyminen väristä toiseen hiiren vietäessä päälle, eli hover-efekti.

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

 a:link {
text-decoration:none;
color: #000000;
transition: 0.6s;
-moz-transition: 0.6s;
-webkit-transition: 0.6s;
-o-transition: 0.6s;
}

 a:hover {
text-decoration:none;
color: #c9c9c9;
transition: 1.5s;
-moz-transition: 1.5s;
-webkit-transition: 1.5s;
-o-transition: 1.5s;
}


Linkkiä voi ja kannattaa muokata, etenkin värejä, jotta ne sopivat oman blogisi värimaailmaan. HTML Color codeista lisää tässä postauksessa. Myös feidaantumisaikoja (transition) kannattaa muuttaa. Koodin ekassa osassa (a:link) transitionit kertovat, miten kauan linkillä kestää palata normaaliin väriin ja muotoonsa, kun hiiri on viety sen päältä. Koodin toisessa osassa (a:hover) transitionit taas kertovat, miten kauan linkillä kestää feidaantua haluttuun väriin ja muotoon, kun hiiri on viety linkin päälle. 

Toivottavasti saitte jotain selvyyttä! :-)

xoxo, iltsu

perjantai 14. maaliskuuta 2014

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

maanantai 10. maaliskuuta 2014

Lukijaksi liittyminen EI-BLOGGER -blogeihin

Netissä on paljon blogeja, eivätkä ne kaikki ole tehty Googlen Bloggeriin. On Indiedays-blogeja ja vaikka mitä muitakin blogeja, joihin ei voi liittyä perinteisesti Google-käyttäjäraadin lukijapalkin kautta. Se saattaa harmittaa, sillä jos oma blogi on bloggerissa ja suurin osa seuraamista blogeista päivittyy hallintapaneliin, voi olla turhauttavaa seurata blogia ilman, että uusista postauksista saa tiedon.


Onneksi Bloggerilla on tähänkin ratkaisu! Tämä toimii myös niissä tilanteissa, joissa lukijapalkit eivät suostu toimimaan.


1. Mene hallintapaneeliin.
2. Klikkaa lisää-kohtaa.
3. Lukemisto-ikkuna avautuu. Liitä punaisella ympäröityyn
kohtaan blogin linkki, jota haluat lukea.
4. Klikkaa kohtaa Lue. Nyt blogin uudet postaukset näkyvät
hallintapaneelissa!

  xoxo, iltsu

sunnuntai 9. maaliskuuta 2014

Toivepostaus: Blogikoodailun alkeet

Yritän kertoa käsiteltävät asiat mahdollisimman helposti ja lyhyesti, joten päätin jättää johdannon (jonka vain murto-osa tuppaa lukemaan) kokonaan väliin. Mennään siis suoraan asiaan.

Bloggerin blogeissa ulkoasua voi muokata kolmessa paikassa:
- Ulkoasussa
- Mallin suunnittelutyökalussa
- HTML-koodissa

Näistä suosittelen käyttämään Ulkoasua ja Mallin suunnittelutyökalua. Ulkoasussa kannattaa muokata gadgetien paikka, blogin nimi, faviconin liittäminen yms. perusjutut, mutta lähes kaikki koodit suosittelen lisäämään Mallin suunnittelutyökaluun.  

Tietysti on olemassa runsas joukko koodeja, joita Mallin suunnittelutyökaluunkaan ei voi lisätä, mutta peruskoodit se lukee sujuvasti. Niihin tapauksiin on tarkoitettu käyttää HTML-koodia. Alla onkin lista, miksen suosittele käyttämään sitä.

Miksi koodeja ei kannata lisätä blogin HTML-koodiin?
- Mallin suunnittelutyökalua käyttämällä pystytään minimoimaan mahdolliset riskit, joita HTML-koodiin sekaantuminen voi aiheuttaa. Pienikin väärä kirjain/numero väärässä kohdassa voi aiheuttaa suuren katastrofin, pahimmassa tapauksessa blogiisi ei enää pääse, vaan sivu näyttää kaikille varmasti tuttua tekstiä Error.
Kokemuksella voin sanoa, ettei HTML-koodiin kannata kajota ellei ole 101% varma, mitä on tekemässä. Kokeneena koodajaana HTML-koodausta voi tietysti kokeilla. Lisäksi Mallin suunnittelutyökalussa muokkaukset näkee hetkessä, toisin kuin HTML-koodissa. Ja vielä vika juttu: HTML-koodia käyttämällä koodit eivät todennäköisesti toimi enää, jos lisäät ne Mallin suunnittelutyökalun CSS-osioon. Kuten aiemmin mainitsinkin, on olemassa paljon koodeja, jotka eivät kuitenkaan käy CSS-osioon Mallin suunnittelutyökalussa. Ne käyvät vain HTML-koodiin. Jos olet vasta aloittelija, suosittelen jättämään HTML-koodauksen tulevaisuuteen.

KOODIEN LIITTÄMINEN BLOGIIN

Suurin osa tämän apublogin koodeista laitetaan Mallin suunnittelutyökaluun. Alla on kuvasarjaohje, mihin ja miten koodit liitetään sekä varmuuden vuoksi vielä sanallinen selitys.


Hallintapaneeli -> Blogin nimi -> Malli -> Mukauta -> Lisäasetukset -> CSS
Koodit liitetään kenttään, joka on ympyröity punaisella.   

Koodin jälkeen on hyvä painaa entteriä. Itse painan sitä aina kahdesti koodin jälkeen, jotta erilliset koodit erottuvat hyvin.


KOODIEN RAKENTEESTA

Koodeja on erilaisia, ja osaa niistä käytetään CSS:ään. Käydäänpä yleisten CSS-koodien rakenne läpi ja se, millaiset rakenteet kuuluvat HTML-koodin ja millaiset CSS:ään.


Yllä oleva kaappaus on HTML-koodista.  HTML-koodissa suurin osa koodeista on < > -merkkien väliin laitettuja tekstikoodeja. Nämä koodit eivät toimi CSS:ään laitettuna. Jotkut < > -merkkien väliin laitetut koodit toimivat, jos ne laitetaan JavaScriptinä Ulkoasun kautta. Muistakaa siis, että < > -rakenteiset koodit kuuluvat lähinnä vain HTML:ään. Itse en ole perehtynyt HTML-koodeihin, joten niiden rakenteesta en osaakaan muuta kertoa kuin vain sen, että ne alkavat <-merkillä ja päättyvät >-merkkiin.

CSS-koodien rakenne on yksinkertaisempi. Ainoa hankaluus on, että halutuille määreille tarvitaan koodikielelliset määreet. Se saattaa olla välillä pidempikin projekti. Itse tuskailin monta kuukautta yhden määreen kanssa, koska en tiennyt, mikä määre vastaa kyseistä määrettä koodikielellä. Koodailu onkin kuin uuden kielen opettelua.

Alla oleva koodi on navigaatiopalkin värin muuttamiseen kehitelty.

#navbar-iframe {  
background:#ffffff;
}

CSS-koodeissa on kolme tärkeää kohtaa:
1. Valitsin
2. Ominaisuus
3. Arvo

Näiden lisäksi tärkeässä osassa ovat myös aaltosulkeet { ja }.

Valitsin kertoo asian blogista, jota halutaan muuttaa / johon halutaan lisätä jotain. Valitsimen jälkeen tulee {-sulku. Navigaatiopalkin koodissa valitsin on navigaatiopalkki.
Valitsin voi olla myös muodossa .date-header eli valitsimessa on kiinni piste. Yhdyssanat erotetaan usein viivalla.
Ominaisuus kertoo kyseisestä blogin osasta asian, joka halutaan lisätä / jota halutaan muuttaa. Navigaatiopalkin koodissa Ominaisuus on background eli navigaatiopalkin väri. CSS-koodien koodikielellisiä vastineita juurikin Ominaisuus-osassa voi päätellä englanninkielisistä sanoista. Ominaisuuksia voi olla koodissa paljon! Ominaisuuden jälkeen tulee kaksoispiste :
Arvo voi kertoa värin, Ominaisuuden koon jne. Se siis kertoo jotain Ominaisuudesta. Arvon jälkeen tulee puolipiste ;
Kun koodi on valmis, painetaan kerran enteriä ja loppuun lisätään }-sulku.


JOS KOODI EI TOIMI... [ENSIAPUA]

1. Tarkista, että olet kopioinut koodin alusta loppuun. 
2. Kokeile muuttaa koodissa olleita arvoja. Jos arvo on esimerkiksi 10px, kokeile muuttaa arvo esimerkiksi -50px:iin ja katso, huomaatko muutosta.
3. Ethän ole poistanut esim. arvoa muuttaessasi kaksoispistettä jne.?
4. Kokeile, toimiiko blogissasi mikään koodi. Bloggerin bugit voivat aiheuttaa häiriöitä Mallin suunnittelutyökalussa. Lisäksi jos olet kajoontunut blogisi HTML-koodiin, Mallin suunnittelutyökaluun lisätyt koodit eivät enää välttämättä toimi.
5. Tarkista, sopiiko koodi blogisi mallille. Tämän blogin koodit ovat Simplelle, joten en takaa niiden toimivuutta muissa malleissa. Yleensä tämä ei kuitenkaan ole syypää, miksei koodi toimi. 
6. Lisäämäsi koodi voi olla myös ristiriidassa toisen koodin kanssa = toinen koodi kumoaa toisen toimivuuden. 

Ikävä kyllä kaikki koodit eivät toimi kaikissa blogeissa. Blogitkin ovat yksilöitä.


MUUTA MAHDOLLISESTI TÄRKEÄÄ

Jos haluttua määrettä ei osaa muuttaa koodikieleksi, kannattaa hyödyntää muita koodeja. Esimerkiksi tässä blogissa on iso liuta koodeja, joissa on paljon erilaisia Valitsimia ja Ominaisuuksia. Koodikieltä oppii vain harjoittelemalla, kuten vaikkapa englantia tai mandariinikiinaa. Kukaan ei ole seppä syntyessään, ja Harjoittelu tekee mestarin -sanontaan on oikeasti uskominen. Googlettaminen on suotavaa, jos apua kaipaa. Nykyään googlessa on lähes kaikki. Google Kääntäjäkin voi olla avain hakusessa olleeseen määreeseen, nimimerkillä kokemusta on :-D

Toivottavasti tämä postaus avasi edes vähän koodikielestä!

Jos jokin jäi askarruttamaan, kysykää ihmeessä.

xoxo, iltsu