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