Как зафиксировать виджет или меню в Blogger

Привет, всем поклонникам Blogger! Сегодня я покажу вам, как зафиксировать виджет или меню в Blogger. Фиксированный (плавающий) виджет или меню - это когда во время прокрутки страницы вниз виджет или менюшка ни куда не исчезает, а прилипает вверху окна браузера. Вот, как то, так.

фиксированный виджет в Blogger
Как сделать плавающий/фиксированный виджет в Blogger

В Blogspot сделать любой виджет фиксированным/плавающим (Sticky Widget), который будет находится всегда перед глазами ваших посетителей очень легко. В WordPress фиксация виджета - читайте туточки. Код который я хочу представить вам применим не только к виджету, но и к любому элементу блога (меню Blogger и т. п.), который имеет идентификатор ID (id - уникальное имя, состоящее только из букв и цифр). Вот покажу на скриншоте, как я зафиксировал меню блога в нестандартном/пользовательском шаблоне:

Горизонтальное меню
Горизонтальное меню в Blogger

При прокрутке страницы блога вниз, меню меняет цвет (настраивается в коде) и прилипает/фиксируется у границы окна браузера:

меню в Blogger
Плавающее меню в Blogger

И так, не будем тянуть кота за хвост, а приступим непосредственно к инструкции. Кому нужно зафиксировать меню блога или виджет в сайдбаре милости прошу читать далее.

Фиксированный виджет в Blogger

Для того, чтобы сделать плавающее меню или любой виджет вам необходимо найти в шаблоне вашего блога строчку </body> и чуть выше неё добавить такой маленький код:

Где в строке bs_makeSticky("HTML2"); вам нужно указать ID виджета или элемента которое нужно зафиксировать. Узнать ID виджета можно нажав "Изменить" гаджет, раздвинуть окно и вверху в конце строки будет указан номер:

ID виджета в Blogger
Как узнать ID виджета в Blogger

Узнать идентификатор любого элемента, например меню можно через браузер. Для этого, наведите курсор на меню и кликните правой кнопкой мышки. В открывшемся окне выберите пункт "Просмотреть код":

Просмотреть код элемента

Появятся два окна. Справа: стили меню, а слева HTML меню:

 ID меню
Как узнать ID меню

Вот в коде HTML и найдёте ID вашего меню. В моём случае, выделено синим, это <nav id="nav">. Значит, что в кавычках, то и нужный нам идентификатор меню. Вроде понятно. Да, таким же образом можно узнать ид любого виджета. Едем дальше. Строка в коде background: #f2f2f2 - это будет цвет фона фиксированного меню или виджета, можете поменять на любой. И последнее, если не хотите трогать/изменять код своего шаблона (вставлять предложенный скрипт), то вы можете просто вставить его в гаджет HTML / JavaScript и всё. Работает и так, и эдак, хоть в стандартном шаблоне Blogger, хоть и в пользовательском.

Вот, товарищи и всё, надеюсь ничего не пропустил. В случае чего, спрашивайте в комментариях. Всем пока и до новых встреч. Удачи.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Решите задачку: *