sunnuntai 28. joulukuuta 2014

Harmaa tausta pois blogin vastaajan kommenteista

Tarkoitan siis tätä:



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

.comments .comment-thread.inline-thread {
background-color: transparent;
}


Ja voilá, harmaa tausta katosi!

Ärsyttävä viiva pois kommenteista

Ärsyttävällä viivalla tarkoitan tätä:


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

.comments .continue {
border: transparent;
}


lauantai 27. joulukuuta 2014

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


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



tiistai 23. joulukuuta 2014

Blogitekstin rivivälin muuttaminen

Bloggerin tekstityökalussa ei pysty muuttamaan riviväliä, mutta onneksi niiden muuttaminen onnistuu ystävämme CSS:n avulla. Jos et ole tyytyväinen blogitekstisi riviväliin, mene Malli -> Mukauta -> Lisäasetukset -> Lisää alla oleva koodi CSS:ään:

.post-body {
line-height: 1.6;
}


Line-heightin jälkeistä arvoa 1.6 voi muuttaa - mitä suurempi arvo, sitä suuremmat välit.

maanantai 22. joulukuuta 2014

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

lauantai 6. joulukuuta 2014

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

torstai 4. joulukuuta 2014

BLOGI MENEE KIINNI VIIKONLOPUKSI

BLOGI ON KIINNI 5.12. - 7.12. KOSKA KONEENI HÄVITTI POSTAUKSEN JA TEKSTEJÄ BLOGISTANI. KÄYTÄN VIIKONLOPUN BLOGIN HUOLTAMISEEN ENNALLEEN.

Hei kaikki! (4.12.12 klo 20.55)

Ette tiedäkään, miten paljon mua tällä hetkellä ottaa päähän. Tänään (kerrankin, pitkästä aikaa!) mulla oli aikaa olla täällä apublogissani, vastata teidän kommentteihinne ja tutkiskella vanhoja postauksia kirjoitusvirheitä etsiskellen. Huomasin, että erääseen postaukseen olin unohtanut linkittää tunnisteita, joten menin muokkaamaan kyseistä postausta. No, ostin tuossa kuukausi sitten vanhan romun tilalle uuden tietokoneen, jota nettisivustot suorastaan kehuivat. Kone ei kuitenkaan täyttänyt lupauksiaan - se on laginut ja temppuillut tosi paljon. Tarkoitus olisi viedä se huomenna huoltoon. Ja miten tämä kone tähän soppaan liittyy? Kun menin muokkaamaan marginaali-postausta, tietokone lopetti toimintansa ja meni jumiin. Se ei enää ladannut postausta, jota olin menossa muokkaamaan. No, kun kone lopetti lagimisen, lisäsin tunnisteen ja tallensin. Tuloksena koko kone meni uudestaan jumiin ja hävitti koko postauksen. Mukavaa, eikö? Samalla katosi myös kaikki postaukseen laitetut kommentit - kaikkiin en edes ollut ehtinyt vielä vastata... Olen tästä hurjan pahoillani! Nyt kun menin katsomaan postausluetteloa, muutama postaus oli mennyt ihan sekaisin. Anteeksi vielä tästä episodista! Näin ei todellakaan saisi käydä.
Yritän viikonlopun aikana luoda uuden postauksen vanhan tilalle ja hoitaa muitakin blogin ongelmia, joten blogi on kiinni 5.12. - 7.12. Viimeistään maanantaina pääsette taas koodiblogini pariin - toivottavasti sitten blogi on taas menetetyistä teksteistä huolimatta kunnossa!

torstai 30. lokakuuta 2014

Sivut/välilehdet blogiin

1.  Jos haluat luoda esimerkiksi sivun, jossa kerrot itsestäsi, mene: Hallintapaneeli > Sivut > Uusi sivu.



2. Kun olet luonut haluamasi sivut, mene Ulkoasu > Lisää gadget



3.  Valitse sivut



4. Voit päättää sivuille otsikon ja valita blogissasi näytettävät sivut. Voit myös vaihtaa sivujen paikkaa ja luoda sivut-gadgetiin ns. ulkoisen linkin, jota klikkaamalla pääsee esim. Instagramiisi.



5. Kun olet valmis, tallenna.

Voit lisätä sivut/välilehdet joko blogisi sivupalkkiin tai bannerin alapuolelle. Voit vaihtaa sivujen paikkaa blogin Ulkoasussa siirtämällä Sivut-gadgettia. Alla olevat kuvat kertovat, miltä sivut näyttävät sivupalkissa ja bannerin alapuolella:



Lue myös, 

lauantai 18. lokakuuta 2014

Sivujen/ylävälilehtien keskittäminen

Jos sinulla on blogissasi sivuja joko ylävälilehtinä tai blogin sivupalkissa ja haluaisit keskittää ne, tämä alla oleva koodi on hommaan räätälöity (malli -> mukauta -> lisäasetukset -> lisää CSS:ään alla oleva koodi):

.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}

lauantai 11. lokakuuta 2014

Tunnisteet samankokoisiksi


Tunnisteet, ehkä tuttavimmin tägit tai tagit, ovat blogissa näitä: 



En osaa paremmin selittää, mitä tunnisteet ovat, mutta ehkä suurin osa teistä tietää. Muokkaamattomassa blogissa tägit ovat erikokoisia riippuen siitä, monessa postauksessa kyseisiä tägejä on käytetty.  Jos kaikista tägeistä haluaa samankokoiset, toimikaa näin;
Malli -> Mukauta -> Lisäasetukset -> Lisää CSS:ään alla oleva koodi:

.Label a {
font-size: 10px;
}

Lihavoitua lukua 10 voi muuttaa - se määrää sen, minkä kokoisia haluat kaikkien tägien olevan.

sunnuntai 5. lokakuuta 2014

Letter spacing -efekti tekstin otsikkoon

Letter spacingia eli t ä l l a i s t a kirjoitusasua pyydettiin blogin tekstin otsikkoon hiiren vietäessä päälle, eli kun hiiri on otsikon päällä, kirjainten välit kasvavat. En osaa asiaa sen paremmin selittää, joten toivottavasti ymmärrätte!

Jos siis haluat tämän efektin blogiisi (sovellettavissa totta kai muuallekin kuin blogin tekstin otsikkoon), toimi näin: Malli -> Mukauta -> Lisää CSS:ään alla oleva koodin pätkä:

h3.post-title a:hover {
letter-spacing: 0.2em;
}


Lukua 0.2 voi muuttaa kohti omaa mieltymystään - siksi se on punaisella. Mitä suurempi luku on, sitä suurempi on kirjainten väli. Sininen a:hover taas kertoo, että kyseessä on hover-efekti (=efekti, jossa linkille tapahtuu jotain, kun hiiri viedään sen päälle, esim. juuri tämä letter spacing -juttu hoverina). Poistamalla koodista kohdan a:hover letter spacing -efekti on pysyvä tekstin otsikossa eikä hover-efektiä tapahdu. 

Miksen vastaa ongelmiinne? Miksi täällä on niin hiljaista?

Moi kaikki! Tähän postaukseen ei sisälly mitään koodeja tai ulkoasuneuvoja - halusin vaan kertoa teille, miksi täällä on nyt piiitkään hiljaista. Suurin osa teistä ei nimittäin tiedä syytä hiljaisuudelleni, ja siksi ihmettelette, miksen vastaa kysymyksiinne. Tämä on ihan ok, itsehän en ole asiaa täällä avannut tai korkeintaan ohimennen. Kaikkeen on syynsä, niin tähänkin.

Aloitin syksyllä lukion. Siirtyminen ylilöysältä ysiluokalta lukioon, varsinaisesti oikeaan kouluun, oli odotettua raskaampi. Työn tekoon on ollut opetteleminen, lukiossa kun ei selviä mitään tekemättä. Siksi aika onkin kortilla - herätykset hirveimmillään puoli kuusi, jos koulu alkaa kahdeksalta. Kuljen kouluun bussilla, ja matkantekoon kuluu tunti suuntaansa. Kaikissa ykkösluokan seuraavissa jaksoissa mun koulu päättyy neljältä, mikä tarkoittaa sitä, että kotona olen vasta viideltä. Siihen sitten päivällinen ja läksykasat päälle. Jaksaminen on täydessä kympissä aamuisen 5.30 -herätyksen jälkeen - vai mitä? Edellä mainittujen asioiden jälkeen ylimääräistä aikaa jää vain vähän. Ja siihen ylimääräiseen aikaan ei yleensä kuulu edes tietokoneen avaaminen saatika juuri tämän blogin kommentteihin vastaaminen. Jokainen kertomanne ongelma on aina selvitettävä perinpohjin ennen ongelman ratkaisua, joten aikaa vastaamiseen lipuu hyvin paljon, ellei kyseessä ole ennestään tuttu ongelma, johon olen jo aiemmin vastauksen keksinyt. 

Jokaisen kommentin kyllä luen yleensä kännykän nettiin turvautuen välitunneilla, joten ei siitä huolta! Kommenttimäärät vaan välillä tulvivat yli äyräiden, joten koska minäkin olen ihminen, jokin kommentti saattaa hukkua kommenttitulvaan ja jäädä huomaamatta. Yleensä hukkuneet kommentit kuitenkin joskus iskevät silmääni! Ja vaikka mulla ei kauheesti aikaa olekaan, ei se tarkoita, ettette te saisi pyytää apua ongelmiinne - tietenkin saatte, vastaamiseen vaan saattaa kulua pitkän pitkä tovi.

Toivonmukaan te saitte nyt vastauksen siihen, miksen vastaa kysymyksiinne ja auta teitä ongelmissanne. Auttaisin, jos aikaa olisi tarpeeksi, mutta vapaa-ajallani (se pieni vapaa-aika, mitä mulla on) keskityn mieluummin asioihin, jotka ovat tärkeysjärjestyksessä korkeammilla sijoilla.

Mukavaa syksyä teille kaikille! :)

keskiviikko 17. syyskuuta 2014

Välilehtien taustaväri + muut härpäkkeet pois


Kuvat kertoo enemmän kuin tuhat sanaa:


Malli > Mukauta > Lisäasetukset > Lisää CSS:ään alla olevat koodit:

.tabs-inner .widget ul {
background: none;
border: none;
}
.tabs-inner .widget li {
border: none;
}

.tabs-inner .widget li a {
display: inline-block;
background: none;
border: none;
}

.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
position: relative;
background: none;
box-shadow:none;
}

lauantai 30. elokuuta 2014

Blogitekstin ja tekstin otsikon välin pienentäminen

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

.post-body {
margin-top: -20px;
}


Jos haluat pienentää blogitekstin otsikon ja blogitekstin väliä, lihavoidun punaisen luvun tulee olla miinuksen puolella eli esim. -10 tai vaikka -55. Jos haluat suurentaa väliä, luvun pitää olla positiivinen eli esim. 10 tai 55.

tiistai 19. elokuuta 2014

Some-ikonit blogin sivupalkkiin

Postausta some-ikoneista toivottiin, joten otin toiveen kuuleviin korviini ja tadaa, tässä olisi postausta some-ikoneista. Kaikille sana ei välttämättä ole tuttu, joten havainnollistetaan some-ikoneja kuvan kanssa:


Some-ikonit ovat siis esimerkiksi blogissa toimivia kuvakkeita blogin sivupalkissa, ja yleensä kuvakkeita klikkaamalla pääsee johonkin sivuun, jonka logo on some-ikonissa. Esimerkkinä voisi mainita kysymysmerkin (joka voi johtaa esim. ask.fm:ään tai bloggaajan esittelysivulle tms.) tai Facebookin logon. 

MISTÄ SAA SOME-IKONEJA? 
Some-ikoneja saa netistä vaikka mistä, mutta ainakin ilmaisena niitä saa täältä eli iconfinderistä. Sivuston lisensseihin en ole perehtynyt eli en siis tiedä, saako kaikkia ikoneita käyttää vaikkapa blogissa. Lisensseihin perehtyminen todellakin on oma paheeni, mutta ei puhuta siitä nyt :-D

MITEN ICONFINDERIÄ KÄYTETÄÄN?
Iconfinder on omasta mielestäni simppeli ja helppokäyttöinen, mutta ihan varmuuden vuoksi ajattelin laittaa mielestäni tärkeimmät asiat tähän postauksen osaan kuvien muodossa.

Alla olevassa kuvassa on screenshot Iconfinderistä. Violetilla on ympäröity kohta, johon olen kirjoittanut englanniksi asian, josta olen halunnut some-ikonin. Punaisella ympäröity kohta on Free eli ilmainen, jolloin sivu on suodattanut  ainoastaan ilmaiset ikonit koneeni näytölle. Mikäs siinä, jos on valmis maksamaan ikoneista, mutta itse olen löytänyt Iconfinderistä paljon hyviä ikoneita ihan ilmaiseksi.



Seuraavassa alla olevassa kuvassa olen valinnut ikonin, jonka olen halunnut ladata koneelleni ja viedä myöhemmin blogini sivupalkkiin. Tärkeimmät asiat tuosta kohdasta olen ympäröinyt punaisella ja violetilla. Punaisella ympäröity kohta on kohta, josta painamalla saat kuvakkeen ladattua koneellesi. Violetilla olen ympäröinyt valittavissa olevat kokovaihtoehdot: useista ikoneista olen löytänyt laajat kokomahdollisuudet. Jos haluat monta ikonia ja ne blogisi sivupalkkiin, suosittelen valitsemaan koon 48 tai 64. Kokoa voi myös muokata ikonin ladattua esimerkiksi Paintissa.



MITEN SOME-IKONIN SAA BLOGIIN

1. Kun olet ladannut some-ikonit koneellesi, sinun pitää ladata ikonit jollekin nettisivustolle esim. Photobucketiin tai Flickriin. Tässä postaus Photobucketin kautta kuvan lataamisesta ja linkittämisestä (!! tärkeä !!)
2. Ulkoasu -> Lisää gadget -> Lisää HTML/JavaScript
3. Jos sinulla on monta some-ikonia, jotka haluat vierekkäin blogisi sivupalkkiin, tarvitset jokaiselle ikonille tämän koodin: <a href="TÄHÄN SIVUSTON OSOITE,JOHON IKONIA KLIKKAAMALLA PÄÄSEE"_blank"><img src="TÄHÄN SOME-IKONIN KUVAN OSOITE" border="0" /></a> Sinun pitää laittaa kaikki koodit yhteen gadgettiin tai niin minä ainakin suosittelen. Alla oleva kuva havainnollistaa tätä juttua:

 Kuvassa on siis kolme koodia samassa gadgetissa. Koodit kannattaa erottaa toisistaan kahdella enterillä. Huomaa, että nettisivuston, jolle some-ikoni vie, pitää olla http-muodossa eikä www-muodossa, niin kuin kuvassa on !! Eli tässä muodossa: https://www.flickr.com/


4.  Sitten vain tallennat ja esikatselet, miellyttääkö some-ikonien järjestys, värit ja paikka sivupalkissa silmääsi. 

Toivottavasti tämä tekniikka toimii teillä! Ja jos ei toimi, ilmoitelkaa ihmeessä asiasta tämän postauksen kommenttiboksiin.

maanantai 11. elokuuta 2014

Navigaatipalkin poistaminen & siitä aiheutuvan tyhjän tilan deletoiminen + infoa

MITEN POISTAT NAVIGOINTIPALKIN?
- Mene ulkoasuun, sieltä klikkaa navigointipalkin muokkaa-kohtaa, rullaa alas ja kliksuta "ei käytössä" -nappulaa. Sitten vain suoritat tallennukset. Alla oleva kuva havainnollistaa.




Kun navigointipalkin poistaa, palkki jättää blogiin tyhjän tilan. Suunnilleen samalta pitäisi näyttää blogissasi kuin alla olevassa kuvassa:


Jos ylimääräisen tilan haluaa pois, lisää tämä koodi blogisi CSS:ään:
.content-inner {
margin-top: -30px;
}


Ja tältä näyttää, kun koodin lisää:


Tästä aiheesta pyydettiin postausta, joten tein sen ilomielin. Ilmoitelkaa ihmeessä jatkossakin teidän mieltä askarruttavia blogiongelmia! Yritän toteuttaa niitä, kun multa löytyy sopivasti aikaa. Haha, onneksi eka jakso ei ole tiukka :)!

sunnuntai 27. heinäkuuta 2014

Tästä alkaa blogilla tienaaminen!

Olette ehkä huomanneet blogissani mainostusbannereita. Ei, en ole ottanut kauppoihin mitään yhteyttä yhteistyökumppanuuden merkeissä vaan liityin TradeTracker Finlandin kumppanuusmarkkinointiyhtiöön julkaisijaksi. Asiasta puhutaan myös Affliate-markkinointina. Aihe ei varsinaisesti liity blogikoodeihin tai ulkoasuneuvoihin (joita blogini on tähän asti postauksissaan käsitellyt), mutta kuitenkin eräänä osana bloggaamiseen, josta on takuulla iloa ja totta kai rahallista hyötyä, mikäli kaipaa lisää paksuutta lompakkoonsa. Kuten minäkin, hih. Mutta hei, nyt teitä varmasti kummastuttaa koko asia, sillä suuri osa teistä on tuskin TradeTrackerista kuullutkaan. Jos haluatte kuulla asiasta tarkemmin, jatkakaa ihmeessä lukemista. 

Tässä on suoralainaus TradeTrackerin sivuilta: "TradeTracker tarjoaa verkossaan oleville julkaisijoille mahdollisuuden ansaita tuloja verkkosivustoiltaan. Tämä on mahdollista mainostamalla TradeTrackerin välittämien ainutlaatuisten mainostajien kampanjoita."
Yksinkertaistettuna homma toimii niin, että a) sinulla on jokin nettisivusto, esimerkiksi blogi b) rekisteröidyt ilmaiseksi TradeTrackeriin julkaisijaksi (=julkaiset sivustollasi yhden tai monen nettisivun, yleensä nettikaupan, mainoksia) & c) alat julkaisemaan TradeTrackerin 384 laajan mainostajan valikosta jotain/joitakin mainoksia nettisivustollasi. Eri mainostajilla on eri tapoja antaa julkaisijalle rahaa yrityksen mainoksista: jotkut antavat sentin pari PELKÄSTÄ MAINOKSEN KLIKKAUKSESTA (helppoa tienaamista kuin mikä, makoiletpa sitten sängynpohjalla!) jotkut mainoksen klikkaamisesta, joka johtaa jonkin yrityksen tuotteen ostopäätökseen. Tapoja tienata TradeTrackerin mainostusportaalilla on muitakin, mutta nuo kaksi ovat helpoimmat ymmärtää - ainakin itselleni :-D.

MIKSI VALITA TRADETRACKER?
- Saat itse valita mainokset 384 mainostajan valikosta, mitkä lisäät blogiisi. Tämä helpottaa tienaamista - jos sinulla on vaikkapa muotiblogi, voit lisätä blogiisi mainoksia nettivaatekaupoista. Tämä toiminto eroaa esimerkiksi Googlen AdSensestä, jossa Google itse päättää, mitä mainoksia blogissasi näyttää. Lisäksi olen kuullut AdSenstä roiman määrän huonoa palautetta...
- Oletteko koskaan kuvitelleet rahan ansaitsemisen olevan näin helppoa? Eihän bloggaamisella rikastu kuin vain harvat ja valitut, mutta pienikin taskuraha ilman varsinaista työntekoa kuulostaa hyvältä vaihtoehdolta. Rahaa ilman raatamista. Sounds great, eikö?
- Liittyessä saa 10€:n alkusumman TradeTracker-tilillesi. Sekin kuulostaa mainiolta! Ja tosiaan, TradeTracker eikä sen mainostajatkaan velota julkaisijoilta lantin lanttia. Rahan tuloa ei voi estää, vai kuinka? 
- Kokeilun arvoinen projekti, ja vaikka tienaamisesi jäisi muutaman euron lukemiin, et häviä mitään. Paitsi miinuksena toki se, että TradeTracker-tililläsi pitää olla vähintään 25€ ennen summan siirtämistä tilille.

Alla olevaa banneria klikkaamalla voit liittyä TradeTrackerin jäseneksi ja ansaita 10€ euron pohjamunan julkaisijaurallasi. Helppoa, turvallista ja hyödyllistä - kukapa ei kaipaisi näin helppoa rahaa itselleen :-D (jos en ihan väärin ymmärtänyt, klikkaamalla blogissani olevia TradeTrackerin mainoksia ja liittymällänne sitä kautta TradeTrackerin julkaisijaksi, saan siitä pienen ansion myös itselleni.)



Hei, kertokaa ihmeessä kokemuksianne affliate-mainonnasta ja TradeTrackerista, jos tähän tapaan päädytte / olette jo päätyneet! Mä tulen kertomaan jossain vaiheessa tarkemmin, miten bloggaamisella tienaaminen lähtee käyntiin ja jääkö tästä käteen vaan pariin muumitikkariin riittävät tuotot vai tosiaan isommatkin summat. (:

lauantai 26. heinäkuuta 2014

Ratkaisuja blogin pyöristämisestä koituviin ongelmiin

Blogin kulmien pyöristämisestä koituu monelle bloggaajalle ongelmia, joihin niksiä voi olla itse vaikea ratkoa. Viime aikoina mulle on tullut paljon kysyttävää juurikin pyöristämisen koodista johtuvista ongelmista. Ongelmia, joita kulmien pyöristämisestä saattaa koitua, on monia, joten olen koonnut tähän postaukseen ikään kuin ensiapupaketin, jolla voitte yrittää ratkoa ongelmaanne. Tässä vielä linkki kulmien pyöristämispostaukseen: http://blogikoodeja.blogspot.fi/2013/10/blogin-kulmien-pyoristaminen.html

ONGELMA 1 ~ BANNERISTA AIHEUTUNEET PUSKEVAT KULMAT

Kulmia pyöristäessä voi tulla ylläolevan kuvan osoittama tilanne vastaan: pyöristetyistä kulmista törröttää valkoiset (toki voi olla myös muunväriset) kulmat. Tässä tapauksessa törröttävät kulmat johtuvat bannerista, jonka kulmia ei ole pyöristetty. Pyöristyskoodi itsessään ei pyöristä banneria, joten suorakulmion muotoinen banneri voi helposti pompata esiin pyöristetyistä kulmista.
Miten korjata ongelma?
- Pyöristä bannerisi kulmat jollakin kuvankäsittelyohjelmalla, esimerkiksi netistä ladattavalla ilmaisella Photoscapella tai netissä käytettävällä Picmonkeyllä klikkaamalla kohtaa "Rounded Corners". IPiccyllä voit esimerkiksi poistaa kaikki ylimääräiset kohdat tekemällä ne läpinäkyviksi kohdasta "Erase Background". 
- Voit myös yrittää saada kulmat banneria siirtämällä / blogia leventämällä / molemmilla syrjään.
Kun lisäät tämän koodin CSS:ään, saat banneria siirtymään vasemmalle:
.header-outer {
margin-left: 20px;
}

Lukua 20 voit muuutaa mieleisesi mukaan.

Kun lisäät tämän koodin CSS:ään, saat banneria siirtymään alaspäin:
.header-outer {
margin-top: 20px;
}

Lukua 20 voit taas muuttaa mieleisesi mukaan. 
  
ONGELMA 2 ~ LÄPINÄKYVÄT KULMAT



Tähän ongelmaan olet saattanut törmätä, mikäli et käytä valkopohjaista Simplen mallia. En ole testannut, näkyykö ongelma muissakin kuin Simplen väripohjaisissa malleissa, mutta niissä tämä ongelma ainakin ilmenee, jos olet käyttänyt pyöristyskoodia. Vaikka valkea blogipohja onkin pyöristynyt, se on jättänyt jälkeensä haaleat, vähän läpinäkyvää muistuttavat kulmat. Ikävää, eikö?
Miten korjata ongelma?
- Malli -> mukauta -> lisäasetukset -> lisää alla oleva koodi CSS:ään:
 

.content-outer{
box-shadow: none;
}

ONGELMA 3 - VALKOISET, PIENEMMÄT KULMAT, JONKA SYYNÄ EI OLE BANNERI



On siis kyse ongelmasta, johon ei banneri vaikuta. Ainakin oikeaan kulmaan on jäänyt valkoinen, esiin puskeva kulma, jota ei saa banneria mihinkään suuntaan siirtämälläkään pois. Tämä ongelma ei tietojeni mukaan automaattisesti esiinny ainakaan Simplen valkopohjaisessa mallissa, mutta esimerkiksi sinipohjaisessa Simplessä kyllä.
Miten ratkaista ongelma?
- Hallintapaneeli -> Malli -> Mukauta (eli menet mallin suunnittelutyökaluun) -> Lisäasetukset -> Taustat -> Ylätunnisteen tausta -> Muokkaat sen läpinäkyväksi

Toivottavasti tästä oli apua! Lisäilen tänne ongelmia sitämukaa, jos niitä teille tulee. :-)

keskiviikko 2. heinäkuuta 2014

Toivepostaus: Tekstin otsikon varjostus hiiren vietäessä päälle -efekti

Postauksen otsikon varjostamista toivottiin, joten toteutin sen mielelläni! Jos teille tulee muutenkin jotain postausehdotuksia, niitä saa aina laitella! Teitä on muuten tullut taas hurjasti lisää, nimittäin lukijapalkki näyttää yli 50 lukijaa! Mahtavaa!

NÄIN TEET:
Malli -> Mukauta -> Lisäasetukset -> Lisää CSS

Liitä CSS:n kenttään alla oleva koodi:

h3.post-title a:hover{
text-shadow: black 3px 2px 2px;
}

Black tarkoittaa varjostuksen väriä. Väri voi olla joko Heksakoodi (#000000-muotoinen, täällä linkki heksapalettiin ja täällä heksakoodivärien ohjeeseen).

Punaiset kakkoset määrittävät, millainen varjostuksesta tulee paksuudeltaan/toiminnoiltaan. Ensimmäinen kakkonen määrittää, miten vinoon oikealle/vasemmalle (riippuu käytetäänkö posiitivista vai negatiivista lukua: negatiivinen eli miinusmerkki luvun edessä vie varjostuksen vasemmalle) varjostus menee. Toinen kakkonen määrittää, miten alas varjostus menee otsikosta. Kolmas kakkonen määrittää varjon selvyyden: jos käytetään numeroa 1, varjo on musta ja "ohut". Jos kohdassa käytetään numeroa 10, varjosta ei enää saa tekstin suhteen mitään selvyyttä, vaan varjo on ikään kuin pilvi.

Tässä vielä kuvia ja koodeja, jotka havainnollistavat, miltä varjo näyttää missäkin asetuksissa:

KUVA 1
Käytetyt asetukset: 
h3.post-title a:hover{
text-shadow: black 0px 10px 1px;
}

KUVA 2

Käytetyt asetukset:
h3.post-title a:hover{
text-shadow: black -10px 2px 10px;
}

KUVA 3


 Käytetyt asetukset:
h3.post-title a:hover{
text-shadow: red 1px 2px 4px;
}


ENTÄS JOS VARJOSTUKSEN HALUAA OTSIKKOON PYSYVÄSTI (= se on otsikossa ilman hiiren viemistä otsikon päällekin)?

Toimi samalla tavalla kuin ylempänä postauksessa esitellyssä ohjeessa, mutta laita koodin tilalta tämä koodi:

h3.post-title a:link{
text-shadow: black1px 2px 4px;
}

 Kohdat ovat siinäkin samoja, mutta näin varjostus on aina postauksen otsikossa ilman, että hiiren vie otsikon päälle. 

Toivottavasti tästä oli jollekulle apua!

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

sunnuntai 16. helmikuuta 2014

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: http://2.bp.blogspot.com/-0-HDtCR0bAM/VSAlSISGG6I/AAAAAAAACg8/JUXFWnraGn0/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

lauantai 1. helmikuuta 2014

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

muis

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