Главная » Бизнес в Интернете

Плавающий блок в сайдбаре блога WordPress

плавающий блокПлавающий блок на сайте — нужен ли он вообще? Вы знаете, я встречал плавающие блоки, которые просто мешали смотреть содержимое. Как будто что-то прилеплено к монитору, и хочется это отлепить. Впечатление ужасное. Возможно, Вы подумали про то же самое, прочитав название этой статьи.

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

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

Главное, что такой блок привлекает внимание, а именно это нам от нашей рекламы и нужно.

Если у Вас есть блог WordPress, то на блоге есть и сайдбар — неотъемлемый элемент блога. Когда посетитель прокручивает блог вниз, читая статью и комментарии, сайдбар прокручивается также вместе со статьей.

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

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

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

Как выглядит плавающий блок, Вы можете увидеть на блоге Александра Борисова. Кстати, очень рекомендую бесплатный курс «Вся правда о заработке на блогах» — его Вы найдете в сайдбаре у Александра. Из курса Вы узнаете, почему большинство блоггеров не зарабатывает, или зарабатывает намного меньше, чем могли бы.

Итак, как же все-таки реализовать такой плавающий блок для блога WordPress? Это можно сделать двумя способами. Первый — с помощью плагина, второй — с помощью кода. Какой способ лучше — решать Вам. Возможно, какой-то из этих способов просто не подойдет Вам — или версия WordPress окажется не такой, или с темой блога что-то будет не так, или по дизайну не получится. В таком случае, берите второй вариант.

Недостаток первого способа — любой плагин немного тормозит блог. Но лично я считаю, что это торможение в какие-то доли секунды особой роли не играет. Недостаток второго способа — при очень малых разрешениях экрана плавающий блок будет налазить на другие элементы дизайна Вашего блога.

Рассмотрим теперь эти варианты подробнее:

Плавающий блок с помощью плагина

Заходите в административную панель блога, в меню Плагины — Добавить новый, и в окошке поиска вписываете название плагина — Q2W3 Widget. Находите плагин Q2W3 Widget (Sticky Widget), устанавливаете и активируете его.


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

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

Плавающий блок с помощью кода

Заходите в административную панель блога, в меню Внешний вид — Редактор, находите пункт Боковая колонка (sidebar.php), и ставите в то место, где должен быть плавающий блок, следующий код:

<script> $(WINDOW).SCROLL(FUNCTION() { IF ($(this).scrollTop()>3000) $('#scrollable').css({'position':'fixed','top':'40px'}); ELSE $('#scrollable').css({'top':'3000px','position':'static'}); }); </script> <div id='scrollable' style="width:300px";> контент </div>

В коде обращаете внимание на числа, которые ответственны за момент, когда появляется плавающий блок, за расположение и ширину блока. Изменяете эти параметры на свои. Вместо слова «контент» ставите содержание своего блока. Также можете зайти в редакторе в шаблон Список стилей (style.css), и прописать стили для блока:

#scrollable {ваши стили};

Вот, в принципе, и все, пользуйтесь. Небольшой нюанс — не ставьте в плавающий блок контекстную рекламу от Google Adsense — Гугл строго к этому относится, не стоит рисковать.

А остальную рекламу ставить можно, и наверное, даже нужно.


Более подробные сведения Вы можете получить в разделах "Все курсы" и "Полезности", в которые можно перейти через верхнее меню сайта. В этих разделах статьи сгруппированы по тематикам в блоки, содержащие максимально развернутую (насколько это было возможно) информацию по различным темам.

Также Вы можете подписаться на блог, и узнавать о всех новых статьях.
Это не займет много времени. Просто нажмите на ссылку ниже:
    Подписаться на блог: Дорога к Бизнесу за Компьютером

Вам понравилась статья? Поделитесь, буду весьма признателен:


Также приглашаю добавиться в друзья в социальных сетях:

<< Предыдущая статья Следующая статья >>
Проголосуйте и поделитесь с друзьями анонсом статьи на Facebook:  

7 комментариев »

  • Ольга Кузьминых пишет:

    Хорошие советы для тех, кто старается максимально эффективно использовать полезную площадь блога. Кто-то может в этом блоке разместить рекламу партнерок, кто-то — привлечь внимание к своим продуктам или услугам. Я попробую установить плавающий блок с использованием кода (пересилю свой страх), так как с плагинами, по-моему, уже и так перебор.

  • Александр Ризун (автор) пишет:

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

  • Владимир пишет:

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

  • Александр Ризун (автор) пишет:

    Вполне можно, многие так и делают. Это не запрещено.

  • Станислав пишет:

    Приветствую!

    Спасибо за плагин: поставил себе на сайт и настроил за минуту!

  • Ирина пишет:

    Добрый день! Подскажите, пожалуйста, как зафиксировать плавающий блок так, чтобы он останавливался перед футером. Я плагином вывожу этот блок. Спасибо!

  • Александр Ризун (автор) пишет:

    Добрый день! В плагине такой функциональности нет, насколько я знаю.

Оставьте свой комментарий и ответный визит Вам обеспечен