Додавання бічної панелі до вашого бізнесу Tumblr приносить користь темі, надаючи додаткову інформацію про ваш бізнес, вихідні посилання на партнерські організації або пов’язані веб-сайти або поле пошуку для пошуку конкретного вмісту на сайті. Багато тем призначені для підтримки бічної панелі, але ви також можете вставити її у свою тему за допомогою редактора HTML Tumblr. Створення власної бічної панелі за допомогою текстового редактора та стилізація її за допомогою CSS дає вам повний контроль над її функціями та зовнішнім виглядом, що дозволяє більш точно відповідати її зовнішньому вигляду вашому комерційному стилю.
Написати та оформити розмітку на бічній панелі
1
Вирішіть, що ви хочете відображати на бічній панелі, та напишіть проект вмісту бічної панелі у текстовому документі для подальшого використання.
2
Створіть новий HTML-документ із тегами для стилізації за допомогою програми для редагування тексту. Структура сторінки HTML5 повинна виглядати наступним чином:
3
Вставте сторонній тег з бічною панеллю ідентифікатора в тіло документа HTML5. Тег Side повинен виглядати наступним чином:
4
Скопіюйте вміст, який ви складали раніше, на бічну панель і вставте його в тег Side.
5
Використовуйте розмітку, сумісну зі стандартами, для перетворення вмісту бічної панелі в HTML5. Наприклад, вкладіть заголовки в теги заголовків, вміст абзацу в теги абзаців і додайте текст посилання в прив'язувальні теги з посиланнями на гіперпосилання. Зверніться до довідкового керівництва HTML, якщо ви не впевнені, як це працює (див. Ресурси).
6
Збережіть файл як документ HTML на робочому столі
7
Відкрийте веб-браузер, виберіть «Файл», натисніть «Відкрити» і виберіть документ HTML, який ви зберегли на робочому столі. У вашому браузері відображається нестильована бічна панель.
8
Поверніться до текстового редактора, поставте курсор між тегами стилів та укладіть розмітку, спираючись на селектор "#sidebar" для націлювання на бічну панель. Як ви оформляєте бічну панель, багато в чому залежатиме від ваших смаків, дизайну вашої існуючої теми Tumblr та розмітки на бічній панелі. Використовуйте довідковий посібник CSS3, щоб переконатися, що ви правильно складаєте властивості та їх значення (див. Ресурси).
9
Вирішіть, чи потрібна вам бічна панель ліворуч або праворуч, і відповідно призначте властивість float. Наприклад, якщо ви хочете бічну панель ліворуч від основного вмісту, ваш селектор "#sidebar", властивість float та значення матимуть такий вигляд:
поплавок: ліворуч; }
10
Перевірте зовнішній вигляд бічної панелі, натиснувши кнопку "Оновити" у веб-переглядачі, і продовжуйте коригувати стиль розмітки, поки ви не будете задоволені її виглядом.
Вставте бічну панель у свою тему Tumblr
1
Увійдіть на свою інформаційну панель Tumblr, клацніть заголовок вашого блогу на правій бічній панелі, натисніть «Налаштувати» та натисніть «Редагувати HTML», щоб відкрити редактор вихідного коду Tumblr.
2
Скопіюйте CSS з вашого відкритого документа HTML і вставте його в кінець області стилів вашої теми Tumblr.
3
Знайдіть селектор CSS для вашої основної області вмісту в редакторі Tumblr, поставте курсор після фігурної дужки та призначте ті самі властивості та значення float, що і ваша бічна панель. Наприклад, якщо ваша бічна панель має відображатися праворуч, призначте властивість float зі значенням „right” селектору контейнера.
4
Скопіюйте тег Side та його вміст із текстового редактора та вставте його в тег тіла вашої теми Tumblr. Якщо ви хочете, щоб бічна панель відображалася праворуч від основного вмісту, розмістіть її після цього контейнера; якщо ви хочете, щоб він відображався зліва, вставте його перед основним контейнером.
5
Клацніть «Оновити попередній перегляд», натисніть «Зовнішній вигляд» і натисніть кнопку «Зберегти», щоб завершити зміни, внесені у вашу тему.
