Неисчезающая форма подписки без плагина
Сегодня предлагаю вам узнать, как сделать внизу всех страниц вашего сайта неисчезающую форму подписки без плагина, либо содержащую любую другую информацию. Делается все это через CSS, т.е. вставим небольшой код в файлы шаблона.
Для решения подобных проблем многие блоггеры используют сторонние плагины и скрипты. Зачем? Все делается предельно быстро и кодом.
Многие умудряются ставить на свой блог форму подписки через "поп-ап" плагины, не задумываясь об удобстве пользователя. К тому же поисковые системы часто накладывают фильтр за подобные штуки. Задумайтесь.
К делу. По итогу я оформил данную полоску подписки таким образом (смотрите низ скриншота):
Часть 1: вставляем каркас
Чтобы выполнить вставку кода, не нужно годами изучать создание сайтов. Следующий код нужно вставить прямо перед закрывающим тегом </body>. На WordPress это скорее всего будет файл footer.php. На других движках или html-одностраничниках: ищите то место, где выводится "подвал" сайта.
Поясню что к чему (все названия произвольные):
- linefooter - данный элемент является самой полоской, на которой будет располагаться ваша форма подписки, кнопки, любая другая информация. Ей мы зададим параметры CSS, которые закрепят в низу страницы (чуть ниже об этом);
- footbox1 и footbox2 - это "подконтейнеры" самой линии, которые позволяют разделить мою информацию по смыслу (в данном случае слева форма подписки feedburner, а справа социальные службы и кнопка Закрыть). Также в CSS зададим им свои параметры, чтобы их раскидать по краям и задать отступы.
- linefooter1, subscribefooter, linefooter2 и socico - для удобства каждому контейнеру div я задал свой класс, чтобы можно было легко редактировать свойства в CSS.
Часть 2: вносим правки в файл стилей CSS
Самое сложное позади. Теперь просто описываем свойства элементов:
.linefooter {
position:fixed;
bottom:0;
width:100%;
vertical-align:middle;
height: 26px;
}
.footbox1 {
float:left;
}
.footbox2 {
float: right;
}
Здесь для класса .linefooter (это наша полоска) мы задали фиксированную позицию, не зависимо от промотки экрана. Также задали ширину в 100% (чтобы учесть любое разрешение экрана) и высоту в 26px. Любой из параметров можете менять сами (кроме position). Я лишь показал один из примеров использования.
Для наших контейнеров .footbox1 и .footbox2 задано расположение/обтекание слева и справа. Можете добавлять другие параметры CSS на усмотрение.
Кнопка "Закрыть"
Кто дочитал - молодец. Вот вам код кнопки "Закрыть", для которой не нужно подключать никакие скрипты или плагины. Просто вставили и она работает до перезагрузки страницы:
Закрыть
Вместо слова "Закрыть" можно использовать картинку. Укажите стандартный тег img с путем до нужного вам изображения.
Послесловие
В статье предложен мой вариант реализации поставленной задачи. Владеющий навыками верстки может придумать абсолютно другое решение. Каждому свое.
Не скажу, что данная штука сразу принесла мне кучу подписчиков: как и ранее в день по несколько человек на почту подписываются. Тут еще момент: я сделал ее серого цвета, в стиль сайта. Обычно подобные формы подписки делают ярче, чтобы сразу бросилось в глаза. Пробуйте.
Теперь мои статьи, где также рассказывается про украшение формы подписки сайта:
Если возникнут проблемы с настройкой, то не забывайте про страницу Услуги. Изложил максимально просто. Если касаться CSS, то не однократно поднимались на блоге темы с описанием параметров и их применением. Полистайте и найдете.
