3 готовые решения — как вставить таймер обратного отсчёта на сайт 35


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

А ещё этот метод понадобится вам, если вы будете копировать продающею страницу партнёрского продукта. Это не просто копия партнёрского сайта во фрейме, — это полноценная копия, где Вы можете настроить цели Яндекс.Метрики и отслеживать подробную статистику.

Но, вот только если на партнёрских страницах стоят подобные счётчики, то они работать не будут. Потому, как помимо копирования html кода, css стилей и картинок, — нужно ещё и скрипты скопировать, а это не всегда удаётся сделать.

И поэтому этот метод позволит вам использовать таймер обратного отсчёта для любых целей.

Итак, на выбор я представлю вам три готовых решения, которые вы можете адаптировать под свои нужды.

Таймер обратного отсчёта на основе JavaScript

Этот метод хоть и требует определённого знания хотя бы HTMLи CSS, зато имеет максимум возможностей для настройки. Изменяя код htmlи настраивая стили css, можно легко подогнать данный счётчик под любой дизайн.

Шаг 1.

Скопируйте архив с моего Яндекс.Диска и распакуйте архив на своём компьютере. Скачать архив.

В архиве у вас будет 4 файла:

Список файлов

Список файлов

counter.html – собственно html каркас счётчика

jquery.downCount.js – скрипт обратного отсчёта

style.css – стили оформления

time.png – изображения для счётчика

Все необходимые изменения вы будете делать именно в этих файлах.

Шаг 2.

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

Установка даты осуществляется в файле counter.html. Необходимо просто изменить дату и время. Все необходимые подсказки в файле присутствуют.

Установка даты

Установка даты

Шаг 3.

Теперь необходимо скопировать всю папку с этими файлами на ваш сервер. Делайте это любым удобным для вас способом. Если у вас блог под управлением WordPress, загрузите папку в папку Вашей темы:

http://vashdomen.ru/wp-content/themes/vashatema/counter

Шаг 4.

В том месте, где необходимо отобразить таймер обратного отсчёта, нужно вставить вот такой код:

<center><iframe src="http://vashdomen.ru/wp-content/themes/vashatema/counter/counter.html" width="550" height="150" frameborder="0"></iframe></center>

Только учтите, делается вставка в редакторе кода. То есть вставляете код в html код той страницы, где нужно вывести таймер.

Вставка кода

Вставка кода

Так будет выглядеть таймер:

Таймер номер один

Таймер номер один

А вот и видеоурок «Как вставить таймер обратного отсчёта на сайт»

Онлайн генератор таймера обратного отсчёта

На мой взгляд, самый простой но, тем не менее, очень удобный сервис по созданию таймеров обратного отсчёта является TimeGenerator.

На выбор предлагается 4 варианта оформления счётчика. Нужно выбрать который подходит вам, и нажать на кнопку «Выбрать».

Выбор таймера

Выбор таймера

Далее нужно задать дату и время запланированного мероприятия и нажать на кнопку «Создать счётчик».

Установка времени и даты

Установка времени и даты

Копируете полученный код в буфер обмена (CTRL+C).

Копируем код

Копируем код

И завершающий этап, вставляете это код (CTRL+V) в нужном месте вашего шаблона. Опять же, делается это через редактор кода.

Вставка кода

Вставка кода

Пример таймера:

Таймер номер два

Таймер номер два

Таймер обратного отсчёта с сервисом proТаймер

Это платный сервис, который ориентирован на интернет-предпринимателей, которые чётко знают для чего им таймер обратного отсчёта. Сервис proТаймер предоставляет многофункциональные таймеры с помесячной и годичной оплатой.

Эти таймеры настраиваются и под сервисы e-mail рассылок и под индивидуального пользователя. Привязаны к IP, а не к браузеру и поэтому счётчик у пользователя не начинается заново, даже если он зайдёт с другого браузера.

На пробу (2 часа), Вы можете попробовать полный функционал этого сервиса.

proТаймер

proТаймер

Процедура не хитрая, регистрируетесь – получаете доступ и пользуетесь.

Ну что ж, друзья, вот такие вот таймеры обратного отсчёта вы можете использовать для своих целей. А то какой выбрать таймер для конкретной цели решать именно вам.

На этом сегодня у меня всё, желаю вам удачи. И конечно жду ваших комментариев. До встречи в следующих статьях.

С уважением, Максим Зайцев.



Если статья оказалась для Вас полезной, поделитесь с друзьями, жмите на кнопочки:


Подписывайтесь на новые статьи!


Оставьте комментарий

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

