Зафиксировать последний гаджет в сайдбаре блога blogspot



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

Для наших блогов блогспот таких плагинов нет, и фиксировать мы будем с помощью не большого скрипта, который нужно вставить в тело шаблона.

Работу скрипта будете видеть, если на странице много текста, такой виджет при прокрутке будет всегда на виду. Это может быть гаджет партнерской программы, срочного и важного текста, контекстной рекламы (если разрешено по правилам программы).

Для примера перейдите по ссылке как перенести блог blogspot на персональный домен, посмотрите гаджет в работе.

Вебмастерам, кто сотрудничает с AdSense: по правилам программы их код виджета фиксировать нельзя. Хотя на многих блогах вижу, но не играйте с огнем. И давайте приступим:

Вкладка шаблон делаем резервную копию шаблона изменить шаблон. С помощью сочетания клавиш Ctrl+F вызываем окно поиска, вписываем закрывающий тэг </body>, ищем строку в шаблоне. У меня поиск не работает, у Вас тэг будет подсвечен обычно желтым цветом.

Установите и сохраните гаджет. Нажмите изменить и посмотрите в адресной строке ID виджета. В шаблоне выше тэга </body> вставьте скрипт

Установка  скрипта выше закрывающего тэга body
Установка скрипта выше закрывающего тэга </body>


<script>
//<![CDATA[
bs_makeSticky("HTML20"); // 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 !important; top:0; z-index:9999; box-shadow:0px 10px 2px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative\9 !important;}
</style> 



Выделено синим-ID гаджета; box-shadow-тень блока, выделены значения коричневым. Можно убрать тень, настройте все значения 0px; оранжевым-фон блока; красным-положение снизу;

На этом у меня вся информация. Пишите отзывы, задавайте вопросы, в блоге работает контактная форма для связи. Всего доброго.

TEXT.RU - 100.00%




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


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

0 коммент. :

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

Ув. читатели! Для вставки HTML кода в комментарии, воспользуйтесь в меню Генератором преобразования HTML кода.

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

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

Имя

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

Сообщение *