Miten muokata evästeet-ilmoituksesta blogiisi sopiva – Eroon perusharmaasta ja kapulakielestä

Lähestulkoon kaikilla sivuilla käytetään evästeitä. Ilmoitus siitä on pakollinen juridinen fraasi, mutta samalla se on myös sivuston vierailijoiden yksityisyyden kunnioittamista.

Eväste (cookie) on pieni tekstitiedosto, jonka internetselain tallentaa käyttäjän laitteelle. Evästeitä käytetään esimerkiksi silloin, kun käyttäjän tietoja halutaan säilyttää tämän siirtyessä internetpalvelun sivulta toiselle. Evästeiden käyttö edellyttää aina käyttäjän suostumuksen.

Bloggeria käyttävät bloggaajat eivät ainakaan mitään evästeille mahda. 

Vaikka et itse seuraisi blogisi tilastoja tai keräisi tietoja kävijöistä, Google tekee sen kuitenkin. Sen vuoksi ilmoitus on oltava. Ja jos haluat näyttää sivuillasi Googlen mainoksia tai ylipäätänsä näkyä hakutuloksissa, Googlen kanssa kannattaa pysyä väleissä. Koska jos Googlen mielestä rikot sääntöjä, se ei tiedä hyvää blogillesi.

Ja evästeiden on ylipäätänsä pakko olla käytössä, jos haluaa käyttää Google-tiliään.

Suomessa evästeistä tiedottamista tai niiden hyväksymistä varten ei kuitenkaan vaadita erillistä ponnahdusikkunaa.

Evästekäytännöt on vähintään mainittava verkkosivuilla niin, että käyttäjän on mahdollista saada niistä lisätietoa. Esimerkiksi kiinteä ilmoitus jossain kohtaa sivua (”käyttämällä sivustoa hyväksyt evästeiden käytön”) ja linkki lisätietoihin.

Monissa blogeissa on se ongelma, että eväste-ilmoitusta ei saa klikattua pois.

Jos on vaikka sivun ylälaidassa mukana scrollautuva menu-valikko (sellainen kuin tässäkin blogissa), saattaa evästepalkki jäädä sen taakse jumiin niin, ettei sitä pysty klikkaamaan pois.

Blogin kirjoittajat eivät tätä välttämättä edes itse tiedä, koska heille ilmoitusta ei enää tule!

Jokaiselle uudelle vierailijalle ja uudella laitteella tulevalle lukijalle se tulee. Ja osaa kyllä häiritä sitä vierailukokemusta ainakin visuaalisessa mielessä, ja joskus myös käytännössä.

Ja oli ongelmaa tai ei, se tavallinen evästeilmoitus osaa olla tosi tylsä ja ruma. Ihmiset tyytyvät siihen, sekä bloggaajat että lukijat. Pakkohan se on, pakollinen kun on. Mutta ei sen kyllä ole pakko olla juuri sen näköinen.

Eväste-ilmoituspalkin ulkonäköä ja tekstin muotoilua voi muuttaa.

Tyylittelystä on hyötyä sivuston yhtenäisen ilmeen kannalta, mikä tekee siitä ensimmäisestä vierailusta miellyttävämmän, vaikka se ilmoitus siihen näytölle pläsähtäisikin.

Se peruspalkki on vaan niin perus. Mobiilissa esiin tupsahtaessaan se voi peittää aluksi puolet koko sivusta.

– Jos et tiedä, miltä blogisi eväste-ilmoitus näyttää, etkä halua tyhjentää selaimesi historiaa, avaa sivu salatussa ikkunassa (incognito-ikkuna). Siinä sen pitäisi ilmestyä jokaisessa uudessa istunnossa.

Mun valokuvausblogissa (kuvassa yläpuolella) oli ongelma, että tää evästeilmoitus aukesi siihen yläreunaan. Postausten asettelusta johtuen sitä ei pystynyt klikkaamaan, jos hiiri tuli väärästä suunnasta. Silloin ilmoituksen sulkemisen sijaan klikkasikin itsensä suoraan postaukseen.

Koodien avulla voi esim. muokata eväste-ponnahdusikkunan yläreunan sijasta alareunaan.

Tässä tapauksessa myöskään blogin alalaita ei ollut ihan helppo ratkaisu, koska siellä on sivunumerot, joilla voi navigoida vanhempiin kirjoituksiin. Jos ponnahdusikkunaa ei klikannut pois, numeroita ei näkynyt, eikä niiden olemassa oloa välttämättä edes tiennyt. Se oli sivun käytön kannalta huono juttu, ja mobiilissa oli sama ongelma.

Totesin, että vaikka sivureunan kanssa yhtenevän värinen palkki olisi siistein, käytön kannalta jonkin verran läpinäkyvä palkki olisi järkevin. Tällöin vierailija näkee, että palkin alla on jotakin, ja tajuaa klikata sen pois. (Kuvassa alapuolella.)

Näin muokkaat evästeet-palkin ulkonäköä Bloggerissa:

