Обратный отсчет времени для сайта

часы обратного отсчета для сайта на wordpressНовый год натолкнул на идею поставить часы обратного отсчета времени до какого-либо праздника или события, чтобы с трепетом ожидать его. Реализовать подобное можно при помощи плагина WordPress, используя скрипт (самописный, либо сторонний) или вручную ежедневно менять картинку)). Сегодня расскажу про сервис, который позволяет настроить данные часы под любой праздник, а так же под дизайн Вашего сайта.


Внимание
На данный момент актуален данный сервис счетчиков обратного отсчета http://www.timegenerator.ru/. Рассматриваемый далее в статье закрылся.

Сайт расположен по адресу http://www.timegenerator.ru/. Поддерживаемые кодировки сайта: windows-1251.

Далее буду описывать шаги настройки виджета на дату 03.01.2012. С течением времени дизайн сайта top-clock.ru может претерпеть изменения.

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

  • цифровые часы, отображающее время в выбранных Вами городах;
  • циферблат механических часов с отображением времни;
  • часы обратного отсчета времени (о чем и пойдет речь в данной статье).

Нужные нам часы обратного отсчета в !стандартном! варианте выглядят так:

обратный отсчет на сайт

Выбираем подходящий вид отсчета времени и кликаем по ссылке под соответствующей картинкой: Отсчет № 1 | Отсчет № 2 | отсчет №3

В качестве наглядного примера я выбрал Отсчет № 1. Попробуем сделать из него виджет отсчета времени до Дня святого Валентина на Вашем сайте.

Перейдя на страницу http://top-clock.ru/countdown1.php, где настраивается Отсчет № 1, мы проводим следующие настройки (смотрим скриншот):

виджет день святого валентина

На скриншоте зеленым цветом проставлены цифры напротив некоторых настроек, которые я поясню ниже. То, что получилось с моих настроек, видно справа сверху на картинке.

1. В поле Дата мы ставим дату (вручную, либо используя встроенный календарь, который появится, как Вы поставите курсор в данное поле), до которой должен начаться обратный отсчет. В данном случае 14 февраля 2012 года.

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

3. Здесь мы вводим текст, который будет отображаться на счетчике. В моем случае это текст до Дня святого Валентина осталось. Результат видим на картинке сверху справа.

4. Здесь мы выводим текст, который будет отображен в указанную дату.

Пропущу настройки цвета текста, фона, чисел и рамки и сразу к пункту

5. Использовать градиент для затенения. Поставив галочку в соответствующем поле, Вы получите эффект затемнения виджета сверху вниз. Красиво смотрится, если выбрать фон подходящий.

6. Единицы измерения. Нам предлагают выбрать в каких единицах измерения будет вестись отсчет: дни, часы, минуты или секунды. Небольшой совет: если до события несколько месяцев, то можно поставить дни. Как только время Ч будет приближаться, то можно менять на часы/минуты/секунды.

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

Обычно, подобные виджеты помещают в сайтбар (боковую колонку сайта). Если Вы не разбираетесь, как поместить этот код в нужно место, то можете воспользоваться плагином WP PHP widget, который позволит все сделать с легкостью и за пару минут.

Обращаю Ваше внимание
если Вам потребуется сменить что-либо в виджете обратного отсчета, то не обязательно каждый раз заходить на сайт top-clock.ru. Если Вы внимательно посмотрите предложенный код после настройки виджета, то увидите все данные, которые Вы меняли. В будущем достаточно их изменить. Так же в коде есть величины width (ширина) и height (высота). Их так же можно подкорректировать, чтобы все смотрелось гармонично на Вашем сайте.

За финансовую поддержку сайта спасибо партнерской программе Ротапост. Благодаря постовым окупается моя жизнь и сайт продолжает развиваться.

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

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

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

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

Опубликовано 4 комментария
  1. Аркадий (2 комм.) says:
    http://newkinos.ru/

    Очень актуальная вещица. Для сайта с фильмами идеально подошло. Спасибо за статью

  2. Петр (1 комм.) says:
    http://wpnew.ru

    Жалко то, что я не смог вывести этот симпатичный таймер из-за того, что другой кодировки. Никак не смог поставить UTF-8, чтобы нормально отображался текст в таймере.

    • mojvit (1675 комм.) says:

      плагин WP Count Down поддерживает UTF-8. Но, по умолчанию, он заточен под английский и есть в нем несколько багов. Сейчас аккурат допиливаю его. Подписываемся на RSS, чтобы узнать, когда будет релиз)))

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

    При удалении ссылки на сайт авторов удаляется и сам счетчик

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

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

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