Pokud jste někdy posouvali webovou stránku dolů a položka na ní se nepohybovala, byli jste svědky značky polohy CSS v akci. Tumblr bloggeři, kteří přidávají tuto značku do svých šablon, mohou vytvořit stejný efekt ve svých blogech. Dobré místo k vyzkoušení je na vašem postranním panelu. Po přidání poziční značky do kódu HTML vašeho blogu zůstane váš postranní panel pevný, když lidé procházejí stránky blogu nahoru a dolů.

Navštivte svůj Tumblr dashboard, poté klikněte na ikonu nastavení a název blogu, který chcete aktualizovat. Pokud máte pouze jeden blog, klikněte na jeho název.

Klikněte na „Přizpůsobit“ a poté na „Přidáno HTML“. Tumblr otevře vaše téma a zobrazí jeho HTML kód.

Klikněte kamkoli do kódu a stiskněte „Ctrl-A“ a poté „Ctrl-C“, abyste zkopírovali kód do schránky Windows. Otevřete nový dokument Poznámkového bloku a vložte kód do dokumentu. Tyto kroky zajistí, že budete mít záložní kopii původní šablony.

Vraťte se do kódu HTML Tumblr a stisknutím „Ctrl-F“ otevřete vyhledávací pole. Do vyhledávacího pole zadejte „postranní panel“ a stiskněte „Enter“. Tumblr najde první výskyt „postranního panelu“ a zobrazí část kódu, která toto slovo obsahuje. Nalezený kód by měl vypadat podobně jako následující:

wrapper #sidebar {color: {color: Background}; }

První řádek kódu obsahuje slova #wrapper #sidebar. Za těmito slovy následuje levá závorka.

Vložte následující kód bezprostředně pod první řádek kódu:

pozice: pevná; vpravo: 100px;

Atribut position dává pokyn prohlížečům opravit boční panel tak, aby se při posouvání nepohyboval. Atribut right sděluje prohlížečům, kolik pixelů chcete, aby se pravý okraj postranního panelu nacházel od pravého okraje webové stránky. V tomto příkladu má atribut right hodnotu 100px.

Kliknutím na „Aktualizovat náhled“ zobrazíte náhled změn. Přetažením posuvníku okna nahoru a dolů uvidíte, že se postranní panel nepohybuje. Kliknutím na „Uložit“ změny uložíte.

Tipy

Pokud chcete upravit vodorovnou polohu postranního panelu, možná budete chtít experimentovat s různými hodnotami pro správný atribut. Například pokud změníte hodnotu ze 100px na 50px, postranní panel se posune o 50 pixelů dále doprava.

Varování

Při práci v editoru HTML buďte opatrní, protože náhodná změna stávajícího kódu může mít dramatický vliv na rozložení stránky. Pokud kód změníte a nemůžete přijít na to, jak změny vrátit zpět, můžete vždy odstranit vše v editoru HTML a vložit záložní kód, který jste zkopírovali do editoru, abyste jej obnovili do původního stavu.