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

Безкоштовний віджет таймера зворотного відліку для сайту Weebly

0

Віджет таймера зворотного відліку дозволяє продемонструвати зручний таймер з метою запуску продукту, запуску події тощо. Код віджету можна вбудувати в елемент " Код вбудовування ", отже, його можна додати будь -де на сторінці разом з іншим вмістом. Якщо ви хочу додати його на окрему сторінку для будівельного сайту без навігаційних меню та нижнього колонтитула, а потім створити новий макет сторінки та додати код віджета.У цій статті ми зосередимось на додаванні безкоштовного віджета таймера зворотного відліку для сайту 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

Цільова дата для таймера зворотного відліку

Віджет таймера зворотного відліку по всій ширині

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

Безкоштовний віджет таймера зворотного відліку для сайту Weebly

Віджет таймера зворотного відліку з фоном зображення Parallax

Дотримуйтесь наведених нижче вказівок, щоб створити кругову діаграму з фоном паралаксного зображення.

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

Джерело запису: webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі