Linkkien kursivoituminen hiiren vietäessä päälle

Eli on olemassa linkki, ja kun hiiren vie linkin päälle, teksti muuttuu kursivoiduksi. Blogiin kyseisen hover-efektin saa menemällä Malli -> Mukauta -> Lisäasetukset -> Lisää CSS:ään alla oleva koodi:

a:hover{
font-style: italic;
}

Postauksen otsikon taakse taustakuva

Tässä postauksessa on ohjeet siihen, miten blogikirjoituksen otsikon taustalle saa taustakuvan. Esimerkki tästä alla:

1. Sulla pitää olla kuva, jonka haluat laittaa postauksen otsikon taustalle. Kivoja kuvia löytyy esimerkiksi Googlen kuvahausta, jota mäkin käytän, vaikka periaatteessa sieltä kuvien kopioiminenhan on laitonta.

2. Kopioi kuvan osoite. Muistakaa, että Photobucketissa osoite kopioidaan kuvan oikealla puolella olevasta boksista klikkaamalla kohtaa Direct.

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

.post-title{
background: url(TÄHÄN TULEE TAUSTAKUVAN OSOITE);
}

4. Valmista tuli! :)

Tekstin ja kuvien alkaminen samasta kohdasta

Alla oleva kuva hahmottaa, mitä ajan tällä kertaa takaa:

Tästä tulee usein avunpyyntöjä - miten saisi blogikirjoituksen tekstin ja kuvat alkamaan samasta kohdasta? Minulla on teille tässä muutama ratkaisu kyseiseen ongelmaan.

1. TAPA: Tarkista, onko blogitekstisi kuvilla kehykset. Voit tarkistaa sen maalaamalla vasemmalla hiirellä blogitekstejäsi kuvineen päivineen ja katsoa, onko kuvien ympärillä jotain ns. ylimääräistä. Nuo kuvien kehykset saattavat olla läpinäkyvät, jolloin niitä ei voi ilman kuvan maalaamista havaita. 

Jos kuvissasi on kehykset, voit poistaa ne tällä koodilla, jolloin kuvien ja tekstin pitäisi alkaa samasta kohdasta (malli -> mukauta -> lisäasetukset -> lisää css:ään alla oleva koodi):

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: 0px;
background: transparent;
border: 0px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .0);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .0);
box-shadow: 1px 1px 1px rgba(0, 0, 0, .0);
}

2. TAPA: Voit siirtää kuvaa lähemmäs tekstiä tällä koodilla (malli -> mukauta -> lisäasetukset -> lisää css:ään alla oleva koodi):

.post-body img{
margin-left: -10px;
}

Lukua -10 voi muuttaa pienemmäksi tai suuremmaksi. Kyseistä lukua muuttamalla blogitekstin kuvat siirtyvät vasemmalle tai oikealle riippuen siitä, suurentaako vai pienentääkö lukua.

Kehystäminen / borderit halutuille kohteille

Tämä on ollut viime aikoina yksi toivotuimpia postauksia, joten here you go! Tässä postauksessa käsitellään kehystämistä (eli reunustamista, boksaamista, bordaamista, rajaamista... rakkaalla lapsella on monta nimeä!), erilaisia kehysvariaatioita ja kohteita, joihin kehyksiä eli bordereita eli bokseja whatever voi laittaa. Kyseessä on superpitkä ja toivottavasti myös kattava postaus, jotta mahdollisimman monet teistä tajuaa idean ja osaa hyödyntää postauksen oppeja myös käytännössä! Puheet sikseen, tämä postaus on muutenkin tosi pitkä.

***

Esimerkkejä kehyksistä blogissa:

a) Koko blogin kehystäminen

b) Sivupalkin jokaisen gadgetin kehystäminen erilleen toisistaan 

c) Blogipostauksen päivämäärän kehystäminen 

Lähes mitä tahansa blogista voi siis kehystää.  
Koska kyseessä on laaja aihe, on hyvä käydä vielä tähän alkuun CSS-koodin periaate läpi. Jotkut harvat teistä ehkä muistavat tämän postauksen, jossa käsittelin koodaamisen alkeita ja CSS-koodin periaatetta. Siellä käytiin läpi, mikä osuus CSS-koodista on valitsin, mikä on ominaisuus ja mikä on arvo, ja vähän sitä, mitä kunkin määreen paikalle kuuluu laittaa. Tässä vielä siis CSS-koodin perusrakenne:
valitsin {    
ominaisuus:arvo;
}

Kun jotain asioita halutaan kehystää, pitää siis tietää valitsin (=se, mihin halutaan muutos - tässä postauksessa kehykset, esim. postauksen otsikko), ominaisuus (= mikä muutos) ja arvo (= millainen muutos). Tämä on oikeastaan sama kaikissa CSS-koodeissa. 

