mojwp.ru
Назад

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

Опубликовано: 09.04.2013
26
31

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

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

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

Внимание! Я выпустил новую тему Romb для ваших статейников и блогов. Максимально быстрая по Google PageSpeed и максимальная оптимизация под SEO.

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

форма подписки без плагина
Клик для увеличения

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

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

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

  • linefooter — данный элемент является самой полоской, на которой будет располагаться ваша форма подписки, кнопки, любая другая информация. Ей мы зададим параметры CSS, которые закрепят в низу страницы (чуть ниже об этом);
  • footbox1 и footbox2 — это «подконтейнеры» самой линии, которые позволяют разделить мою информацию по смыслу (в данном случае слева форма подписки feedburner, а справа социальные службы и кнопка Закрыть). Также в CSS зададим им свои параметры, чтобы их раскидать по краям и задать отступы.
  • linefooter1, subscribefooter, linefooter2 и socico — для удобства каждому контейнеру div я задал свой класс, чтобы можно было легко редактировать свойства в CSS.

Часть 2: вносим правки в файл стилей CSS

Самое сложное позади. Теперь просто описываем свойства элементов:

Здесь для класса .linefooter (это наша полоска) мы задали фиксированную позицию, не зависимо от промотки экрана. Также задали ширину в 100% (чтобы учесть любое разрешение экрана) и высоту в 26px. Любой из параметров можете менять сами (кроме position). Я лишь показал один из примеров использования.

Для наших контейнеров .footbox1 и .footbox2 задано расположение/обтекание слева и справа. Можете добавлять другие параметры CSS на усмотрение.

Кнопка «Закрыть»

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

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

Послесловие

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

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

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

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

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

Давай, оцени статью!

Автор:
Виталий
Поделиться
Комментарии:
  • Олег
    Опубликовано: 09.04.2013 Ответить на сообщение

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

  • Игорь
    Опубликовано: 10.04.2013 Ответить на сообщение

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

  • Binker
    Опубликовано: 10.04.2013 Ответить на сообщение

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

    • Виталий
      Опубликовано: 10.04.2013 Ответить на сообщение

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

      • Binker
        Опубликовано: 10.04.2013 Ответить на сообщение

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

  • Binker
    Опубликовано: 10.04.2013 Ответить на сообщение

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

    • Виталий
      Опубликовано: 10.04.2013 Ответить на сообщение

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

  • Юджин Сварог
    Опубликовано: 10.04.2013 Ответить на сообщение

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

  • Liubik
    Опубликовано: 11.04.2013 Ответить на сообщение

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

  • Liubik
    Опубликовано: 11.04.2013 Ответить на сообщение

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

  • Binker
    Опубликовано: 12.04.2013 Ответить на сообщение

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

    • Виталий
      Опубликовано: 12.04.2013 Ответить на сообщение

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

  • Binker
    Опубликовано: 16.04.2013 Ответить на сообщение

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

  • Виктор
    Опубликовано: 18.11.2013 Ответить на сообщение

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

  • Анна
    Опубликовано: 21.03.2014 Ответить на сообщение

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

    • Виталий
      Опубликовано: 21.03.2014 Ответить на сообщение

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

  • Movlid
    Опубликовано: 04.04.2014 Ответить на сообщение

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

    • Виталий
      Опубликовано: 04.04.2014 Ответить на сообщение

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

  • Movlid
    Опубликовано: 04.04.2014 Ответить на сообщение

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

    • Виталий
      Опубликовано: 04.04.2014 Ответить на сообщение

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

  • Sead
    Опубликовано: 28.06.2014 Ответить на сообщение

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

  • Виктор
    Опубликовано: 11.08.2014 Ответить на сообщение

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

  • Oksana
    Опубликовано: 23.01.2015 Ответить на сообщение

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

    • Виталий
      Опубликовано: 23.01.2015 Ответить на сообщение

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

  • Alex
    Опубликовано: 29.05.2015 Ответить на сообщение

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

  • Людмила
    Опубликовано: 17.11.2015 Ответить на сообщение

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

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.