1. Mene Blogger-sivullasi välilehteen ”Teema”, ja valitse sieltä ”Muokkaa html-koodia”.

2. Etsi koodista tämä kohta:


</head> 


3. Kirjoita koodin yläpuolelle tämä:


<!-- START XOMISSE Custom EU Cookies Notice -->
<script type="text/javascript">
  cookieOptions = {
    msg: "Tämä sivusto käyttää evästeitä mainosten toimittamisessa, mainosten personoinnissa ja liikenteen analysoinnissa. Sivuston käyttötiedot lähetetään Googlelle. Käyttämällä sivustoa hyväksyt evästeiden käytön.",
    link: "https://www.blogger.com/go/blogspot-cookies",
    close: "Selvä",
    learn: "Lisätietoja" };
</script>
<!-- END XOMISSE Custom EU Cookies Notice -->


– Voit muokata oranssilla kirjoitettuja kohtia tehdäksesi kapulakielestä mieleiseksesi muotoiltua.

4. Etsi koodista tämä kohta:

]] </b:skin>

5. Kirjoita sen yläpuolelle tämä:

.cookie-choices-info {
LISÄÄ TÄHÄN TAUSTAN MUOTOILUKOODIT 
background-color: #333;
}

.cookie-choices-info .cookie-choices-button {
LISÄÄ TÄHÄN "LISÄTIETOJA"-VALINNAN MUOTOILUKOODIT

font-family: Verdana;
font-size: 10px;
color: #dfdfdf;
}

.cookie-choices-info #cookieChoiceDismiss {
LISÄÄ TÄHÄN "SELVÄ"-VALINNAN MUOTOILUKOODIT

font-family: Verdana;
font-size: 10px;
color: #dfdfdf;
}

– Poista punaisella olevat tekstikohdat.
– Muuta vihreällä merkattuja koodeja muuttaaksesi palkin taustan väriä, sekä tekstin fonttia, kokoa ja väriä.
– Muita erilaisia muotoilukoodeja voit etsiä netistä googlaamalla. Värikoodeja voit hakea esim. täältä.

Lisävinkkejä evästeet-palkin muotoiluun:

1. Kun valitsemasi muotoilukoodi ei toimi.

Tarkista, että kirjoittamasi koodi on oikein. Mikäli jokin muotoilukoodi ei yrityksestä huolimatta onnistu (ja se on varmasti oikein), toimimattomuus voi johtua päällekäisistä käskyistä koodissasi. Tällöin koodille kannattaa lisätä tärkeysmerkintä, joka ylittää aikaisemman käskyn, esim. näin:

text-transform: uppercase !important;

Oranssilla koodinpätkällä voit priorisoida valitsemasi muotoilun toisen käskyn yli. Tällä koodilla tekstin muotoilu on pakotettu ISOIKSI KIRJAIMIKSI.

2. Jos haluat kiinnittää palkin alareunaan.

Lisää taustan muotoilikoodeihin nämä:

top: auto !important;
bottom: 0px !important;

3. Jos haluat evästeet-palkin taustasta osittain läpinäkyvän.

Taustan saa läpinäkyväksi muuttamalla tavallisen hex-värikoodin (eli koodimuoto #333333) rgb-koodiksi esimerkiksi tällä sivustolla.

1. Hex-värikoodi #333333 on sama kuin rgb(51, 51, 51)
2. Sen jälkeen tehdään rgb-koodista rgba-koodi lisäämällä siihen a ja loppuun opacity-luku, eli
rgba(51, 51, 51, 0.3);
3. Mitä pienempi luku, sitä suurempi läpinäkyvyys. 0 = täysin läpinäkyvä, 1 = täysin läpinäkymätön.

Tavallisen harmaan taustan värikoodi on tämä:
background-color: #333333;

Koodissa osittain läpinäkyvän harmaan taustan lause voisi olla esim. tämä:
background-color: rgba(51,51,51,0.3);

– – –

Sellaista tällä kertaa. Alunperin oli tarkoitus kirjoittaa ihan muusta, mutta en nyt päässytkään muokkaamaan niihin tarkoitettuja kuvia, kun otin viikonlopun mökkireissuun väärän kovalevyn mukaan.

Jos oot bloggaaja, kerro toki, jos tästä oli sulle hyötyä!

Saa kysyä neuvoa jos sitä kaipaat, vastaan jos osaan. Ehkä jatkossa voisi nähdä blogeissa muitakin kuin niitä maailman tylsimpiä harmaita palkkeja. 😉 Paitsi toki jos se kuvaa jonkun mielestä hyvin tätä suomalaista mielenmaisemaa niin… älä muokkaa sit. 😀

Lähteitä & linkkejä:

Evästeet – Viestintävirasto
Evästeiden käytön säännöt – Mainostoimisto4d
Englannin kieliset ohjeet evästeet-palkin muokkaamiseen (tämä versio) – XOMISSE
Englannin kieliset ohjeet evästeet-palkin muokkaamiseen (toinen versio) – My Blogger Tricks
Blogger ja evästeilmoitus – Downshiftaaminen