valitsin {
border: arvo;
}

Kehystämiskoodeissa ominaisuus on siis border, jos halutaan ns. boksata koko valitsin (esim. .post-title eli postauksen otsikko). Jos halutaan ikään kuin laittaa viiva postauksen otsikon alapuolelle, on ominaisuus muodossa border-bottom, eli halutun valitsimen alaosa. Valitsimia on runsaasti, joille voi asettaa ominaisuudeksi border. Jos taas haluttaisiin laittaa viiva halutun valitsimen (esim. se postauksen otsikko) yläpuolelle, olisi ominaisuus muodossa border-top. Tässä siis bordereiden ns. "muotoja":
border-top (valitsimen eli halutun määreen yläpuoli)
border-left (valitsimen vasen puoli)
border-right (valitsimen oikea puoli)
border-bottom (valitsimen alapuoli)
Nuo neljä muotoa yhdessä ovat sama asia kuin käyttäisi niistä pelkkää muotoa border. Nuo neljä "muotoa" ovat käteviä, jos valitsinta, esimerkiksi postauksen otsikkoa, ei halua kokonaan bordata, vaan haluaa laittaa esim. sen alle ohuen viivan. Pelkkää border-ominaisuutta on taas kätevä käyttää, jos haluaa sekä alapuolelle, yläpuolelle että vasemmalle ja oikealle puolelle samanlaisen kehyksen.
Jos siis haluaisi laittaa viivat esimerkiksi postauksen otsikon ala- ja yläpuolelle muttei sivuille (eli ei valitsimen vasemmalle ja oikealle puolelle), koodi olisi tällainen (huomatkaa, että arvon paikalla tulisi olla sen määreet, ei tuota sanaa arvo, eli tuo koodi ei toimi. arvot esitellään tässä postauksessa alempana):
.post-title {
border-top: arvo;
border-bottom: arvo;
}

Jos taas haluaisi boksata päivämäärän kokonaan, koodi voisi olla tällainen:

.post-title {
border-top: arvo;
border-left: arvo;
border-bottom: arvo;
border-right: arvo;
}

TAI tällainen:

.post-title {
border: arvo;
}

Nuo kaksi edellä mainittua koodia siis ajavat täysin saman asian, mutta kätevämpi on käyttää pelkkää ominaisuutta border noiden border-topien ja border-leftien sijasta tässä tapauksessa.

BORDERIN ARVOT

Nyt kun olemme tutustuneet jo lyhyesti valitsimeen ja border-koodin ominaisuuksiin, on kyseessä arvot, kolmas CSS-koodin rakenteen osa. Border-koodeissa borderilla on kolme eri arvoa: paksuus/koko (px-muodossa), ns. "tyyli" (en osaa selittää tarkemmin, selviää paremmin kuvaesimerkkien kautta) ja väri. Nuo kolme arvoa voivat esiintyä border-koodissa sekalaisessa järjestyksessä, mutta seuraavalla tavalla:

[alla siis postauksen otsikon kehystämisen koodi]

.post-title {
border: 3px solid #000000;
}

Arvojen järjestyksellä ei ole väliä - ne voi ilmoittaa tuossa järjestyksessä (koko-tyyli-väri) tai esimerkiksi tyyli-väri-koko tai esim. väri-koko-tyyli.

Tuossa koodissa siis borderin arvoja ovat 3px (paksuus) solid (tyyli, tarkoittaa tässä viivaa) ja #000000 (heksakoodimuotoinen väri, tässä postauksessa kerron CSS-koodien väreistä).
Borderin paksuutta, tyyliä sekä väriä voi muuttaa. Tuolla koodilla tulisi postauksen otsikkoon seuraavanlaiset kehykset:

Jos kehyksestä haluaisi pinkin/lilahtavan,  vähän ohuemman ja katkoviivamaisen, voisi kyseessä olla tämä koodi:

.post-title {
border: 2px dashed #F621E4;
}

Ja tuolla koodilla postauksen otsikon kehys näyttäisi tältä:

Borderin tyylit

Osaatte nyt käyttää px-lukuja eli muuttaa borderin kokoa sekä käyttää värejä heksakoodimuodossa (täällä heksakoodeja), mutta veikkaan, ettei moni tiedä vielä, mitä kaikkia tyylejä (kuten aiemmin tuli jo ilmi solid eli viiva ja dashed eli katkoviiva) voi bordereille laittaa. Siksi ohessa on kuva borderin tyyleistä nimineen blogitekstin päivämäärässä:

ESIMERKKEJÄ KEHYKSISTÄ BLOGISSA KOODEINEEN

Koko blogin kehystäminen:

.content-inner{
border: 2px solid grey;
}

Gadgetien (sivupalkin) kehystäminen:

.sidebar{
border: 3px dotted #0B0973;
}

Jokaisen gadgetin kehystäminen erilleen toisistaan (postauksen alussa, kuva b):

.sidebar .widget{
border: grey 4px double;
}

Katkoviiva postauksen otsikon alapuolelle:

.post-title{
border-bottom: 2px dashed grey;
}

Päivämäärän alapuolelle viiva:

.date-header{
border-bottom: solid 1px black;
}

Postauksen alapuolelle viiva:

.post{
border-bottom: 2px solid #FACE32;
}

Viiva gadgetien otsikoiden alapuolelle:

.sidebar h2{
border-bottom: 1px black solid;
}

Itse suosittelen laittamaan tässä postauksessa esittelemäni koodit mallin suunnittelutyökalun lisäasetuksien CSS-osioon.

***

Huhhuh, olipa pitkä postaus! Toivottavasti saitte tästä jotain irti! :)

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.

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

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

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

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. 

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.

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

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

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!

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

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

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

Gadgetien otsikoiden keskittäminen

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

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

.sidebar h2{
text-align: center;
}

Sitten vain painat enteriä ja tadaa, pitäisi toimia!

Muista toki tallentaa.

xoxo iltsu

Tekstin otsikon alleviivaantuminen hiiren vietäessä päälle

Kyseessä on siis tekstin otsikon linkin hover-efekti; kun hiiren vie

otsikon päälle, teksti alleviivautuu keskeltä reunoille.

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

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

h3.post-title a {
display: inline-block;
position: relative;
padding-bottom: 3px;
}

h3.post-title a:after {
content: '';
display: block;
margin: auto;
height: 2px;
width: 0px;
background: transparent;
transition: width .7s ease, background-color .7s ease;
}

h3.post-title a:hover:after {
width: 100%;
background: #c9c9c9;
}

 Siniseksi värjättyä heightin arvoa muuttamalla isommaksi viivan

paksuus kasvaa, ja numeroa muuttamalla pienemmäksi viivasta

tulee ohuempi.

Punaiseksi värjätty koodin osa on taas värikoodi, jonka tilalle

voit muuttaa jonkin koodin täältä.

Jos haluat efektin kaikkiin linkkeihin, poista jokaisen koodin 

alusta kohta h3.post-title.

xoxo iltsu

Maalausvärin muuttaminen

Tekstin maalausvärillä tarkoitan tätä:

Maalausväri on normaalisti ainakin omasta mielestäni tylsä sininen,

joten värin vaihtaminen toiseen on varmasti hyvä vaihtoehto,

joka miellyttää silmää. Suosittelen tätä lämpimästi, kunhan

ette laita mitään silmiä kirveltäviä neonvärejä, jos toivotte

blogiinne lukijoita.

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

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

::-moz-selection {
color:#ffffff;
background: #c9c9c9;
}

::selection
{
color:#ffffff;
background: #c9c9c9;
}

Kun lisäät nuo koodit, värin pitäisi näkyä kaikissa selaimissa. 

Erivärisiksi värjättyjä kohtia voi taas muokata lisäämällä

#-merkin jälkeen jonkun HTML-koodin värin vaikkapa täältä. 

Punaiset kohdat tarkoittavat tekstin väriä sen maalatessa. 

Valmiissa koodissa väri on valkoinen. (kuten kuvassa)

Siniset kohdat taas kertovat maalausvärin värin, joka valmiissa

koodissa on harmaa. (kuten kuvassa)

 HUOMIOITHAN, että sekä punaiset että siniset kohdat ovat koodissa

kaksi kertaa. Maalausväri & tekstin väri siis täytyy laittaa koodiin

kaksi kertaa :)

xoxo iltsu

Blogin kulmien pyöristäminen

Blogin kulmien pyöristäminen antaa blogille kivan ilmeen, 

ainakin omasta mielestäni. Alla havainnollistava kuva, mitä

blogin kulmien pyöristämisellä pyrin tarkoittamaan:

Normaalistihan blogi näyttäisi ilman pyöristämistä tältä:

Jos haluat blogiisi pyöristetyt kulmat, toimi näin:

 

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

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

.content-inner {
border-radius: 100px;
}
 

Kuten aiemmissakin postauksissa, punaista lihavoitua pikselilukua voi

jälleen muuttaa oman mielensä mukaan. Mitä isommaksi muutat

lukua, sitä pyöristetymmät blogin ylä- ja alakulmista tulee.

HUOM! Tämä koodi ei valitettavasti pyöristä automaattisesti

blogin banneria. Bannerin voi pyöristää kuvanmuokkausohjelmalla

sopivaksi, esimerkiksi Photoscapella (netistä ladattava ilmainen

kuvanmuokkausohjelma, omistan itsekin).

xoxo iltsu