Jak nastavit pevný postranní panel na Tumblr

Pokud jste někdy scrollovali stránku a některý prvek zůstal na místě, viděli jste v akci CSS vlastnost position: fixed. Přidáním této vlastnosti do šablony na Tumblr můžete dosáhnout stejného efektu – např. postranní panel (sidebar) bude pevně umístěn a nebude se posouvat při scrollování.

Kde upravit šablonu

1. Na svém Tumblr dashboardu klikněte na ikonu nastavení a vyberte blog, který chcete upravit (pokud máte jen jeden, klikněte přímo na jeho název).
2. Zvolte Customize → Advanced → Edit HTML. Otevře se editor s HTML kódem vaší šablony.
3. V editoru stiskněte Ctrl+A a Ctrl+C a zkopírujte celý kód do textového souboru (např. Notepad). Tím si vytvoříte záložní kopii původní šablony.

Najděte část s postranním panelem

V HTML editoru otevřete vyhledávání Ctrl+F a zadejte sidebar. První výskyt by měl vypadat zhruba takto:

#wrapper #sidebar { /* další styly */ }

Na konci této první řádky vložte nový řádek s následujícím kódem:

position: fixed; right: 100px;

Vlastnost position: fixed zajistí, že se panel nepohybuje při scrollování. Hodnota right: 100px určuje vzdálenost pravého okraje panelu od pravého okraje stránky – můžete ji upravit podle potřeby.

Uložení a kontrola

Po úpravě klikněte na Update Preview a otestujte posouváním stránky. Pokud je vše v pořádku, stiskněte Save a změny se projeví na vašem blogu.

Tipy

Experimentujte s hodnotou right. Například right: 50px posune panel blíže k pravému okraji o 50 px.

Upozornění

Při práci v HTML editoru buďte opatrní – nechtěná změna kódu může rozbít rozložení stránky. Pokud se něco pokazí, můžete jednoduše smazat celý obsah editoru a vložit zpět záložní kód, který jste si uložili.