Липкий (фиксированный) виджет боковой панели для Blogger, который прокручивается вместе с вами
Липкие виджеты на боковой панели полезны для выделения или продвижения любого конкретного элемента вашего блога. Плавающий виджет боковой панели привлекает больше внимания, чем обычный виджет боковой панели. Таким образом, вы можете использовать этот липкий виджет боковой панели для Blogger, чтобы продвигать ваш самый важный пост, партнерские ссылки, рекламу и получать в 100 раз лучший результат, чем с обычным виджетом.
В моей последней статье я предложил несколько красивых, виджетопопулярныхв сообщенийдля блогеров . В этом посте я покажу вам, как использовать липкий виджет Blogger с адаптивными темами. Я предоставлю небольшой сценарий. Я также покажу вам, как без проблем настроить и использовать этот плавающий виджет боковой панели в своем блоге.
Заметки :
- Этот скрипт будет использовать один из виджетов боковой панели вашего блоггера.
- Виджет не будет совпадать с вашим нижним колонтитулом.
- Он будет скрыт для мобильных устройств, если вы используете адаптивный шаблон.
Липкий виджет боковой панели для Blogger:
1. Войдите в свой аккаунт блогера. Перейдите в раздел « Тема »> « Редактировать HTML».
2. Найдите код «jQuery» между двумя разделами <head>… </head>. Если вы уже используете это, то избегайте этого шага. В противном случае скопируйте код и вставьте его прямо над тегом </head> в шаблоне Blogger.
Код jQuery:
<script src=’http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js’/>
3. Теперь найдите закрывающий тег « </body> ». Скопируйте приведенный ниже скрипт и вставьте его прямо над тегом «</body>».
<script type=’text/javascript’>
//<![CDATA[
$(function() {
if ($(‘#PopularPosts1‘).length) {
var el = $(‘#PopularPosts1‘);
var stickyTop = $(‘#PopularPosts1‘).offset().top;
var stickyHeight = $(‘#PopularPosts1’).height();
$(window).scroll(function() {
var limit = $(‘#footer-wrapper‘).offset().top — stickyHeight — 20;
var windowTop = $(window).scrollTop();
if (stickyTop < windowTop) {
el.css({
position: ‘fixed’,
top: 20
});
} else {
el.css(‘position’, ‘static’);
}
if (limit < windowTop) {
var diff = limit — windowTop;
el.css({
top: diff
});
}
});
}
});
//]]>
</script>
Примечание.
Замените выделенный выше идентификатор виджета идентификатором вашего виджета на боковой панели.
Замените выделенный идентификатор Div нижнего колонтитула своим идентификатором Div нижнего колонтитула, чтобы переместить виджет поверх нижнего колонтитула.
4. В моем случае виджет боковой панели, который я хочу разместить, — «Виджет Популярный пост». Идентификатор моего виджета « Популярные посты » — « PopularPosts1 ». Вы можете увидеть на изображении выше. Я заменил это этим. И моя область нижнего колонтитула началась с идентификатора div « footer-wrapper ». Поэтому я заменил его на «нижний колонтитул».
5. Теперь нажмите кнопку « Сохранить шаблон ». Откройте свой блог в веб-браузере. Вы увидите, что ваш виджет плавает при прокрутке вниз.
Добавление CSS для виджета Sticky Sidebar:
На этом этапе мы должны определить максимальную ширину виджета боковой панели. Потому что, когда он начнет плавать, он выйдет из определенной нами боковой панели. Для решения этой проблемы и определения ширины нашего липкого виджета мы можем поместить небольшой кусочек кода CSS в наш шаблон.
#PopularPosts1{width:100%;max-width:320px}
@media only screen and (min-width:260px) and (max-width:989px){
#PopularPosts1{display: none!important;}}
Примечание. Этот прикрепленный виджет боковой панели может создать проблему для адаптивного шаблона. Если вы используете адаптивный шаблон, то я предлагаю скрыть этот прикрепленный виджет для мобильных устройств. В противном случае это будет отображаться на всем вашем сайте, если кто-то просматривает с мобильного.
Перейдите в «Тема> Изменить HTML» и найдите « ]]></b:skin> ». Просто скопируйте код и вставьте его прямо над ним. Замените идентификатор виджета « PopularPosts1 » своим. Вы также можете определить максимальную ширину выделенного виджета боковой панели в зависимости от ваших требований.
Теперь нажмите на кнопку « Сохранить шаблон ». Зайдите в свой блог и перезагрузите его в браузере. Прокрутите вниз, чтобы увидеть, работает ли он правильно или нет. Я надеюсь, что вы успешно добавили прикрепленный виджет боковой панели в своем блоге Blogger. Если вам нравится этот виджет, то, пожалуйста, поделитесь им.
