Как сделать отсчёт времени на сайте

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

Сайт расположен по адресу 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, который позволит все сделать с легкостью и за пару минут.

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

Привет. Меня зовут Виталик.

Я автор этого блога, а так же Магазина WordPress https://wp-r.ru/ и ридера блогов вебмастеров и SEO-специалистов WMSN.ru


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

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


Источник: http://mojwp.ru/countdown-ver1.html


Рекомендуем посмотреть ещё:


Закрыть ... [X]

Как сделать таймер обратного отсчета на сайте Алиэкспресс маска чумного доктора

Как сделать отсчёт времени на сайте Таймер обратного отсчета времени на javascript
Как сделать отсчёт времени на сайте Таймер обратного отсчета для сайта
Как сделать отсчёт времени на сайте Обратный отсчет времени для сайта
Как сделать отсчёт времени на сайте Quot; - магазин одежды для беременных
Как сделать отсчёт времени на сайте Аллергия у ребенка и детей до года
Как сделать отсчёт времени на сайте Арганы масло (аргановое) для лица купить в магазине Лето
Как сделать отсчёт времени на сайте Высыпало ребенка 1 месяц. Ребенку 1 месяц
Как сделать отсчёт времени на сайте Главная - Администрация г.Кирсанов
Как сделать отсчёт времени на сайте Картинка: Какие лохматые киски у девушек!
Коренные зубы у детей: смена молочных зубов на постоянные Левомеколь - воздействует там где нужно Методика преподавания - история и современность Наборы для создания причесок Огонёк 37 сентябрь 2017 читать журнал онлайн pdf Отзывы о Правильный уход за Путин обратил внимание на траты фонда Талант и успех УНЦ Химия : Главная

Похожие новости