Как зафиксировать сайдбар?

Недавно я задался вопросом о том, как зафиксировать виджет с рекламой в меню сайта. И только я об этом подумал, как некоторые блогеры стали публиковать посты с решениями зафиксировать сайдбар. Один предлагал установить плагин, другой прописать в файлы темы несколько скриптов.

Я не буду спорить, какой вариант лучше, у некоторых работают разные варианты, многое зависит от шаблона, но вот мой личный опыт и два удачных варианта, которые 100% работают и просты в использовании.

Как зафиксировать сайдбар без плагинов?

Это первый способ, которым я долго пользовался. Нам потребуется всего-то кусок кода, который вписывается не в файлы шаблона, а прописывается в виджете Текст (Произвольный текст или HTML-код).

Сначала код в студию:

<script type="text/javascript"> $(window).scroll(function() {if ($(this).scrollTop()>1910) $('#scrollable').css({'position':'fixed','top':'30px'});else $('#scrollable').css({'top':'1568px','position':'static'});});</script> <div id='scrollable' style="width:370px">

Тут нужно вставить код рекламы или баннера.

</div>

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

kak-zafiksirovat-saydbar

top':'30px - это высота от верхнего края. Некрасиво, когда баннер прилипает к верху, лучше сделать небольшой отступ.

width:370px - это ширина рекламного блока, её тоже можно задать экспериментально. У себя я сделал на 5px меньше самого сайдбара.

Теперь идем в админку WordPress - Внешний вид - Виджеты  и вставляем скрипт и код рекламы.

fiksirovannyiy-saydbar

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

Да, чтобы все работало, нужен скрипт и подгружаемая им библиотека, можно прописать этот код в подвале сайта:

<script language="JavaScript" type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-1.3.2.min.js"></script>

Как зафиксировать виджет в сайдбаре плагином?

Если у вас стоит WordPress, то зафиксировать сайдбар можно так же плагином Q2W3 Fixed Widget. Именно этот способ я использую сейчас, так как он позволяет фиксировать любой виджет, а не только виджет с произвольным кодом, как это происходит в случае со скриптом.

Работать с плагином легко: после установки в настройках виджета появляется галочка ЗАФИКСИРОВАТЬ ВИДЖЕТ:

зафиксировать виджет

Все очень просто и удобно.

Насколько эффективно такое расположение рекламы? Как показал мой небольшой опыт, такое расположение очень хорошо кликается, но учтите: в такие плавающие блоки ЗАПРЕЩАЕТСЯ вставлять рекламу adsesnse, могут забанить аккаунт. А вот Яндекс, кажется, не против.

Ещё один важный момент: при использовании данной технологии может появиться неприятный момент: при просмотре сайта через мобильный телефон, виджет будет заползать на контент, а это не только неудобно для пользователей, но и нарушения правил Яндекса, так как реклама не должна перекрывать текст.

Лечится это очень просто: на сайт нужно поставить плагин мобильной версии сайта. Именно так и сделано у меня на этом блоге (да и на остальных тоже). Такой подод решает много задач, поэтому очень советую воспользоваться этим решением.

Если у вас буду вопросы, то пишите в комментариях, всегда отвечу и помогу чем могу :)


VK
OK
MR
GP

Опубликовано © Просто Linux | Всё про Линукс, Android и Windows.

Как зафиксировать блок в боковой колонке (виджет в сайдбаре)


18 комментариев

Понравилась ИГРА? Возьми КОД, поставь себе на сайт...

Самый лучший хостинг!

лучший хостинг

Где заказать логотип?

Логотип для сайта

НАЙТИ НА САЙТЕ

КОМАНДЫ LINUX

РЕПОЗИТОРИИ LINUX

ОБЛАЧНЫЕ СЕРВИСЫ

КОМПЬЮТЕРНЫЕ ТОВАРЫ

КАК ЗАРАБОТАТЬ В СЕТИ?

ВСЕ СТАТЬИ САЙТА

СОВЕТ ДНЯ: Если вы хотите вернуть часть стоимости при покупке в интернет магазине, обязательно воспользуйтесь одним из сервисов кэшбэка:

1. EPN - самый надежный кэшбэк (Aliexpress, GearBes, BANGGOOD и многие другие...)

2. LetyShop - самое большое количество магазинов - больше 1000 магазинов!

Что такое кэшбэк читайте в этой статье...

© Все права сохраняются. Копировать материалы без разрешения автора ЗАПРЕЩАЕТСЯ!