Как да направите страничната лента в Tumblr фиксирана

Въведение

Когато скролнете страница и определен елемент остане неподвижен, това е благодарение на CSS свойството position. В Tumblr можете да приложите същия ефект, като направите страничната лента (sidebar) фиксирана.

Подготовка

Първо създайте резервно копие на текущия шаблон, за да можете да се върнете назад при нужда.

1. Копирайте кода

Отворете таблото на Tumblr, кликнете върху иконата за настройки и изберете името на блога, който желаете да промените. След това натиснете Customize → Advanced → Edit HTML. В прозореца с кода натиснете Ctrl+A, след това Ctrl+C и поставете съдържанието в нов документ в Notepad. Това е вашето резервно копие.

Намиране на кода за страничната лента

В HTML редактора натиснете Ctrl+F, въведете „sidebar“ и натиснете Enter. Търсенето ще открие първото срещане на този термин – обикновено нещо като:

#wrapper #sidebar { /* стилове */ }

Това е мястото, където ще добавим новите правила.

Добавяне на CSS за фиксирана лента

Вмъкнете следния код точно под отворващата скоба {:

position: fixed;
right: 100px;

Свойството position: fixed казва на браузъра да задържи елемента неподвижно при скролиране. Стойността right: 100px определя разстоянието от десния ръб на страницата – можете да я променяте според вашите предпочитания.

Проверка и запазване

Кликнете Update Preview, за да видите как изглежда промененият шаблон. Превъртете страницата нагоре и надолу – страничната лента трябва да остане на място. Ако всичко е наред, натиснете Save.

Съвети

Експериментирайте с различни стойности за right. Например, right: 50px ще премести лентата по-близо до десния ръб.

Внимание

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