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

Просмотров: 593

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

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

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

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

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

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

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

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

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

<script>
// Sticky widget
//<![CDATA[
bs_makeSticky("HTML2"); // введите идентификатор виджета или элемента 
function bs_makeSticky(elem) {
    var bs_sticky = document.getElementById(elem);
    var scrollee = document.createElement("div");
    bs_sticky.parentNode.insertBefore(scrollee, bs_sticky);
    var width = bs_sticky.offsetWidth;
    var iniClass = bs_sticky.className + ' bs_sticky';
    window.addEventListener('scroll', bs_sticking, false);
    function bs_sticking() {
        var rect = scrollee.getBoundingClientRect();
        if (rect.top < 0) {
            bs_sticky.className = iniClass + ' bs_sticking';
            bs_sticky.style.width = width + "px";
        } else {
            bs_sticky.className = iniClass;
        }
    }
}
//]]>
</script>
<style>
.bs_sticking {background:#f2f2f2 !important; position:fixed !important; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative\9 !important;}
</style>

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

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

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

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

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

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

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

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


Оставьте комментарий