Як створити плаваючий блок на css і jquery в сайдбарі?
У цьому уроці я хочу показати вам як можна створити плаваючий блок на сайті без плагінів, а за допомогою стандартних функцій CSS і Jquery. Унікальність цього методу полягає в тому, що він ідеально підходить для будь-якої CMS і будь-якого хостингу, особливо якщо вам потрібен ковзний блок вже зараз, а плагіна або модуля під вашу CMS зараз немає.
Що ж таке плаваючий блок?
Я впевнений на 100% що ви його вже зустрічали на просторах інтернету, але щоб ви відразу згадали що це таке, подивіться приклад на нашому сайті за посиланням http://w9y.ru/example/cssjs/02sticky/ і спробуйте опуститися вниз сторінки і звертайте увагу на сайдбар.
Подивилися? Думаю зрозуміло, що цей блок буде завжди на веду у вас і у ваших користувачів, а значить і CTR і ефективність у такого блоку буде на порядок вище. Ви можете в цей блок розмістити форму підписки, інформацію про захід, цікаві матеріали з сайту або ж рекламу якихось курсів, cpa, контекстну рекламу php?url=aHR0cDovL2dvby5nbC9ka3k5Yjg%3D> Яндекс.Директ . Зверніть увагу код Google Adsense в такий блок вставляти заборонено правилами системи. А якщо хочете заборонити копіювання в цьому блоці, почитайте статтю захист тексту від копіювання і примніть її на своєму сайті.
Корисна порада! Щоб ви відчули ефект від плаваючого блоку на собі, раджу записати результати доходу / трафіку / цільових дій до установки і подивитися на результат після настройки блоку. Результат вас приємно здивує.
І так приступаємо до створення плаваючого блоку в сайдбарі, я знайшов два методи які мені здалися простими і легкими в застосуванні. Який використовувати саме вам, я не можу точно сказати, але думаю ви самі без проблем з двох варіантів виберіть один відповідний, хіба мало раптом якийсь із варіантів працювати не буде, а так з двох варіантів точно щось заробить
преднастройка
Спочатку потрібно підключити бібліотеку jquery, на багатьох CMS вона підключена за замовчуванням, для того щоб перевірити підключена вона у вас або потрібно відкрити свій сайт в браузері і натиснути на CTRL + U або ж правою кнопкою миші натисніть в будь-якому місці на сайті і виберіть там "вихідний код". Між тегами head знайдіть jquery, якщо такого у вас немає, то потрібно його додати через шаблон.
Якщо не знайшли, то вставляємо між тегами head цей рядок:
<Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </ script>
Для кожної CMS це різний файл, все залежить від вашого шаблону, якщо не знаєте куди підключати, пишіть сайт в коментарях і CMS сайту, я постараюся допомогти вам. Хоча пошук в Яндексі або в Google легко дасть на це питання потрібної відповіді, але все ж якщо й там не знайдіть, пишіть мені в коментарях.
Якщо ви все зробили правильно, перевірте через вихідний код є в шаблоні рядок з текстом "jquery", якщо є, то ви все зробили правильно і ми можемо йти далі.
Плаваючий блок на css і jquery, метод # 1
Тепер в потрібному місці в сайдабре вставляємо наступний код:
<Script> $ (window) .scroll (function () {if ($ (this) .scrollTop ()> 1910) $ ( '# scrollable'). Css ({ 'position': 'fixed', 'top': '0px'}); else $ ( '# scrollable'). css ({ 'top': '568px', 'position': 'static'});}); </ Script> <div id = 'scrollable' style = "width: 250px";> Ваш код вставляйте тут. </ Div>
Де напис "Ваш код вставляйте тут." Вставляємо свій код реклами, форми підписки або іншого потрібного контенту. Після цього можете перевірити скрипт плаваючого блоку на сайті, якщо все зробили правильно, то повинен вийти такий результат:
Стилі, розмір div і інші настройки можете прописати самі за допомогою CSS.
Плаваючий блок на css і jquery, метод # 2
Другий метод практично ідентичний першому, правда він розумніший і тут не потрібно вказувати висоту, але код трохи більше. Хоча результат роботи у них однаковий практично.
Установка у нього така ж як і у першого методу, код потрібно вставити в Сайдбар:
<Script language = "javascript"> $ (document) .ready (function () {var floatsidebar = $ ( "# floatsidebar"); var offset = floatsidebar.offset (); var left = offset.left; var top = offset.top; var width = $ ( "# float-sidebar"). width (); var height = $ ( "# float-sidebar"). height (); $ (window) .scroll (function () { var scrollTop = $ (window) .scrollTop (); if (scrollTop> = top) {$ ( '# float-sidebar'). css ({left: left + 'px', position: 'fixed', top: "0px ", width: width +" px "});} else {$ ( '# float-sidebar'). css ({position: 'static',});}});}); </ Script>
А цей код можна вставити нижче, але при цьому вставити в нього свою інформацію.
<Div id = "float-sidebar"> Тут код вашого рекламного блоку або будь-яке інше вміст </ div>
Налаштування CSS так само можете вписати свої, зробити відступ, вказати розміри і т.д. Подивитися приклад можна тут:
Міні-хак плаваючого блоку для DLE будь-якої версії
На одному з сайтів на DLE я тестував різні блоки реклами в сайдбарі і мені було не зовсім зручно кожен раз заходити в вихідний код, щоб поміняти банер з одного на інший. І я згадав про стандартний модуль DLE "Рекламні матеріали", на нього можна зайти за адресою "http: // www.site.ru /admin.php?mod=banners", де нам потрібно в самому низу нажамать на кнопку "Створити банер "або відразу перейти на таку адресу:
www.site.ru/admin.php?mod=banners&action=add
У назві баннерного поля пишемо "sidebar", приклад:
Вставляємо потрібний рекламний код або код розсилки наприклад в поле "код банера".
У шаблоні в залежності від варіанту плаваючого блоку (зверніть увагу на ID блоку DIV) ставимо код в сайдбар:
<Div id = "float-sidebar"> [banner_sidebar] {banner_sidebar} [/ banner_sidebar] </ div>
І тепер ми можемо керувати вмістом цього блоку за допомогою модуля "Рекламні матеріали" в DLE і не потрібно буде кожен раз заходити в код шаблону, щоб поміняти банер
І пам'ятайте даний плаваючий блок працює на DLE, Wordpress, Joomla, Drupal, LiveStreet, UCOZ і на будь-якому іншому;) Пишіть коментарі, як у вас працює він і на скільки виросли показники конверсії.
Порівняти методи:
Що ж таке плаваючий блок?
Подивилися?
Php?
Php?
