Jak změnit barvu lišty v mobilním prohlížeči

Jak změnit barvu lišty v mobilním prohlížeči

Julie - 14/12/2017

Na telefonu používám k prohlížení internetových stránek Chrome a všimla jsem si, že některé stránky mají jinou barvu lišty v mobilním prohlížeči (viz obrázky dále v článku). Chvíli jsem zkoumala, jestli bych mohla mít obarvenou lištu i na svém blogu. K mému překvapení to je velmi jednoduché a zvládne to opravdu každý.

Proč změnit barvu lišty v mobilním prohlížeči?

Cílem Vás, jako blogera, je nalákat na svůj blog nové čtenáře. Aby se Vám to povedlo, musíte se nějak odlišit od ostatních blogerů. Přidávat originální články, mít osobitý styl psaní nebo unikátní design blogu. Změněná barva lišty v mobilním prohlížeči je jen další způsob, jak Váš blog může padnout čtenářům do oka.

Barevné lišty v Chrome

Takto mohou vypadat barevné lišty v mobilním prohlížeči Chrome

Jakou vybrat barvu?

Pokud se rozhodnete změnit barvu lišty v mobilním prohlížeči na svém blogu, Vaše první otázka by měla znít: “Jakou si vyberu barvu?”. Pokud Vás odpověď nenapadla hned, nezoufejte. Zkuste si odpovědět na těchto pár otázek a třeba na to přijdete:

  • Je na Vašem blogu nějaká barva, která je zastoupena víc než ostatní?
  • Máte na svém blogu barevně odlišené odkazy?
  • Máte na svém blogu barevnou horní navigační lištu?
  • Má Váš blog své vlastní logo?

Když na některou z těchto otázek odpovíte “Ano.”, hned se ptejte sami sebe: “A jakou to má barvu?”.

Doporučuji Vám, abyste zvolili barvu, kterou už na blogu někde máte. Např. v odkazech, fotkách, grafikách,… Nemá moc smysl dávat do lišty barvu, která s Vaším blogem jinak nemá nic společného.

Já jsem například volila modrou, která se objevuje různě na mém blogu (v odkazech, tlačítkách) i v grafikách, které dávám na svou FB stránku. Další barvou, kterou jsem zvažovala, byla červená, tu na blogu taky používám, ale nakonec mi přišla příliš agresivní.

Tip: Abyste mohli nastavit přesnou barvu, budete potřebovat znát její hex kód (ve formátu #123456). Pokud nevíte, jaké barvy používá šablona na Vašem blogu, můžete udělat screenshot a ten potom nahrát do Adobe Color CC. (Kliknutím na ikonku fotaparátu.)

 

Jak změnit barvu lišty v mobilním prohlížeči

Jak změnit barvu lišty v mobilním prohlížeči

Návod pro WordPress

Jedním z důvodů, proč si lidé tak oblíbili WordPress, jsou pluginy. Potřebujete něco? Kontaktní formulář, galerii nebo jinou vychytávku? WordPress na to má plugin!

A jinak to není ani v tomto případě. Tento plugin se jmenuje Meta Theme Colour a moc se mi líbí, protože dělá přesně to, co je potřeba, a nic zbytečného okolo.

Meta Theme Colour - Blogere.cz

Meta Theme Colour – jednoduchý plugin pro Váš blog

Jak na to?

Nastavení tohoto pluginu je velmi jednoduché.

  1. Stáhněte si plugin Meta Theme Colour, je zcela zdarma.
  2. Aktivujte ho.
  3. Běžte v administraci do NastaveníMeta Theme Colour.
  4. Klikněte na Zvolit barvu.
  5. Vyberte si barvu a nebo zadejte hex kód.

A to je vše. Teď už stačí jenom vzít mobil a kochat se krásnou a unikátní barvou lišty na Vašem blogu.

Návod pro Blogger

Pokud máte blog na Bloggeru, budete muset šáhnout do HTML kódu vaší šablony. Ale nebojte se, není to vůbec nic složitého. Jak na to?

  1. V administraci Vašeho blogu klikněte na Motiv → Upravit HTML.
  2. Klikněte do textového pole a potom zmáčkněte kombinaci Ctrl + F (⌘ + F).
  3. Objeví se Vám vyhledávací políčko, do kterého napište <head> a zmáčkněte Enter.
  4. Pod žlutě zvýrazněné <head> zkopírujte tento kód:

<meta content='#123456' name='theme-color'/>

  1. Hex kód #123456 Vám lištu změní na krásnou modrou barvu, ale smyslem celého obarvení je odlišit se od ostatních blogů, proto hex kód změňte.
  2. Nakonec klikněte na Uložit motiv, ať Vaše práce nepřijde nazmar.
Jak změnit barvu lišty v mobilním prohlížeči

Uložte si tento článek na Pinterest kliknutím na obrázek

Líbil se Vám tento článek? Co dál?
  • Vyzkoušejte změnit barvu lišty v mobilním prohlížeči na svém blogu a v komentáři pod příspěvkem mi nechte odkaz, ať se můžu přijít podívat. Můžete mi taky napsat, proč jste vybrali zrovna tuhle barvu.
  • Sledujte mě na Instagramu a na Facebooku, ať jste v obraze!
  • Uložte si článek na Pinterest kliknutím tady.
Sdílejte:
Kategorie:
Návody
Tagy:

3 komentáře u “Jak změnit barvu lišty v mobilním prohlížeči”

  1. Preferuju pro WordPress plugin Insert headers and footers, kam jde vkládat kódy, které se budou automaticky vkládat buď do header.php, nebo footer.php. Mám to skrz Google Analytics, a co se týká barvy lišty ,stačí do položky pro headers.php vložit kód pro Blogger – funguje to stejně 🙂

    1. To je samozřejmě taky možnost. 🙂 Kód, který jsem označila jako “pro Blogger” by měl fungovat pro všechny HTML stránky. Jen je potřeba ho vložit na správné místo. 😉 Ale myslím, že spousta blogerů, která se nechce vrtat v kódech, uvítá plugin víc. 🙂 Díky moc za názor!

    2. Mimochodem, ta růžovo-fialová na tvém blogu vypadá moc pěkně. 😉

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *