Неисчезающая форма подписки без плагина

форма подписки на сайте cssСегодня предлагаю вам узнать, как сделать внизу всех страниц вашего сайта неисчезающую форму подписки без плагина, либо содержащую любую другую информацию. Делается все это через CSS, т.е. вставим небольшой код в файлы шаблона.

Для решения подобных проблем многие блоггеры используют сторонние плагины и скрипты. Зачем? Все делается предельно быстро и кодом.

Многие умудряются ставить на свой блог форму подписки через "поп-ап" плагины, не задумываясь об удобстве пользователя. К тому же поисковые системы часто накладывают фильтр за подобные штуки. Задумайтесь.

К делу. По итогу я оформил данную полоску подписки таким образом (смотрите низ скриншота):

форма подписки без плагина

Клик для увеличения

Часть 1: вставляем каркас

Чтобы выполнить вставку кода, не нужно годами изучать создание сайтов. Следующий код нужно вставить прямо перед закрывающим тегом </body>. На WordPress это скорее всего будет файл footer.php. На других движках или html-одностраничниках: ищите то место, где выводится "подвал" сайта.

<div class="linefooter">
  <div class="footbox1">
    <div class="linefooter1">
      Подписка
    </div>
    <div class="subscribefooter">
      Форма подписки на сайт feedburner или респондер
    </div>
   </div>
   <div class="footbox2">
      <div class="linefooter2">
	Следи в социалках
      </div>
      <div class="socico">
	Иконки социалок
      </div>
    </div>
  </div>

Поясню что к чему (все названия произвольные):

  • 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 на усмотрение.

Кнопка "Закрыть"

Кто дочитал - молодец. Вот вам код кнопки "Закрыть", для которой не нужно подключать никакие скрипты или плагины. Просто вставили и она работает до перезагрузки страницы:

<a onclick="document.getElementById('footline1').style.display='none'" href="javascript://">Закрыть</a>

Вместо слова "Закрыть" можно использовать картинку. Укажите стандартный тег img с путем до нужного вам изображения.

Послесловие

В статье предложен мой вариант реализации поставленной задачи. Владеющий навыками верстки может придумать абсолютно другое решение. Каждому свое.

Не скажу, что данная штука сразу принесла мне кучу подписчиков: как и ранее в день по несколько человек на почту подписываются. Тут еще момент: я сделал ее серого цвета, в стиль сайта. Обычно подобные формы подписки делают ярче, чтобы сразу бросилось в глаза. Пробуйте.

Теперь мои статьи, где также рассказывается про украшение формы подписки сайта:

Если возникнут проблемы с настройкой, то не забывайте про страницу Услуги. Изложил максимально просто. Если касаться CSS, то не однократно поднимались на блоге темы с описанием параметров и их применением. Полистайте и найдете.

Привет. Меня зовут Виталик и я автор этого блога, а так же Магазина WordPress https://wp-r.ru/.

Отблагодарить Z888279575784 R109400923968 или ЯД 41001651742138

Оказываю услуги по созданию и настройке сайтов на WordPress (верстка, натяжка).

Мои Контакты. Я в Twitter @mojWP. Смотри на Youtube. Читай RSS блога.

Опубликовано 26 комментариев
  1. Олег (6 комм.):
    http://blogibiznes.ru/

    Вот точно, совсем незаметная она у тебя, хотя сделано классно.

  2. Игорь (1 комм.):
    http://goldbusinessnet.com/

    Реализация задач без плагинов мой конек. Виталий, спасибо за статью.

  3. Binker (9 комм.):
    http://besplatnyeprogrammy.ws/

    Попробую на своём сайте реализовать, а можно на примере посмотреть как это выглядит?

    • Виталий (1674 комм.):

      конечно можно. Оно же реализовано прямо сейчас на сайте. В статье написано

      • Binker (9 комм.):
        http://besplatnyeprogrammy.ws/

        во блин))) она очень прям незаметная оказалась =)))
        Ну а так очень даже не плохо, сейчас попробую.

  4. Binker (9 комм.):
    http://besplatnyeprogrammy.ws/

    Виталик, а много тебе трафика приходит с подписчиков?

    • Виталий (1674 комм.):

      В последнее время нет: прежде чем статья падает на почту, я после публикацию делаю анонс в G+. С нее идет тот трафик почтовый + кто не подписался, но в кругах.

  5. Юджин Сварог (7 комм.):
    http://shiftoffproblem.com/

    Отличное решение, Виталий, прям как панель задач =)! Спасибо, попробую поэкспериментировать на одном из своих блогов.

  6. Liubik (23 комм.):
    http://www.sitekulinara.ru

    а как сделать такую форму, которая чуть выше..то есть с соц кнопками и подпиской по емайл? очень мне она понравилась :-))

  7. Liubik (23 комм.):
    http://www.sitekulinara.ru

    и такую же форму комментария с подпиской на последующие комменты...БЛАГОДАРЮ! желательно через плагины....:-))

  8. Binker (9 комм.):
    http://besplatnyeprogrammy.ws/

    Не получилось ничего, форма под виджетом, и не оформлена...

    • Виталий (1674 комм.):

      Конечно не получится.
      Я дал каркас и основные параметры. Каждый шаблон индивидуален и требует своего оформления данной штуки.

  9. Binker (9 комм.):
    http://besplatnyeprogrammy.ws/

    Установил! Спасибо большое, за 2 дня 9 подписчиков =)

  10. Виктор (1 комм.):

    Спасибо огромное! Сначала не понял, как выровнять все в одну строку, задать фон полоске и отступы для элементов, но немного терпения и Firebug - в итоге все получилось!

  11. Анна (2 комм.):
    http://genetictestblag.ru/

    Вы имеете ввиду зайти на сайт фидбюрнера и там включить функцию подписку, или на своем сайте необходимо ее включить?
    С уважением, Анна

    • Виталий (1674 комм.):
      http://mojWP.ru/

      Не совсем понимаю о чем вы

  12. Movlid (10 комм.):
    http://infoded7.ru

    Это что, код подписки на комменты? А что это дает? Просветите "темноту"!

    • Виталий (1674 комм.):
      http://mojWP.ru/

      Дает возможность людям подписаться на обновление сайта.

  13. Movlid (10 комм.):
    http://infoded7.ru

    "Если хочешь вставить в комментарий код, то для его корректного отображения используй конструкцию код (вписывать вручную синие буквы/символы!!!)." Объясните, пожалуйста, для чего нужна вставка этого кода? Кто-то же использует, раз вариант предлагается!

    • Виталий (1674 комм.):
      http://mojWP.ru/

      Для тех, кто хочет показать мне код в комментариях. Стандартно код не отображается (начинает обрабатывать CMS). Поэтому необходимо заключить в специальные символы, чтобы CMS знала - это обрабатывать не нужно, а выводить как обычный текст.

  14. Sead (5 комм.):
    http://delajblog.ru/

    Всё сделал как оптсано и всё получилось

  15. Виктор (1 комм.):
    http://lampa-mag.ru

    Очень полезная статья.

  16. Oksana (2 комм.):
    http://uvlekasha.ru

    Какая то паника началась по поводу FeedBurner - многие убирают с сайтов ленту RSS подписки и даже из шаблона темы - что случилось и зачем?

    • Виталий (1674 комм.):
      http://mojWP.ru/

      Думаю, подобный вопрос вам нужно задать тем, кто убирает. Я с таким не сталкивался.

  17. Alex (2 комм.):
    http://history-tema.com/

    У меня лента RSS то показывается фидом, то - нет, чаще - нет.

  18. Людмила (2 комм.):
    http://babushkinsunduchok.ru

    только сейчас заметила что все комменты уже плесенью покрылись....

Не держи в себе. Выскажись.

Ваш e-mail не будет опубликован. Обязательные поля помечены *

© 2011-2016 | mojwp.ru | Копирование материала разрешено только с письменного согласия
WordPress: 13.95MB | MySQL:90 | 0,687sec
Премиальные плагины для CMS WordPress
Магазин WordPress WP-R.ru
Спасибо, не показывайте мне эту штуку больше!
Смотри мои обучающие видео на YouTube
Иван только что купил плагин ELT
https://wp-r.ru/plaginy/elt.html