Как да създадете фиксирана странична лента на Tumblr

Ако някога сте превъртали надолу уеб страница и елемент на нея не се е преместил, сте били свидетели на CSS маркера за позиция в действие. Блогърите на Tumblr, които добавят този маркер към своите шаблони, могат да създадат същия ефект в своите блогове. Добро място да опитате това е на страничната лента. След като добавите маркер за позиция към HTML кода на вашия блог, страничната ви лента остава фиксирана, когато хората превъртат нагоре и надолу страниците на вашия блог.

Посетете таблото си за управление на Tumblr, след това щракнете върху иконата за настройки и името на блога, който искате да актуализирате. Ако имате само един блог, щракнете върху името му.

Кликнете върху „Персонализиране“, последвано от „Добавен HTML“. Tumblr отваря вашата тема и показва нейния HTML код.

Щракнете навсякъде в кода и натиснете "Ctrl-A", последвано от "Ctrl-C", за да копирате кода в клипборда на Windows. Отворете нов документ на Notepad и поставете кода в документа. Тези стъпки гарантират, че имате резервно копие на оригиналния шаблон.

Върнете се към HTML кода на Tumblr и натиснете "Ctrl-F", за да отворите поле за търсене. Въведете „странична лента“ в това поле за търсене, след което натиснете „Enter“. Tumblr намира първата поява на "странична лента" и показва раздела на кода, който съдържа тази дума. Кодът, който намира, трябва да изглежда подобно на следния:

обвивка #sidebar {цвят: {цвят: Фон}; }

Първият ред код съдържа думите #wrapper #sidebar. Лява скоба следва тези думи.

Поставете следния код непосредствено под първия ред на кода:

позиция: фиксирана; вдясно: 100px;

Атрибутът position инструктира браузърите да поправят страничната лента, така че тя да не се движи, когато превъртате. Правият атрибут казва на браузърите колко пиксела искате десният край на страничната лента да се намира от десния поле на уеб страницата. В този пример десният атрибут има стойност 100px.

Щракнете върху „Актуализиране на визуализация“, за да видите визуализация на вашите промени. Плъзнете лентата за превъртане на прозореца нагоре и надолу и ще видите, че страничната лента не се движи. Щракнете върху „Запазване“, за да запазите промените.

Съвети

Може да искате да експериментирате с различни стойности за правилния атрибут, ако искате да регулирате хоризонталната позиция на страничната лента. Например, ако промените стойността от 100px на 50px, страничната лента се премества по-надясно с 50 пиксела.

Предупреждения

Бъдете внимателни, когато работите в HTML редактора, тъй като случайната промяна на съществуващия код може да има драматични ефекти върху оформлението на вашата страница. Ако промените кода и не можете да разберете как да отмените промените си, винаги можете да изтриете всичко в HTML редактора и да поставите резервния код, който сте копирали в редактора, за да го възстановите в първоначалното си състояние.