Универсальная панель подписки на сайте

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

В этом уроке мы рассмотрим как без особого труда можно сделать универсальную выезжающую панель подписки. Когда посетитель вашего сайта заходит на страницу с установленной панелью, через несколько секунд панель должна плавно выехать внизу сайта. Сейчас панель Вы можете увидеть, обратив внимание на самый низ страницы. Панель служит для того, чтобы любой человек, при желании, мог ввести своё имя и адрес электронной почты и, нажав кнопку «Подписаться» или «Скачать курс», оформить подписку на предложенную автором тему, взамен получив какой-либо бесплатный либо обучающий материал или бонусы. Панель появляется только при первом посещении страницы, чтобы не надоедать людям, не проявляющих к ней интерес. Её можно убрать из поля видимости нажатием на кнопку закрытия (крестик в правом верхнем углу панели). Панель уходит вниз, но вместо неё появляется значок (восклицательный знак в красном круге), с помощью которого в любой момент её можно вернуть.

Процесс установки на сайт

Для осуществления этой идеи необходимо выполнить всего три простых шага:

• Загрузить файлы стилей, изображений и ява-скриптов в соответствующие папки в корне сайта;
• Подключить стили и ява-скрипты, прописав пути к этим файлам в разделе head;
• Вставить код универсальной панели подписки в раздел body страницы, желательно, перед закрывающим тегом: </body>.

Шаг 1

Скачать архив (82 кб) с папкой files-panel, распаковать в отдельную папку на компьютере.

В папке files-panel находятся три папки - css, images и js. Файлы из этих папок закачать в одноименные папки, которые находятся в корне вашего сайта: файлы из папки css - в папку css в корне сайта, файлы из папки images в папку images в корне сайта и т.д. Если некоторых папок нет в корне вашего сайта, значит их нужно создать.

Шаг 2

Далее необходимо подключить стили и ява-скрипты. Для этого, код, который находится в таблице ниже, нужно скопировать и вставить, желательно в разделе head вашего сайта, где это всё и должно располагаться:

<link rel="stylesheet" type="text/css" href="css/bottom-panel-ie.css">
<link rel="stylesheet" type="text/css" href="css/bottom-panel.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.cookie.min.js"></script>
<script type="text/javascript" src="js/bottom-panel.js"></script>
<!--[if lte IE 9]>
<script type="text/javascript" src="js/placeholder.js"></script>
<![endif]-->

Шаг 3

В самый низ страницы, где предполагается наличие панели, вставляем следующий код:

<div id="bottomPanel">
<div id="bottomPanelConteiner">
<a class="close" href="#"></a>
<img src="images/logo.png" id="bottomPanelLogo" alt="">  
<form>
<span class="title">новые видеоуроки  <span>бесплатно!</span></span>
<input class="placeholder" type="text" name="name" 
placeholder="Введите ваше имя">
<input class="placeholder" type="text" name="email" 
placeholder="Введите ваш email">
<button type="submit">Подписаться</button>
</form> 
</div>
</div>
<img id="showBottomPanel" src="images/showBottomPanel.png" alt="">

          Впишите текст на тему вашей подписки.

          Текст окон ввода имени и адреса можно поменять на свой.

          Можно переименовать кнопку, если считаете нужным.

Если, по какой-либо причине, Вам не нравится логотип, можно сменить изображение, либо вообще скрыть его, закомментировав строку:

<!--img src="/images/logo.png" id="bottomPanelLogo" alt=""-->.

Примечание: если Вы решили убрать логотип вовсе, то, для расширения поля для текста объявления лучше сделать небольшие изменения в css, а именно в файле bottom-panel.css. Помните, он находится в папке css в корне сайта.

• Найдите в файле bottom-panel.css строку с идентификатором #bottomPanelConteiner form и сделайте коррективы, а именно: в строке, выделенной маркером сделайте отступ слева меньше, например: left:150px; и у вас, соответственно, останется больше места для текста и формы ввода данных:
  #bottomPanelConteiner form
  {
  position: absolute;
  left: 200px;
  top: 12px;
  font-size: 12px;
  padding: 0;
  }
  
• А свойства логотипа #bottomPanelLogo в файле bottom-panel.css можно оставить в прежнем виде, можно вовсе удалить, а лучше закомментировать, поместив между такими символами (/* */), на тот случай, если Вы решите вернуться к логотипу:
  /*
  #bottomPanelLogo
  {
  position: absolute;
  top: -30px;
  left: 20px;
  }
  */
  

В результате выполнения всех операций, до первой перезагрузки страницы или принудительного закрытия, внизу будет красоваться ваша панель подписки.

Пока что она является совершенно бесполезным элементом, но до тех пор, пока мы не привяжем её к сервису рассылок и настроим подписку, но это тема следующего урока.

На этом всё о создании панели подписки. Успехов в реализации смелых планов! Ваш L.M.