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

Регистрация доменов
Домен RU - 99 руб
Домен РФ - 99 руб
www.

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


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

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

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

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


СОВЕТ ВЕБМАСТЕРУ: Умение зарабатывать в интернете - это только пол дела, вторая половина - это умение ВЫГОДНО обналичивать электронные деньги. Вот список офшорных банковских карт, на которые можно выводить средства и потом снимать с них хрустящие купюры:

1. Epayments - можно открыть счет в долларах, евро и рублях. Формально банка нет, юридический адрес в Лондоне, но можно получить реквизиты банка в Латвии.

2. AdvCash - Офшорный банк находится в Белизе, можно открыть счет в долларах, евро, фунтах и рублях.

3. OkPay - Офшорная компания зарегистрирована на Британских Виргинских островах, можно открыть счет в долларах, евро и рублях.

4. Payeer - Штаб квартира этой платежной системы находится в Грузии, тут так же можно открыть счет в долларах, евро и рублях.

Во всех случаях можно заказать банковскую карту, которую пришлют вам по обычной почте. Активируете ее и идете снимать деньги банкомат! Тарифы смотрите на сайтах платежных систем.



Понравилась ИГРА? Возьми КОД, поставь себе на сайт и улучши поведенческие факторы!


18 комментариев
  1. Отличный способ! Всё работает!

    Также обратил внимание на плагин вывода похожих постов в конце статьи. В аналогичных плагинах не встречал кнопки типа "Load more posts". Подскажите адресок откуда его можно скачать.

  2. У меня к сожалению не сработало, пробовал на двух темах. В итоге установил плагин Q2W3 Fixed Widget с помощью его можно сделать любой виджет плавающим.

  3. Спасибо. Подскажите, а как сделать чтобы при прокрутке рекламный блок стопорился на footer? А то как-то не эстетично на подвал залезает.

  4. Добрый день, подскажите как в этом коде прописать и отступ с низу, сверху есть 30, а снизу как?

    $(window).scroll(function() {if ($(this).scrollTop()>1910) $('#scrollable').css({'position':'fixed','top':'30px'});else $('#scrollable').css({'top':'1568px','position':'static'});});

    • А зачем снизу? Он же фиксируется относительно верха и зависает. Или что вы имеете ввиду?

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

    • Этот код придумал не я, мне трудно в этом вам помочь. К тому же если это только на одном браузере, то это ещё все усложняет. А вы не пробовали вот этот плагин Q2W3 Fixed Widget я сейчас пользуюсь им и меня все устраивает.

  6. Ясно, с DLE вообще не имел дело, только слышал. Код можно было бы подшаманить, но боюсь, что у меня будет работать совершенно не так, как у вас, так как у меня везде wordpress.

  7. плавающий блок реализуется только для самого нижнего блока? можно сделать, например, самый верхний чтобы прилипал?

    • Дописал и подправил статью, уже устарела немного, использую сейчас второй метод. Прочитайте так же последние абзацы в статье, я их дописал только что, они очень важны.

  8. Спасибо. Реально помогло. Поставил плагин на свой WP блог и не сработал почему-то, а ваш js код реально помог. Еще раз спасибо.

Написать комментарий

Опубликовано © Блокнот вебмастера