"Липкий" гаджет на Blogger

Иногда на сайте нужно сделать так, чтобы какой-либо гаджет, например: любое текстовое объявление, меню сайта или ярлыки  всегда были перед глазами читателя при прокрутке страницы. 

Сделать это на Blogger довольно просто. Нужно только добавить небольшой код в шаблон блога или, если в шаблоне менять что-либо опасаетесь, то скрипт можно добавить в гаджет, например в боковую панель или выше статьи, под шапкой блога.

Сперва нужно будет узнать ID гаджета, который будем делать "липким".

Заходим в Тема/Изменить HTML. 

В шаблоне нажимаем кнопку Перейти к виджету.

Здесь мы видим все гаджеты установленные в блоге. Если у них есть название, то это облегчает поиск, а если название HTML 1 или 2,3,4 ..., то нужно сперва вычислить какой гаджет — нужный. Для упрощения процесса, виджету нужно дать название. Делаем так:

Выходим из шаблона, нажимаем Дизайн, выбираем нужный гаджет, который будет "липким", кликаем Изменить и даём ему любое название. Потом название, если оно вам не нужно, можно будет удалить.

Возвращаемся в шаблон, к гаджетам и нажимаем на каждый из них по очереди. Ищем название, которое прописали ранее. 

Либо вызываем окно поиска, нажав CTRL+F и вписываем наименование гаджета, а затем нажимаем кнопку enter на клавиатуре. Когда слово будет найдено, рядом с ним будет написан id. В моём примере - HTML 5.

Названия стандартных гаджетов:

Followers1 - это виджет постоянные читатели

PopularPosts1 - популярные сообщения

BlogArchive1 - архив блога

CustomSearch1 - окно поиска

Profile1 - профиль

FollowByEmail1 - подписаться по email

Label1 - ярлыки

PageList1 - гаджет Страницы

LinkList1 - список ссылок

Установка кода

Заходим Шаблон/Изменить HTML. Нажмите CTRL+F и в открывшемся окошке пишем </body> и выше него вставляем код:

<script>

// Sticky widget by Bloggersentral.com

// Tutorial at http://www.bloggersentral.com/2013/04/how-to-make-any-widget-sticky.html

// Free to use or share, but please keep this notice intact.

//<![CDATA[

bs_makeSticky("ID виджета"); // enter your widget ID here

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; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3);}

</style>

Выделенное красным в коде меняем на нужный ID. Например, если у гаджета, который делаем липким ID - HTML 5, то его и вставляем.

Если в шаблон вы стараетесь лишний раз не заходить, то код можно добавить в гаджет, расположив его строго под тем виджетом, который делаем "липким", иначе код не сработает. Открываем Дизайн, Добавить гаджет/HTML/Javascript и устанавливаем код.