Пошаговое руководство для новичков по созданию,
раскрутке и монетизации собственного сайта.
WebPageMaker, Wordpress, Joomla - инструкции для
новичков по установке CMS и шаблонов к ним.
                                               Добро пожаловать в проект "Сайт с нуля" !
Прежде всего данный проект предназначен для тех, кто пытается создать сайт самостоятельно, то есть для новичков. Соответственно, вся информация изложена доступно, все этапы построения сайта сопровождаются скриншотами, что позволит начинающим вебмастерам быстро и просто освоиться в этом нелегком вопросе.
Здесь вы можете скачать русские версии WebPageMaker, WordPress, Joomla, Adobe Muse, а также инструкции по установке WordPress и Joomla на хостинг и мануалы по установке тем (шаблонов) для этих CMS.

                               Всем желаю удачи и смелых воплощений идей на вашем сайте !
2010 - 2016 © Сайт с нуля: пошаговое руководство для новичков по созданию, раскрутке и монетизации собственного сайта. WebPageMaker, WordPress, Joomla -  русские версии.
Автор и администратор  данного проекта - SvetLana_TSV.  Копирование материалов сайта разрешено только при наличии активной ссылки на данный проект.
Проект для новичков
Хочешь быть на шаг впереди и первее
остальных получать новые материалы
сайта? Тогда не забудь оставить свои
координаты: имя и электронный адрес!
Полезные материалы:
Главная       Скачать       Уроки        Новости        Статьи        Контакты        Карта сайта
Таймер обратного отсчета для сайта

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

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

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

В-третьих, таймер используется для страниц-заглушек в случае тестирования или реконструкции сайта. На такой странице основными атрибутами являются таймер с указанием того, сколько дней осталось до открытия сайта, и форма подписки для тех, кто хочет получить сообщение о завершении работ на свой e-mail.

Кроме того, на блогах тоже можно встретить таймеры, но уже без обратного отсчета, демонстрирующие, например, сколько дней "живет" блог. Либо таймеры с указанием текущего времени, но это уже по сути те же часы.

Ниже я привела несколько наглядных примеров использования таймеров на сайте. 

Варианты использования счетчиков обратного отсчета:

1. Ограничение времени на акцию с бонусом (в данном случае - купон на скидку).




.





Сделать такой таймер для своего сайта очень просто!

В этом уроке я не стал использовать никаких дополнительных библиотек и Фреймворков типа “jquery” и решил написать весь код на чистом javascript, в одном html файле.

Что умеет данный таймер?

Давайте опишем условия работы нашей программки:

Можно установить количество дней, минут и секунд
Каждую секунду происходит уменьшение времени соответственно на 1 секунду
По истечению времени появится всплывающее окно с текстом о том, что таймер сработал


 




ПОДРОБНЕЕ

Не забудь заглянуть в свою почту и подтвердить подписку!



Как видите, таймер - просто необходимая вещь для сайта :)) Поэтому давайте от примеров перейдем к делу и установим на свой сайт простой счетчик обратного отсчета. Я нашла для новичков самый простой в плане установки таймер, из разряда "проще некуда"...

Итак, пошаговая установка таймера на сайт:

1. Распаковать архив с исходниками, там всего две папки и индексный файл.

2. Создать на хостинге в корне отдельную папку taimer и перетянуть в нее файлы из архива (кроме index.html) с помощью любого FTP-клиента.

3. Подключить файл стилей и скрипт, прописав на странице между тегами  <head> и</head> такие строки:

<link rel="stylesheet" href="taimer/css/flipTimer.css" />
  <style>
    body {
      background-color: #fff;
    }
    .flipTimer {
      margin: 100px auto 0;
      width: 700px;
    }
  </style>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  <script src="taimer/js/jquery.flipTimer.js"></script>
Изначально, цвет бэкграунда для таймера задан белый, но вы его можете заменить любым своим, прописав вместо #fff нужный код цвета. Также вы можете задать свою ширину для таймера, указав вместо width: 700px свое значение.

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

<script>
   $(document).ready(function() {
    $('.flipTimer').flipTimer({ direction: 'down', date: 'April 30, 2017 00:00:00', callback: function() { alert('Время истекло!'); } });
   });
</script>

4. Теперь в html-коде между тегами <body> и </body> прописываем строки, выводящие нужные секции таймера: по умолчанию это дни (days), часы (hours), минуты и секунды.  Если какой-то из параметров вам не нужен, удалите соответствующую ему строку из кода.

  <div class="flipTimer">
    <div class="days"></div>
    <div class="hours"></div>
    <div class="minutes"></div>
    <div class="seconds"></div>
  </div>

5. Загружаем страницу с таймером на хостинг и любуемся результатом.

Примечание: надписи под таймером: "дни", "часы" и т.д. я добавила самостоятельно в Пейдже (за что его и люблю :))) после установки таймера, поэтому в вашем результате их не будет. Но ничто не мешает вам их добавить!


Посмотреть демо                                                 Скачать исходники


Всем желаю удачных проектов! До новых встреч!
С ув. Светлана (SvetLana_TSV).

P.S. Подписчики в этом выпуске рассылки бесплатно получат супер-страницу с таймером, которую можно использовать как заглушку либо настроить под свои нужды, изменив цвет, логотип, заголовок и контакты. Таймер имеет внизу прогресс-бар, звуковые эффекты, ховер-эффекты для иконок, а по истечении времени "уходит по-английски", скрывшись под раскрывающейся панелью. Этот таймер продавался на Envato за 9 баксов, сейчас уже не продается.

Как видите, быть подписчиком "Сайт с нуля" выгодно - кроме новых материалов вы получаете бесплатно в каждом выпуске рассылки отличный бонус в виде платного контента. Не упускайте такую возможность!
















1. Ограничение времени на регистрацию в мероприятии (например, в VIP-клубе)
3. Информирование пользователей о начале работы сайта
4. Ограничение времени на бронирование мест (например, для йога-тура)
5. Ограничение времени на покупку курса по сниженной цене