Добавянето на странична лента към вашия бизнес Tumblr облагодетелства темата, като предоставя допълнителна информация за вашия бизнес, изходящи връзки към партньорски организации или свързани уебсайтове или поле за търсене за намиране на конкретно съдържание в сайта. Много теми са предназначени да поддържат странична лента, но можете също да вмъкнете такава във вашата тема, като използвате HTML редактора на Tumblr. Създаването на собствена странична лента с текстов редактор и оформянето й с CSS ви дава пълен контрол върху нейните функции и външен вид, което ви позволява по-точно да съобразите външния му вид с вашата бизнес идентичност.
Напишете и оформете маркировката на страничната лента
1
Решете какво искате да се показва във вашата странична лента и напишете чернова на съдържанието на страничната лента в обикновен текстов документ за по-късна употреба.
2
Създайте нов HTML документ с тагове за стилизиране с помощта на приложението за редактиране на текст. Структурата на HTML5 страницата трябва да изглежда по следния начин:
3
Вмъкнете таг настрана с идентификатор „странична лента“ в тялото на HTML5 документа. Тагът отстрани трябва да изглежда по следния начин:
4
Копирайте съдържанието, което сте съставили по-рано за страничната си лента, и го поставете в тага отстрани.
5
Използвайте съвместима със стандарти маркировка, за да конвертирате съдържанието на страничната лента в HTML5. Например, затворете заглавките в заглавните маркери, съдържанието на абзаца в етикетите на абзаци и включете текста на връзката в прикрепващите тагове с хипервръзки. Консултирайте се с справочно ръководство за HTML, ако не сте сигурни как става това (вижте Ресурси).
6
Запазете файла като HTML документ на вашия работен плот
7
Отворете уеб браузъра си, изберете „Файл“, щракнете върху „Отваряне“ и изберете HTML документа, който сте запазили на работния си плот. Вашият браузър показва вашата нестилирана странична лента.
8
Върнете се в текстовия си редактор, поставете курсора между стиловите тагове и оформете маркировката, разчитайки на селектора “#sidebar”, за да насочите страничната лента. Начинът на оформяне на страничната лента ще зависи до голяма степен от вашите вкусове, дизайна на вашата съществуваща тема на Tumblr и маркирането в страничната ви лента. Използвайте справочно ръководство за CSS3, за да сте сигурни, че съставяте свойствата и техните стойности правилно (вж. Ресурси).
9
Решете дали искате страничната лента отляво или отдясно и съответно задайте свойство float. Например, ако искате страничната лента вляво от основното съдържание, вашият селектор "#sidebar", свойството и стойността на плаващия ще изглеждат по следния начин:
плувка: ляво; }
10
Тествайте външния вид на страничната лента, като щракнете върху опресняване в браузъра си и продължете да коригирате стила на маркирането си, докато не сте доволни от външния му вид.
Поставете страничната лента във вашата тема на Tumblr
1
Влезте в таблото си за управление на Tumblr, щракнете върху заглавието на вашия блог в дясната странична лента, щракнете върху „Персонализиране“ и щракнете върху „Редактиране на HTML“, за да отворите редактора на изходния код на Tumblr.
2
Копирайте CSS от вашия отворен HTML документ и го поставете в края на стиловата област на вашата тема на Tumblr.
3
Намерете CSS селектора за вашата основна област на съдържание в редактора на Tumblr, поставете курсора след къдравата скоба и присвойте същото свойство и стойност на плаваща лента като вашата странична лента. Например, ако вашата странична лента е предназначена да се показва вдясно, присвойте плаващо свойство със стойност „право“ на селектора на контейнера.
4
Копирайте страничния таг и съдържанието му от вашия текстов редактор и го поставете в основния таг на вашата тема на Tumblr. Ако искате страничната лента да се показва вдясно от основното съдържание, поставете я след този контейнер; ако искате да се показва отляво, поставете го преди основния контейнер.
5
Щракнете върху „Преглед на актуализация“, щракнете върху „Облик“ и щракнете върху бутона „Запазване“, за да финализирате промените, които сте направили във вашата тема.
