Плавающий блок без плагинов. Как сделать?
При разработке сайта нужно учесть большое количество технических нюансов. Сделать красивое оформление, продумать и создать удобную структуру страницы, а именно разграничить место для основного контента, рекламы и элементов навигации. А так же позаботится о том, чтобы некоторые элементы дизайна были доступны посетителям практически всегда. Речь идет о плавающем блоке или целой колонке.
Плавающий блок способен уместить в себе различный контент: будь это картинки или текст, видео ролики, баннеры или контекстная реклама, которая может принести не малый доход ресурсу, так как кликабельность, в этом случае, по ней заметно улучшается, за счет постоянного нахождения перед глазами посетителя. Именно о том, как сделать плавающий блок без плагинов на сайте вы узнаете в этой статье. Читайте и реализуйте на практике.
Плавающий блок без плагинов
Данную функцию можно реализовать с помощью плагина Q2W3 Fixed Widget, только он имеет ряд серьезных проблем и не работает во многих шаблонах, поэтому я и решил показать вам вариант установки плавающего блока на сайте без использования плагина.
Как уже было сказано выше он, то есть блок, будет следовать (плавать) за пользователем по всей странице, постоянно находясь у него на виду. Его реализацию вы можете наблюдать в сайдбаре блога, в нем размещена реклама.
Для его реализации вам нужно создать текстовый виджет или просто в файле sidebar.php разместить html код расположенный ниже. Место для вставки определяете самостоятельно.
Чтобы блок начал плавать по странице, в файл footer.php вставьте этот код:
А теперь немного поговорим о технической составляющей кода. Если вы обратите внимание на строку под номером «6», то она задает расстояние от верхней границы до плавающего блока. какое значение там указать, решать вам. Остальные строчки, на которые вам нужно обратить свое внимание, оснащены комментариями.
Теперь, я надеюсь, вы знаете как сделать плавающий блок без плагина на сайте и тем самым снизить нагрузку на сервер хостинга и сэкономить в будущем свои деньги и нервы. Не забывайте подписывать на обновление блога. На этом у меня все. Всего самого хорошего.
С уважением, Дороднов Иван
(7 голос, средний: 4,43 из 5)
Loading ...
Навигация
Предыдущая статья: ← Маска запросов. Что это такое?
Следующая статья: Как выполнить вход в админку WordPress? →
В этой же рубрике:
Понравилась статья? Получайте свежие уроки прямо на email или подпишитесь на RSS ленту блога!
Здравствуйте, Иван!
Впервые на Вашем сайте. Столько неординарного и полезного для блоггеров я нашла у Вас, что непременно беру сайт в закладки!И обязательно реализую Ваши идеи. УДАЧИ!!!
Скажите, а плавная прокрутка работает только для кода рекламы?
Я попробовал заключить блок с виджетом от ВК, но он остался стоять на месте.
Можно вставлять абсолютно любой контент. К сожалению, не могу вам сказать почему виджет от «Вконтакте» не движется. Может у вас код не работает, вы просто текст пробовали вставлять?
Отличная «штука»! Давно искал, как такую реализовать, но нашел только с помощью плагина. Кстати, я слышал что нельзя в плавающий блок рекламу вставлять, могут забанить. Не слышал о таком?
Слышал, но доказательств не видел. Это скорее всего касается агрессивной рекламы, которая загораживает контент. Апдейт прошел, проблем не наблюдаю.
Тогда тоже сделаю такой баннер, после того как РСЯ одобрит.
Я пока очень доволен, количество кликов, за счет плавающего блока, возросло в несколько раз. Кстати, сейчас можно повесить туда форму подписки или партнерскую программу.
Вот и я тоже об этом подумал. Сегодня вечером постараюсь туда форму подписки поставить.
Здравствуйте Иван!
У меня проблема с плагином. В общем обычный баннер не хочет двигаться. Не работает! Не подскажите в чем может быть проблема?
Если проблема с плагином, то решение не подскажу, у самого не работает, поэтому использую код.
Установила код, теперь все заработало. Спасибо
Иван, у меня нет левого сайдбара. Но очень хочется прикрепить плавающий баннер именно справа. Подскажите, как можно реализовать это?
Наталья, придется переделывать шаблон, если такой функции не предусмотрено.
Хороший способ, но можно ещё немного проще сделать www (точка) prostolinux (точка) ru (слеш) kak-zafiksirovat-saydbar. Тут код весь вставляется прямо в виджет сайдбара.
Оценил, но пока не применял. Надеюсь, читателям вам способ будет интересен.
Спасибо Иван за код. Действительно сейчас практически все можно сделать с помощью плагинов. Но не хочется из-за небольших элементов делать из блога тонную неповоротливую глыбу.
Рад, что смог угодить. Кстати, скоро выйдет статья продолжение, в которой расскажу, как можно размещать рекламу или нужную информацию без плагина. Это будет новое место)
Спасибо, скрипт нужный. Одна проблема, в адаптивном шаблоне не корректно работает, при изменении окна браузера, вылазит поверх всего и смотрится ужасно.
Может кто знает, как настроить его под резиновый шаблон, чтобы виджет отключался вообще при изменении окна?
Добрый день, Иван. Скажите, пожалуйста, возможно ли реализовать модуль «плавающий блок» на Joomla и как это сделать? Был бы очень признателен за совет.
Добрый день, Сергей. Данный скрипт универсален для любой CMS, так что можете смело его использовать.
Спасибо огромное за ценную инфу. Давно пыталась это сделать, но почему-то у меня не «плавал», а с вашими пояснениями я все сделала буквально за 3 минуты!
Вам спасибо, Анастасия. Рад, что получилось помочь.
Иван, не смотря на то, что, как вы говорите, скрипт универсален и подойдет для джумлы, не ясно, куда его там вставлять. Какие файлы править? Если не затруднит, сделайте мануал по созданию такого модуля в Джумле?
С уважением, Сергей.
На Джумле, не работает код с моим шаблоном
. Просто не двигается.
В ближайшее время перепишу код для Joomla.
Здравствуйте, скажите пожалуйста, а если сайт не стоит на CMS, что куда вставлять? я так понимаю контейнер div с объявлением вставить в нужное место страницы, а скрипт вставить между тегами
или как понять не могу?Подключаете Java и экспериментируете.
Иван, а почему плашка «Яндекс Директ» скрывается в вашем коде?
как её вернуть?
В смысле скрывается? При прокрутке вверх плавающий блок чуть заезжает, но буквально через секунду возвращается на свое привычное место. Это несовершенство кода и все. Если можете исправить, то буду благодарен.
Добрый день, как сделать чтоб блок выводился с правой стороны
у меня на блоге 2 сайдбара: слева и справа от основного контекта. не подскажете, как реализовать возможность плавающего баннера для обоих сайдбаров? сначала я сделал виджет липким в правом сайдбаре. все получилось и заработало. но когда проделал то же самое с левым сайдбаром, то слева виджет прилип, а справа теперь виджет перестал быть липким и вместе с текстом уходит вверх.
Доброго дня, Артем. Не пробовал реализовывать данный код для двух сайдбаров одновременно.
Прописать его в сайдбаре справа.