Класний таймер для сайту без плагіна

Вітаю вас на моєму сайті!

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

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

На сьогоднішній день існує дуже багато таких сервісів, які дозволяють у себе на сайті створювати таймери і потім отримати спеціальний код, скопіювати його собі на сайт, і у вас на сайті з'явитися гарний таймер. Протестувавши кілька з них, я вибрала три найбільш прості, найбільш функціональні і зручні.

Навігація по статті:

Онлайн-сервіс Time Generator

Ви натискаєте на кнопку «Вибрати» під ним. А далі, вам потрібно буде задати до якого терміну буде діяти ваше спеціальна пропозиція.

Після цього натискаємо на кнопку «Створити лічильник». У мене генерується такий фрагмент коду, який нам потрібно скопіювати і вставити собі на сайт.

Куди вставляти код?

• Eсли у вас сайт зроблений без движка, то ви просто берете цей фрагмент коду та вставляєте туди, де потрібно, що б здійснювався висновок таймера.
• Якщо ж ваш сайт працює на якийсь CMS (Joomla, WordPress і т. Д.), То ви можете вставляти цей код як в шаблон, так і в який-небудь віджет, запис або сторінку.

Для вставки таймера на сторінку потрібно зробити наступне:

Після цього обраний таймер з'явиться у вас на сайті.

Як бачите, процес додавання зайняв буквально одну хвилину, т. Е. Ми зайшли на сайт, вибрали те що нам потрібно, задали дату, скопіювали код, і додали на сторінку на нашому сайті.

Недолік даного сервісу полягає в тому, що ми не можемо регулювати розмір таймера, і налаштовувати його колірну схему.

Онлайн-сервіс E-Timer

На відміну від попереднього, сервіс E-Timer дозволяє нам здійснювати настройку зовнішнього вигляду таймера.

Коли ми переходимо на сайт, то потрапляємо на таку сторінку:

Де є три блоки, у вигляді спойлерів.

Найперший блок - це «Основні настройки».

1. 1. 1.Для початку, ми повинні вказати - чи підключена у нас бібліотека jQuery.

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

Якщо ви використовуєте сайт на якому вже застосовані якісь анімації, ви знаєте що там уже бібліотека jQuery підключена, то ви вибираєте пункт «Підключено на Вашому сайті».

Eсли ви додаєте даний таймер на сайт працює на WordPress, то там за замовчуванням вже підключена ця бібліотека, тому теж вибирайте цей пункт «Підключено на Вашому сайті».

Якщо ви створюєте сайт самостійно, і ніякі бібліотеки у вас не підключені, відповідно, вам потрібно вибрати пункт «Не підключена на Вашому сайті».

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

3. Задаємо дату до якої буде діяти ваше спецпропозиція. Крім дати можна задати години та хвилини.

4. При бажанні можна змінити текст заголовка «До закінчення акції залишилося:», Також ми можемо змінювати розмір шрифту цього напису, натиснувши на кнопочки + і -.

Наступний блок налаштувань, це «Налаштування відображення таймера».

1. 1. Тут ми можемо вибрати мову, на якому будуть відображатися підписи днів, годин, хвилин і секунд. Можна вибрати українська, англійська та українська.
2. 2. Задаємо роздільник, який буде стояти між блоками. За замовчуванням тут стоїть двокрапка, можна вибрати ще вертикальний слеш, дві вертикальні лінії і тире.
3. 3. Далі, можна вибрати тип шрифту і колір. За замовчуванням він сірого кольору. Можна вибрати колір за допомогою палітри:

При цьому тут ще задається прозорість кольору. Після того як вибрали колір, натискаємо на кнопку «Застосувати».

4. Внутрішній відступ. У першому полі ми задаємо вертикальний внутрішній відступ, а в другому - горизонтальний.

5. 1.Настраіваем кордону. За замовчуванням кордону немає. У першому полі задаємо товщину в пікселях. По-другому - радіус заокруглення кутів. Якщо його збільшити, кути на таймері будуть округляти. Так само, можна вибрати колір кордону за допомогою спеціальної палітри.

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

І останній блок - це «Налаштування відображення цифр».

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

Після того як ми налаштували зовнішній вигляд нашого таймера, ми беремо і копіюємо код, який розміщений в правій частині:

Можна цей код просто виділити і скопіювати, або натиснути на кнопку «Копіювати код в буфер».

Після того, як код скопійований, вставляємо його в те місце, де нам потрібно щоб з'явився таймер.

Онлайн-сервіс Mega Timer

На найпершій вкладці - «Тип таймера». ми вибираємо, як у нас буде відбуватися відлік часу:

1. 1. 1. Ми можемо здійснювати відлік «До певної дати». в цьому випадку на потрібно буде задати дату закінчення відліку. При цьому, ми також, можемо вибрати опцію «За локального часу користувача». т. е. таймер буде підлаштовуватися під ту годинну зону, в якій знаходиться ваш користувач. Якщо цю галочку зняти, то можна вибрати якийсь певний часовий пояс, за яким буде здійснюватися відлік часу.
2. 2. Так само ми можемо ставити це таймер «На проміжок часу». Початок відліку може здійснюватися або з поточного моменту, або з першого відвідування сайту вашим клієнтом.
3. 3. 1.І останній тип - це «Циклічний». Тут ви можете задати певний проміжок часу, через який таймер обнулятиметься, і відлік почнеться заново. Здається в годиннику. Так само може вестися відлік по локальному часу користувача, або бути прив'язаним до якоїсь певної годинний зане.

Далі натискаємо або на кнопку «Наступний крок» внизу, або просто переходимо на вкладку «Дизайн» в верхній частині екрану.

Далі ми можемо вибрати один із запропонованих дизайнів.

Тут я можу змінювати товщину ліній, радіус кола, тип ліній і так далі.

Також можна задавати шрифт, вибирати його розмір, колір, відступ між колами, наявність або відсутність роздільник, тип роздільника, відключити або включити підпису, задавати їх розмір і колір шрифту.

При цьому для різних дизайнів таймерів тут містяться різні настройки.

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

Після того, як ви задали всі настройки, потрібно натиснути на кнопку «Наступний крок».

І тепер, все що вам залишилося - це скопіювати згенерований шматочок коду і вставити його на сторінку вашого сайту, в тому місці, де вам потрібно щоб з'явився лічильник.

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

В одній з наступних статей я розповім як створювати онлайн-калькулятори на WordPress. Їли не хочете пропустити - підписуйтесь на розсилку.