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

Toivepostauksia?

Nyt on mitä parhain tilaisuus vaikuttaa tuleviin postauksiin!

 Koska en itse välttämättä aina tajua, minkälaisia ohjeita/koodeja haluaisitte täällä näkyvän, päätin järjestää "toivepostauskampanjan". Jos mieltäsi on kaihertanut jo vaikka kuinka kauan, miten tehdä tekstibanneri, jonka sisällä on kuva tai mikä tahansa muu asia, vaikkapa miten saa erilaisen kursorin, on täydellinen aika kertoa siitä ja kommentoida toive/toiveet tähän postaukseen!

Aihealueet ovat niin valokuvaamisen maailmasta fontteihin ja ihan koodailuun asti (oikeastaan kaikki bloggaamiseen liittyvä), joten kertokaa rohkeasti, mihin asiaan kaipaatte ohjeistusta :)

Toivepostauksia saa ehdottaa ihan aina, mieluiten tähän postaukseen! Pyrin toteuttamaan kaikki toiveenne jossakin vaiheessa.

xoxo, iltsu

HTML-värikoodit / HTML Color Codes / blogin värit

HTML Color Codeista (joista yleisemmin puhutaan heksakoodeina)

minulla on paaljon asiaa. Ne tarkoittavat koodeja, jotka

"muuntautuvat" joksikin tietyksi väriksi. Jokaisella värisävyllä

on tismalleen oma heksakoodi, esimerkiksi #ffffff, joka

vastaa väriä valkoinen. Heksakoodien edessä on #-merkki, ja 

heksakoodeja käytetään esimerkiksi juuri blogin koodeissa,

jos halutaan määrittää jokin tietty asia tietyn

väriseksi.

MISTÄ LÖYTÄÄ HEKSAKOODEJA?

Heksakoodeja löytyy nykyään monilta eri sivustoilta,

joissa on väripaletti, jolta voi etsiä haluamansa värin. 

Itse suosin Html Color Codes -nimistä internetsivua,

jolta on hyvin helppo sivua scrollaamalla alaspäin 

valita väripaletilta juuri se mieluinen väri ja kopioida

värin heksakoodi, jonka jälkeen koodin voi lisätä

tarvitsemaansa juttuun.

 KÄYTTÖ

Päätinpä tehdä pienen sepostuksen heksakoodien käytöstä, mm. väripaletista, koska haluan ilmaista blogissa ohjeet mahdollisimman selvästi, jotta kaikki ymmärtävät ne :)   

Ohjeet ovat Html Color Codes -sivustoa varten.

Oranssilla ympäröidystä lokerosta voit hiirtä vetämällä etsiä mieleisesi sävyn.

Keltaisella ympäröidystä lokerosta voit vetää hiirellä mieluisesi värin, jonka jälkeen mennä oranssiin kohtaan ja etsiä mieluisesi sävyn.

Viininpunaisella ympäröidyssä lokerossa näkyy valitsemasi värin sävy.

 Punaisella ympäröidyssä lokerossa on värisävyn heksakoodi, jonka voi kopioida. 

Mustalla ympäröityyn lokeroon voit syöttää jonkin heksakoodin, jonka jälkeen painaa Go-nappia. Siten näet, mikä väri on kyseessä. 

Heksakoodeja tarvitaan monissa koodeissa - tämä lienee jo itsestään selvää (?). Otetaan esimerkkikoodiksi vaikka navigaatiopalkin värin vaihtamiseen tarvittava koodi:

#navbar-iframe {
background:#ffffff;
}

 Navbar-ifreme -kohta tarkoittaa navigaatiopalkkia, ja sen perässä

toisella rivillä background sen taustaa, jonka yhteyteen on liitetty

väri #ffffff, joka vastaa siis valkoista väriä. 

Muistakaa AINA, että heksakoodin edessä pitää olla #-merkki, 

eli älkää missään tapauksessa poistako sitä vaihtaessanne

väriä (!!). 

MUUT VÄRIT, JOTKA SOPIVAT KOODEIHIN

Jos väripaletilta värin valitseminen tuntuu värinpaljouden takia

ylitsepääsemättömän hankalalta, voi värin onneksemme

valita myös käyttämällä värin englanninkielistä nimeä.

Jos haluaisi esim. yksinkertaisesti peruspunaisen vaikkapa

navigaatiopalkin väriksi, aiemmin esitetty koodi näyttäisi tältä:

 #navbar-iframe {
background:red;
}

 

Alla värejä, jotka itse olen kokeillut toimiviksi:

red - pink - blue - yellow - green - black - white - gold - silver

 grey - brown - violet

Lisäämällä ylläolevan sanan eteen sanan light tai dark, saat

väristä vaaleamman tai tummemman (ei käy kaikkiin!). Huomioi,

että oikeinkirjoitusasu on yhteen, esim. lightpink. Pink ja lightpink

ovat muuten erivärejä, joista lightpink on tummempi o.o

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

Jotain kysyttävää liittyen väreihin/html-värikoodeihin?

Kysy ihmeessä! Vastaan mielelläni!(:

xoxo, iltsu

Navigaatiopalkin värin muuttaminen

Tämän koodin kanssa minulla oli hankaluuksia saada se toimimaan

tässä blogissa; kynsiblogissani (olen lopettanut) koodi kyllä toimi,

ja lopulta sain sen toimimaan tässäkin blogissa. Kyseessä on

siis navigaatiopalkin värin muuttaminen, ja tähän blogger

ei tarjoa valmiina kuin muutaman värin Ulkoasu-välilehdessä.

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

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

#navbar-iframe {
background:#ffffff;
}

 HTML-värikoodia (koodissa valmiina punaiseksi värjätty f-sarja,

joka on värinä valkoinen) voi muuttaa mieleisensä mukaan

miksi tahansa HTML-värikoodiksi. 

Klikkaa tästä päästäksesi

Color Codes -sivulle, jonka paletista voi päättää mieleisensä

värikoodin

********** 

Kertokaa ihmeessä, toimiko koodi teillä!

ps. muutin ulkoasusta hieman jouluisemman, hope you like! :)

xoxo iltsu