Jak upravit upozornění o cookies

Každý, kdo někdy otevřel nějaký blog na Bloggeru, ji viděl. Ještě aby ne... Je k nepřehlédnutí. O čem je řeč? O nevzhledné velké šedivé liště, která se zobrazí, když (poprvé) otevřete nějaký blog na platformě Blogger, a která varuje o použití souborů cookie.

Pokud navštěvujete hodně blogů na Bloggeru a rádi objevujete i nové, možná už máte této lišty plné zuby. Nebo alespoň já už na ni začínám být alergická. I proto jsem se rozhodla, že vám v dnešním návodu ukážu, jak se na svém blogu můžete té šedivé příšery zbavit...

Abych vše uvedla v pravou míru, rozhodně to není tak, že bych si myslela, že upozornění by na blogu být nemělo. Právě naopak!

Je povinností každého, kdo na své stránce používá soubory cookie, aby na to své návštěvníky upozornil (případně získal jejich svolení). A pokud máte blog na platformě Blogger.com, téměř bez výjimky mezi ně patříte.

Co jsou to cookies?

Cookies jsou malé soubory, které se při prohlížení nějaké stránky ukládají do počítače pomocí vašeho internetového počítače. Když tuto stránku později zase navštívíte, váš počítač pošle tyto soubory zpět, aby stránka věděla, jak má určité věci nastavit.

Můžete se s tím setkat třeba při vyplňování formulářů. Okomentujete jeden článek na blogu, zadáte do políček vaše jméno, e-mailovou adresu a webovou stránku, a když chcete okomentovat jiný článek na stejném blogu, tyto údaje už máte předvyplněné.

Využíváte u některých stránek funkci "zůstat přihlášený"? Pak věřte, že k tomu jsou použity soubory cookie. Můžete je samozřejmě ve svém prohlížeči zakázat nebo vymazat. Možná si to někdy zkuste, abyste viděli, co všechno to udělá.

Více o cookies najdete třeba tady.

Jak nezobrazovat výchozí upozornění

Možná, že se vám výchozí upozornění nelíbí tolik, že ho na své stránce nechcete vůbec. A to je v pořádku, dokud jej něčím nahradíte. (Existuje spousta řešení, které by vám mohly vyhovovat více. Stačí jen trochu hledat.)

Pamatujte, že pokud takovéto upozornění na své stránce nemáte, porušujete tím předpisy EU o ochraně soukromí.

A jak se výchozího upozornění zbavit? Zkopírujte si tento kód a vložte jej nad řádek v HTML vašeho blogu, ve kterém je </head>.

<script>
cookieChoices = {};
</script>

Jak upravit obsah upozornění

Ne každému vyhovuje výchozí text upozornění. Pokud píšete svůj blog nějakým určitým stylem, může být oficiální text Bloggeru jako pěst na oko.

Dobrá zpráva je, že celé upozornění se dá jednoduše upravit. Stačí v HTML kódu vašeho blogu vložit nad </head> tento kód:

<script>
cookieOptions = {
  msg: "Váš text.",
  close: "Zavřít",
  learn: "Odkaz",
  link: "#"
};
</script>

A místo znaku # doplňte odkaz na stránku, na kterou se čtenář dostane po kliknutí na odkaz (learn).

Jak upravit vzhled

Pokud znáte mé návody, určitě už víte, že když přijde na úpravy vzhledu, vždycky vám řeknu, abyste použili editor CSS v personalizaci. Přiznám se, taky jsem zkoušela upravit upozornění pomocí CSS, ale nikdy mi to nefungovalo. Ale to nevadí, pomůžeme si jinak!

Takto vypadá výchozí upozornění

Jestli používáte výchozí šablonu Bloggeru, bude potřeba, abyste si na blog nainstalovali jQuery. Jestli máte šablonu staženou z internetu, doporučuji vám si nejprve ověřit, zda jQuery na svém blogu už nemáte, a to tak, že si jednoduše do vyhledávače v HTML kódu (kliknout do kódu a potom stisknout kombinaci Ctrl+F) zadáte slovíčko jquery.

Pokud jQuery na svém blogu nemáte, jednoduše si jej nainstalujete přidáním tohoto kódu těsně nad </body>.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" />

 S výchozím upozorněním od Bloggeru jsem vždy měla několik problémů:

1. Barvy. Ta šedivá většině blogů holt moc nesluší...
2. Velikost. Celá lišta zabírá zbytečně moc místa.
3. Pozice. V lepším případě zakrývá tato lišta navigační lištu blogu. V tom horším název.

A teď vám tady postupně ukážu, jak se s těmito problémy vypořádat. Začneme tím, že si jako základ opět těsně nad </body> vložíme tento kód:

<script>
$(document).ready(function() {
//kód vkládejte pod tento řádek

});
</script>

Jako první můžeme třeba celou lištu změnšit a přebarvit. S tímto kódem bude mít lišta černé pozadí, ale namísto #111 můžete samozřejmě doplnit jakoukoli barvu! (Více o barvách v tomto článku.)

$(".cookie-choices-info").css({"padding": "0", "background": "#111"});

Celou lištu také můžete zároveň přesunout z horní části obrazovky dolů pomocí tohoto kódu:

$(".cookie-choices-info").css({"padding": "0", "top": "auto", "bottom": "0px", "background": "#111"});

Velmi zajímavě vypadá, když namísto 0px u "bottom": dáte třeba 10px nebo 15px. Celá lišta pak nebude nalepená přímo na spodek obrazovky, ale až kousek nad ním.

Pro přebarvení textu a obou tlačítek přidejte tento kód:

$(".cookie-choices-text").css({"color": "#111"});
$(".cookie-choices-button").css({"color": "#111"});

Občas se hodí návštěvníkům ukázat, které tlačítko je důležitější a na které má kliknout. (Což je v tomto případě samozřejmě tlačítko zavřít.)

Dá se toho dosáhnout přidáním tohoto kódu:

$("#cookieChoiceDismiss").css({"color": "#fff", "background": "#111", "padding": "15px", "border-radius": "5px" });

A jako vždy můžete upravovat barvy nahrazením #fff a #111 vlastními kódy.

---

A to bude pro dnešní návod vše. Doufám, že se vám líbil a přeji pěkný zbytek svátků. Budu ráda, když mi pod článkem necháte komentář (případně i odkaz na svůj blog, ať se můžu podívat, co jste ze svého upozornění vytvořili).

A pokud si s něčím nevíte rady (například máte vlastní vlastní nápad, co byste s upozorněním chtěli udělat), můžete mi kdykoliv napsat.