Добавление боковой панели к вашему бизнесу Tumblr приносит пользу теме, предоставляя дополнительную информацию о вашем бизнесе, исходящие ссылки на партнерские организации или связанные веб-сайты или поле поиска для поиска определенного контента на сайте. Многие темы предназначены для поддержки боковой панели, но вы также можете вставить ее в свою тему с помощью HTML-редактора Tumblr. Создание собственной боковой панели с помощью текстового редактора и оформление ее с помощью CSS дает вам полный контроль над ее функциями и внешним видом, позволяя более точно согласовывать ее внешний вид с идентичностью вашей компании.
Напишите и стилизуйте разметку боковой панели
1
Решите, что вы хотите отобразить на боковой панели, и напишите черновик содержимого боковой панели в текстовом документе для дальнейшего использования.
2
Создайте новый HTML-документ с тегами для стилизации с помощью приложения для редактирования текста. Структура страницы HTML5 должна выглядеть следующим образом:
3
Вставьте тег aside с идентификатором «боковая панель» в тело документа HTML5. Тег aside должен выглядеть следующим образом:
4
Скопируйте созданный ранее контент для боковой панели и вставьте его в тег aside.
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
Скопируйте тег aside и его содержимое из текстового редактора и вставьте его в тег body вашей темы Tumblr. Если вы хотите, чтобы боковая панель отображалась справа от основного содержимого, поместите ее после этого контейнера; если вы хотите, чтобы он отображался слева, вставьте его перед основным контейнером.
5
Нажмите «Обновить предварительный просмотр», нажмите «Внешний вид» и нажмите кнопку «Сохранить», чтобы завершить изменения, внесенные в вашу тему.
