Зафиксировать navbar или меню внизу страницы в blogger



Всем здравствуйте, кто читает эту статью. Сегодня, как обычно, информация для блогов на платформе blogspot, расскажу как можно с помощью стилей CSS зафиксировать панель навигации и меню внизу страницы.

Почти у каждого вебмастера, кто ведет блоги blogspot написана статья, как отключить, удалить или скрыть панель навигации. Я тоже не исключение, перейдите по адресу и почитайте статью. Кто-то применил уже на практике эту информацию, но во многих блогах я все равно вижу присутствие этой панели.

Безусловно удобно владельцам переходить в настройки, поделиться в Google+, так же поиск по блогу для читателей. Гаджет навигации мы может устанавливать в любом месте макета блога. Этому мы уже научились, нужно всего лишь его разблокировать. Читайте пост Переместить или удалить заблокированный гаджет в макете блога blogspot.

Сегодня у меня для Вас фишка (на любителя), может кому-нибудь пригодится, зафиксировать панель внизу страницы. Вот скриншот, navbar всегда будет на виду.

Зафиксировать navbar внизу страницы в блоге blogger
Navbar внизу страницы

Для реализации идем в шаблон, делаем его резервную копию. Далее изменить шаблон, ищем строку <b:skin>...</b:skin>, в самом начале. Нажимаем на стрелку слева, прокручиваем тихонько вниз и выше строки ]]></b:skin> вставляем скопированный код CSS

#navbar-iframe {
position: fixed;
left: 0px;
right: 0px;
bottom: 0px;
}

С навигацией разобрались, а сейчас хочу остановиться на родном меню, созданное гаджетом "страницы". Мы так же сможем зафиксировать его внизу и меню тоже будет всегда на виду. Код CSS вставляем в шаблоне выше строки  ]]></b:skin>. Пример меню на скриншоте:

Зафиксировать меню внизу страницы в blogger
Меню внизу страницы

Код CSS

#PageList1 {
position:fixed;
bottom:0px;
left:20px;
z-index:9999999;
width:100%;
}


#PageList1 { ваш ID гаджета меню "страницы". Возможно, нужно будет настроить отступ текста слева. Шаблоны у всех разные, если при моих настройках отступ будет большим, ставьте left:0px; Живой пример сходите посмотреть в тестовый блог и обратите внимание на гаджет navbar. Я установила его в боковую панель, получился поиск по блогу с кнопкой Google+ поделиться.

Можно в CSS изменить bottom (низ) на top (верх), меню будет зафиксировано вверху страницы. Нужно будет настроить расположение заголовка. Информацию читайте в статье: Как поднять/опустить заголовок и вставить гаджет сверху заголовка.

Зафиксировать этим способом можно любое меню. В этом блоге тестировала и тоже получилось. Посмотрите ID гаджета меню и измените в CSS #HTML14{ к примеру.

На этом у меня все. Спасибо, что читаете мои уроки и делитесь с друзьями в соц сетях. На все вопросы отвечу в комментариях. Всего доброго.

Другие статьи:

TEXT.RU - 100.00%


Автор статьи ✎ Olga Protasova Выпуск ✹ 10/14/2015 Ярлыки ►


Открыть комментарии →

2 коммент. :

  1. Ольга, вчера только написала статью как сделать стикер панель внизу. Код другой немного. Чуть позже опубликую. А вообще мне нравится такое расположение. У меня уже давно в блоге менюшка к низу прижата.

    ОтветитьУдалить
  2. Вика привет, мы снова с тобой на одной волне. Как в известной пословице, только у нас по другому "У блоггеров мысли сходятся". Мне тоже нравится расположение меню, в этом блоге установила, потом вернула как есть, привыкла, что сверху.

    ОтветитьУдалить


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *