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

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

Я не буду спорить, какой вариант лучше, у некоторых работают разные варианты, многое зависит от шаблона, но вот мой личный опыт и два удачных варианта, которые 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>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Опубликовано 7 Авг 2013 01:13 © Просто Linux | Всё про Линукс, Android и Windows.