Сьогодні пропоную вам дізнатися, як зробити внизу всіх сторінок вашого сайту незникаючу форму підписки без плагіна, або містить будь-яку іншу інформацію. Робиться все це через CSS, тобто вставимо невеликий код в файли шаблону.
Для вирішення подібних проблем багато блогери використовують сторонні плагіни і скрипти. Навіщо? Все робиться гранично швидко і кодом.
До справи. За підсумком я оформив дану смужку підписки таким чином (дивіться низ скриншота):
Клік для збільшення
Частина 1: вставляємо каркас
Щоб виконати вставку коду, не потрібно роками вивчати створення сайтів. Наступний код потрібно вставити прямо перед закриває тегом
. На WordPress це швидше за все буде файл footer.php. На інших двигунах або html-одностранічнік: шукайте те місце, де виводиться "підвал" сайту.
Поясню що до чого (всі назви довільні):
Частина 2: вносимо правки в файл стилів CSS
Найскладніше позаду. Тепер просто описуємо властивості елементів:
Тут для класу .linefooter (це наша смужка) ми задали фіксовану позицію, не залежно від промоткі екрану. Також задали ширину в 100% (щоб врахувати будь-який дозвіл екрана) і висоту в 26px. Будь-який з параметрів можете змінювати самі (крім position). Я лише показав один із прикладів використання.
Для наших контейнерів .footbox1 і .footbox2 задано розташування / обтікання зліва і справа. Можете додавати інші параметри CSS на розсуд.
Кнопка "Закрити"
Хто дочитав - молодець. Ось вам код кнопки "Закрити", для якої не потрібно підключати ніякі скрипти або плагіни. Просто вставили і вона працює до перезавантаження сторінки:
Замість слова "Закрити" можна використовувати картинку. Вкажіть стандартний тег img з шляхом до потрібного вам зображення.
Післямова
У статті запропоновано мій варіант реалізації поставленого завдання. Той, хто володіє навичками верстки може придумати абсолютно інше рішення. Кожному своє.
Не скажу, що дана штука відразу принесла мені купу передплатників: як і раніше в день по кілька чоловік на пошту підписуються. Тут ще момент: я зробив її сірого кольору, в стиль сайту. Зазвичай подібні форми підписки роблять яскравіше, щоб відразу кинулося в очі. Пробуйте.
Тепер мої статті, де також розповідається про прикрасу форми підписки сайту:
Якщо виникнуть проблеми з налаштуванням, то не забувайте про сторінку Послуги. Виклав максимально просто. Якщо торкатися CSS, то неодноразово піднімалися на блозі теми з описом параметрів і їх застосуванням. Погортайте і знайдете.
Вітання. Мене звуть Віталік.
Віддячити Z888279575784 R109400923968 або ЯД 41001651742138
Я в Twitter @mojWP. Дивись на Youtube. Читай RSS блогу.
WP-R.ru Магазин WordPress Преміальні плагіни і шаблони для CMS WordPress. Прокачай свій сайт. WMSN.ru Рідер RSS-стрічок Стеж за виходом нових статей на популярних блогах вебмастер / SEO в одному місці.
Як просувати рубрику WordPress - інструкція та практичні поради щодо оптимізації. Для Вебстудіо і розробників - кілька корисних хаков для популяризації вашого бренду. Вся правда про хостинг Beget - мій відгук на його роботу і функціонал виходячи з досвіду. Як заробляти на download-трафив - ділюся своїм багаторічним досвідом і даю підказки.
Мої безкоштовні плагіни
Я використовую і раджу
SEO плагін WordPress
Рекомендую для максимальної настройки свого сайту під SEO-вимоги.
Мій надійний хостинг, перевірений за роки роботи. Рекомендую.