Бесплатный виджет таймера обратного отсчета для сайта Weebly

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

Виджет таймера обратного отсчета для сайта Weebly

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

Шаг 1 — Загрузите и добавьте сценарии

Виджет основан на скриптах init.js / countdown.js и модифицирован для соответствия сайту Weebly с дополнительным CSS. Загрузите файлы сценариев и загрузите их в раздел «Тема> Редактировать HTML / CSS> Активы» вашего сайта Weebly. Затем свяжите файлы сценария в разделе «Код нижнего колонтитула» своей страницы, как показано ниже:

<script src="https://www.webnots.com/files/theme/countdown.js" type="text/javascript"></script>
<script src="/files/theme/init.js" type="text/javascript"></script>

Вы также можете использовать абсолютные пути к файлам, добавив к названию вашего сайта Weebly префикс к указанным выше URL.

Шаг 2 — Добавление CSS

Добавьте приведенный ниже CSS в раздел «Код заголовка» своей страницы Weebly:

<style>
.countdowntimer {
background: rgb(92, 57, 57) none repeat scroll 0% 0%;
padding:20px 0;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 25px;
}

.title #desc {
margin: 25px 0 25px 0;
text-align:center;
color: lightyellow;
font-size: 18px;
}

.title #head {
font-size: 30px;
color: #ffffff;
}

ul#countdown {
text-align:center;
}

ul#countdown li {
color:#fff;
display: inline-block;
margin-right:18px;
width: 100px;
height: 90px;
text-align: center;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #333333;
-webkit-box-shadow: 1px 1px 4px rgba(50, 50, 50, 0.3);
-moz-box-shadow: 1px 1px 4px rgba(50, 50, 50, 0.3);
box-shadow: 1px 1px 4px rgba(50, 50, 50, 0.3);
}

ul#countdown li span {
font-size: 42px;
font-weight: bold;
color: #fff;
position: relative;
text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);
top: 10px;
}

ul#countdown li p.timeRefDays,
ul#countdown li p.timeRefHours,
ul#countdown li p.timeRefMinutes,
ul#countdown li p.timeRefSeconds {
text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);
margin-top: 15px;
}

</style>

Шаг 3 — HTML для таймера обратного отсчета

Добавьте приведенный ниже HTML-код в элемент «Код для вставки» и выровняйте его по центру. Не забудьте заменить заголовок и описание на свои.

<div class="countdowntimer">
<div class="title">
<h3 id="head">This is a countdown timer widget</h3>
<h5 id="desc">Remaining time for official product or website launch</h5>
</div>
<ul id="countdown">
<li>
<p class="timeRefDays">days</p>
<span class="days"></span>
</li>
<li>
<p class="timeRefHours">hours</p>
<span class="hours"></span>
</li>
<li>
<p class="timeRefMinutes">minutes</p>
<span class="minutes"></span>
</li>
<li>
<p class="timeRefSeconds">seconds</p>
<span class="seconds"></span>
</li>
</ul>
</div>

Шаг 4 — Установка целевой даты

Целевая дата для таймера устанавливается в файле сценария «init.js» как «31 декабря 2016» для демонстрационных целей. Вы можете изменить дату в соответствии с вашими потребностями, сохранить изменения и опубликовать сайт, чтобы увидеть таймер обратного отсчета в действии.

Целевая дата для таймера обратного отсчета

Полноразмерный виджет таймера обратного отсчета параллакса

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

Виджет таймера обратного отсчета с фоном изображения параллакса

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

• Перетащите элемент раздела. Щелкните элемент раздела в области содержимого, а затем выберите параметр «Изменить фон».
• Выберите изображение в качестве фона и установите эффект прокрутки как параллакс. Вы также можете установить цветной фон, и видео фон доступен только для профессиональных пользователей.
• Теперь перетащите элемент кода внедрения и добавьте код HTML, как указано в предыдущем разделе.
• Опубликуйте свой сайт и посмотрите анимированную круговую диаграмму с фоном изображения параллакса.