Привет, всем поклонникам Blogger! Сегодня я покажу вам, как зафиксировать виджет или меню в Blogger. Фиксированный (плавающий) виджет или меню — это когда во время прокрутки страницы вниз виджет или менюшка ни куда не исчезает, а прилипает вверху окна браузера. Вот, как то, так.
В Blogspot сделать любой виджет фиксированным/плавающим (Sticky Widget), который будет находится всегда перед глазами ваших посетителей очень легко. В WordPress фиксация виджета — читайте туточки. Код который я хочу представить вам применим не только к виджету, но и к любому элементу блога (меню Blogger и т. п.), который имеет идентификатор ID (id — уникальное имя, состоящее только из букв и цифр). Вот покажу на скриншоте, как я зафиксировал меню блога в нестандартном/пользовательском шаблоне:
При прокрутке страницы блога вниз, меню меняет цвет (настраивается в коде) и прилипает/фиксируется у границы окна браузера:
И так, не будем тянуть кота за хвост, а приступим непосредственно к инструкции. Кому нужно зафиксировать меню блога или виджет в сайдбаре милости прошу читать далее.
Фиксированный виджет в 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 виджета можно нажав «Изменить» гаджет, раздвинуть окно и вверху в конце строки будет указан номер:
Узнать идентификатор любого элемента, например меню можно через браузер. Для этого, наведите курсор на меню и кликните правой кнопкой мышки. В открывшемся окне выберите пункт «Просмотреть код»:
Появятся два окна. Справа: стили меню, а слева HTML меню:
Вот в коде HTML и найдёте ID вашего меню. В моём случае, выделено синим, это <nav id=»nav«>. Значит, что в кавычках, то и нужный нам идентификатор меню. Вроде понятно. Да, таким же образом можно узнать ид любого виджета. Едем дальше. Строка в коде background: #f2f2f2 — это будет цвет фона фиксированного меню или виджета, можете поменять на любой. И последнее, если не хотите трогать/изменять код своего шаблона (вставлять предложенный скрипт), то вы можете просто вставить его в гаджет HTML / JavaScript и всё. Работает и так, и эдак, хоть в стандартном шаблоне Blogger, хоть и в пользовательском.
Вот, товарищи и всё, надеюсь ничего не пропустил. В случае чего, спрашивайте в комментариях. Всем пока и до новых встреч. Удачи.
