Як зробити спойлер для сайту

Відео: Уроки Bootstrap 3 Верстка | # 12. Як зробити спойлер

Охочих створювати сайти зараз дуже багато. Більшість користувачів вчиться цьому самостійно, використовуючи різні джерела. І, звичайно, існують поняття, про які майбутні власники навіть і не чули. Але вже якщо взялися за справу, то вивчати його треба досконально. Тому в статті буде докладно розглянуто питання про те, як зробити спойлер на своєму ресурсі.

Почнемо, природно, з самого поняття, що це таке і для чого даний об`єкт буде потрібно. Отже, досить часто на сайтах присутня інформація різного роду, яку (з різних причин) треба спочатку заховати від відвідувачів. Тобто не те щоб її зовсім не показувати, а просто надавати тільки за бажанням. Ось спойлер в html якраз для цього і використовується. Він зберігає спочатку прихований контент для сайту. Але це ніяк не відбивається при ранжируванні ресурсу пошуковими системами, так як для них ця конструкція відкрита і негативного впливу не спостерігається. Будь-яка прихована інформація розкривається при кліці на зазначену посилання.

Крім того, як зробити спойлер, дуже багатьом цікаво, а з якою метою він робиться? Найчастіше для зовнішньої краси ресурсу. Візьмемо, наприклад, сайт, дизайн головної сторінки якого не передбачає розміщення тексту великого розміру. А власнику треба, щоб пошуковики ресурс просували, тому контент повинен бути об`ємним (розмір статті може зіграти значну роль). Ось і приходить на допомогу створення спойлера. Ще його використання підійде для приховування допоміжної інформації, або того, що не завжди хочеться читати.

Відео: Як зробити спойлер в joomla 2.5 на прикладі сайту МММ-2012

Далеко не всім хочеться їх читати, але від них нікуди не дітися. Існує спосіб, який допоможе вберегти відвідувачів від даного чтива. Це створення кнопки, яка приховує будь-якого виду спойлер на форумі, в статті і т.п. Створити її можна по-різному. Найпростіше за допомогою html-коду input class = "button". Спочатку треба тільки переконатися, що при додаванні інформації підтримується вставка коду, і якщо так, то кнопка почне працювати відразу після вставки в потрібне місце тексту.

Така версія підходить для сайту, створеного на Ucoz. Але навіть після установки кнопка може не працювати, так як вимагає додаткових налаштувань. В першу чергу - це її зовнішній вигляд. Потім - ідентифікатор, який повинен бути унікальним. І, нарешті, в код сторінки, де має перебувати матеріал, перед тегом додається скрипт, який відповідає за коректну роботу кнопки. Важливо правильно його помістити, а не просто знати, як зробити спойлер.

Відео: Як зробити спойлер (каталог, список) .avi

А тепер розберемо цю ж функцію, але тільки вже для сайту, зробленого для WordPress. Найпростіше тут використовувати плагін Advanced Spoiler, який легко завантажити з багатьох ресурсів. Його установка стандартна:

- розпакування архіву на своєму комп`ютері;

- підключення до сайту за допомогою фтп-клієнта (найпопулярніший - Total Commander);

- закачування файлу на свій хостинг;

- в адмінці сайту, шукаємо розділ «Модулі - неактивні» і активуємо знову встановлений. Після виконаних дій він почне працювати. Тепер, додаючи матеріал в будь-якому редакторі, як у візуальному, так і в html, буде видно кнопка «Spoiler». Додаванням потрібною інформацією між тегами [spoiler] [/ spoiler] і створюється спойлер. Якщо власник непогано розбирається, плагін можна трохи переналаштувати.

І ще один спосіб, як зробити спойлер на сайті. В першу чергу треба підключити бібліотеку jQuery і так звану «приблуду» JS, яка потрібна для того, щоб спойлер сворачивался і розвертався більш-менш плавно. На потрібній сторінці сайту, в адміністративній панелі, між тегами розміщується необхідний код. Далі, щоб функція за замовчуванням була закрита, в CSS-файл додається рядок .splCont {display: none; padding: 3px 5px;}. Якщо немає такого документа, це не настільки страшно. Напис можна помістити в будь-якому місці прямо в самому тексті, головне - до розміщення самого спойлера. І, нарешті, між ... поміщається сам код приховування інформації.