Как добавить свой виджет верхнего меню в блог на Blogger

Как добавить свой виджет верхнего меню в блог на Blogger

Есть у меня в Блоггере другой блог, в который я решила добавить верхнее горизонтальное меню навигации. Можно было бы воспользоваться существующим местом для виджета горизонтального меню, но я бы не хотела его фиксировать: в новых темах на Блогспот имеется стикер с названием блога, который немного конфликтует с фиксированным меню. Меню должно прокручиваться вместе со страницей, однако с помощью стандартного места для виджета горизонтальное меню без фиксации можно установить только после названия блога и описания.

Как добавить свой виджет верхнего меню в блог на Blogger

Что делать? Добавить место для виджета горизонтального меню. Для этого необходимо зайти в HTML-код своей темы и найти строку <body> (или <body class=’container’>, в зависимости от темы). Не стану объяснять, как это сделать. Если вы дошли до жизни такой, что добавляете в блог новые места для виджетов, вы должны хорошо разбираться и в настройках блога, и в HTML.

Итак, после тега <body> необходимо добавить следующие строки.

<!-- Верхнее горизонтальное меню -->
<nav role='navigation'>
   <b:section class='clearboth' id='top_nav_bar' name='Верхнее меню' showaddelement='false'/>
</nav>
Как добавить свой виджет верхнего меню в блог на Blogger

В теме Contempo код можно добавить чуть ниже, после следующих строк

      <div class='page'>
        <div class='bg-photo-overlay'/>
        <div class='bg-photo-container'>
          <div class='bg-photo'/>
        </div>

Теперь можно зайти в Дизайн, чтобы убедиться — место для верхнего меню появилось.

Как добавить свой виджет верхнего меню в блог на Blogger

В теме Contempo вне зависимости от того, куда вы добавили код, сразу после тега <body> или после контейнера <div class=’bg-photo’/>, в настройках дизайна место для верхнего меню будет находиться в правом столбце. Причина заключается в особенностях сайдбара этой темы.

дизайн темы contempo
Дизайн темы Contempo

При желании в коде выше можно задать showaddelement=’true’ вместо ‘false’. Тогда в позиции верхнего меню появится окно с надписью «Добавить гаджет».

добавить гаджет

Добавить в верхнее меню можно только виджет «HTML/JavaScript». Виджет «Страницы» представляет пункты меню в горизонтальном виде только под названием и описанием. В любом другом месте блога список страниц будет вертикальным.

Как выглядит горизонтальное меню в самодельном виджете, можно увидеть в моем блоге на Блогспот. В следующей статье вашему вниманию будет представлен код адаптивного выпадающего меню.

Поделиться:
Подписаться
Уведомить о
guest
6 комментариев
Старые
Новые
Межтекстовые Отзывы
Посмотреть все комментарии
Вова Клопов
Вова Клопов
3 месяцев назад

Не зная броду, не суйся в воду. Также и в блоговедении. Без понимания того, что делаешь, лучше не влезать в HTML-код.

Павел
Павел
3 месяцев назад

А ещё нельзя влезать в электрощиток, трансформатор. На них так и написано. Не влезай — убьет.

Вова Клопов
Вова Клопов
3 месяцев назад
Ответить на  Павел

Молодец, хорошо знаешь технику безопасности.

Павел
Павел
3 месяцев назад
Ответить на  Вова Клопов

Все инструкции по технике безопасности написаны кровью.

Максим
Максим
2 месяцев назад

Прикольно про технику безопасности. А в тему Soho получится добавить виджет с меню?

Ольга К.
Администратор
Ольга К.
3 месяцев назад
Ответить на  Максим

Без проблем. После тега <body>.

6
0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x
()
x