35 коммент. к статье “3 готовые решения — как вставить таймер обратного отсчёта на сайт

  • Павел Пашкан

    С виду простой таймер, а на самом деле это ядерное оружие в умелых руках.
    Если стоимость товара меньше 1000 рублей, и на таймере осталось меньше часа, то конверсия увеличиваеться в разы!
    Отлично Макс, помог многим с этой статьей.

    • Максим Зайцев От автора

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

  • Светлана Колосова

    Спасибо, Максим. Обязательно возьму на заметку. Очень полезная информация.Удачи Вам.

  • Олия

    Спасибо Максим. Если понадобится таймер обратного счёта, обязательно воспользуюсь твоей рекомендацией.
    Хотя сегодня, эти таймеры не так популярны при продажах. Дело в том, что люди уже к ним привыкли и не реагируют. Лучше писать осталось столько-то))) допустим, 5 путёвок по низкой цене =)

    • Максим Зайцев От автора

      Привет, Оль. Многое конечно зависит от продукта и от спроса на него. Фишка с количеством тоже работает. А прикрутив таймер, подстёгиваешь покупателя на принятия решения.

  • Кирилл

    Вот еще классный онлайн генератор таймера обратного отсчета для сайта — http://e-timer.ru/

    • Максим Зайцев От автора

      Кирилл, спасибо за дополнение. Отличный таймер, и дизайн легко подправить.

  • Алексей

    если перенести скрипт запуска таймера «в шапку» сайте , таймер залипает на 0лях

    $(‘.countdown’).load( alert(«ready») ,
    $(‘.countdown’).downCount({
    date: ’09/20/2016 09:00:00′,
    offset: +2
    }, function () {
    $(‘#timer’).css(‘display’, ‘none’);
    }));

    • Максим Зайцев От автора

      Здравствуйте, Алексий. Если вы хотите вставить таймер в шапку, то необходимо подключить js файл в теги head.

  • Алексей

    Таймгенератор слабоват, а вот http://megatimer.ru/ — вообще мощнецкий счетчик. Еще и бесплатный.
    Там есть плюшка интересная. Чтобы не собирать по несколько раз счетчик — можно его код обратно вставить (импортировать) и все настройки встанут как надо.
    Пробовал еще e-timer и makedreamprofits — первый слабоват, второй мощный, но платный

    • Максим Зайцев От автора

      Алексей, спасибо за рекомендацию, действительно, полезного сервиса. Но, всё же стоит отметить, что для получения кода таймера нужно будет сделать репост в социальной сети. Хотя, не думаю, что это может быть для кого-то проблемой в настоящее время.
      e-timer тоже пробовал, но не понравился.
      По поводу makedreamprofits ничего сказать не могу, не пробовал.

  • Максим Рябухин

    Отличный простенький таймер(по поводу первого варианта), а со стилями уже каждый сам может поиграться 😉

    • Максим Зайцев От автора

      Максим, вы правы, будет рабочий код, а куда и с какими стилями прикрутить — это уже каждый индивидуально решает.

  • Константин

    Добрый день!
    Сделал все как написано, вместо счетчика в окне появляется мой сайт с полосами прокрутки)) А счетчика нету вообще!
    В чем может быть проблема ?

    • Максим Зайцев От автора

      Здравствуйте, Константин. Такое бывает, когда время указанное в файле counter.html вышло. Вам нужно скопировать папку на хостинг и отрыть этот файл. В нём нужно указать дату планируемого мероприятия. Должно всё заработать. Так же, если счётчик появится, но будут отображаться нули, то в этом же файле нужно изменить название скрипта обработчика jquery.downcount.js Нужно указать имя именно маленькими буквами. Но, такие действия требуются лишь в некоторых темах. Уверен у вас всё получится. Удачи вам!

      • Константин

        Все ровно ничего не отображает.
        Вроде бы не полный ноль в этом деле.

        $(‘.countdown’).downCount({
        date: ’04/09/2015 18:00:00′,
        offset: +2

        • Максим Зайцев От автора

          Константин, вы пробовали запустить counter.html не загружая на хостинг. Попробуйте. Если работает всё отлично, а оно так и должно быть. Значит проблему нужно искать на сайте. Возможно конфликт между скриптами.

  • Валерий

    После истечения времени, счетчик скинется и пойдет по новой или же заново менять скрипт?

    • Максим Зайцев От автора

      Валерий, а это как настроите. Таймер может отсчитать время и остановиться, или может заново отсчитывать время.

    • Максим Зайцев От автора

      Вас интересует таймер на скидку. В таком случае Timegenerator не лучшее решение. Его придётся вручную переделывать по завершению.
      Лучшим решением для этого является proТаймер. У него есть все и отслеживание по куки-файлам, и цикличность, и настройка по часовым поясам и многого другое. Для акций, скидок и предложений — это лучшее решение.

  • Балтун

    Хочу вставить таймер не через iframe, а просто содержимое html перенести в мой index.html все получилось и работает. Только пару вопросов возникло:

    — Как задать отступ слов Days, mins…
    1. Друг от друга
    2. От самого таймера

    — Что за строки в снизу style.css там написано «Отступы»
    После того как удалил все эти строки ничего не изменилось, менял значения и тоже 0 реакции.

    • Максим Зайцев От автора

      Здравствуйте, Балтун.
      В стилях css есть понятие «наследование». Так вот, когда вы вставили код напрямую в индексную страницу, то чать стилей наследуется от основных стилей сайта. Чтобы сделать отступы, оберните код с элементами Days, mins… в блок ДИВ и присвойте этому блоку идентификатор. А затем назначьте стили (margin, padding) для этого идентификатора в таблице стилей. Так всё получится. Желаю удачи!

      • Балтун

        Извиняюсь, просто заново все сделал, и этот блок с отступами заработал, видимо в первый раз я что-то напартачил.

    • Максим Зайцев От автора

      Здравствуйте, Алекс. Спасибо за ссылку, на момент написания статьи этого таймера не нашёл. Таймер пока ещё сыроват, но уверен, может получится хороший инструмент.

  • Надежда

    3 дня др… с таймером. А тут нашла раз 48 руб в месяц тот, который я хочу. И без проблем!
    Благодарю

    • Максим Зайцев От автора

      Здравствуйте, Надежда. Я сам использую PRO таймер уже давно и очень доволен. Рад, что и вы нашли для себя готовое решение. Удачи вам!

    • Максим Зайцев От автора

      Пожалуйста, Гелия. Если будут вопросы, обращайтесь. Желаю удачи!