TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

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

214

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

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

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

Загрузите файлы сценария для создания этого виджета.

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

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

<script src="/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 года» для демонстрационных целей. Вы можете изменить дату в соответствии с вашими потребностями, сохранить изменения и опубликовать сайт, чтобы увидеть таймер обратного отсчета в действии.

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

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

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

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

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

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

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

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

Источник записи: www.webnots.com
Leave A Reply

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее