TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Darmowy widżet odliczający czas dla witryny Weebly

1

Widżet licznika czasu pozwala na zaprezentowanie przydatnego licznika w celu uruchomienia produktu, uruchomienia wydarzenia itp. Kod widżetu można osadzić w elemencie „ Osadź kod ", dzięki czemu można go dodać w dowolnym miejscu na stronie wraz z innymi treściami. chcesz dodać go na osobnej stronie dla witryny w budowie bez menu nawigacyjnego i stopki, a następnie utwórz nowy układ strony i dodaj kod widżetu.W tym artykule skupimy się na dodaniu bezpłatnego widżetu licznika czasu dla witryny Weebly w treści strony.

Widżet licznika czasu będzie wyglądał jak poniżej i możesz modyfikować kolory, aby dopasować je do układu witryny.

Darmowy widżet odliczający czas dla witryny Weebly

Pobierz pliki skryptów do tworzenia tego widżetu.

Krok 1 – Pobierz i dodaj skrypty

Widget bazuje na skryptach init.js/countdown.js i jest modyfikowany tak, aby pasował do witryny Weebly z dodatkowym kodem CSS. Pobierz pliki skryptów i prześlij je w sekcji „Motyw > Edytuj HTML / CSS > Zasoby” w witrynie Weebly. Następnie połącz pliki skryptów w sekcji „ Kod stopki ” na swojej stronie, jak poniżej:

<script src="/files/theme/countdown.js" type="text/javascript"></script> <script src="/files/theme/init.js" type="text/javascript"></script>

Możesz również użyć bezwzględnych ścieżek do plików, dodając do powyższych adresów URL nazwę swojej witryny Weebly.

Krok 2 – Dodanie CSS

Dodaj poniższy kod CSS w sekcji „Kod nagłówka” na swojej stronie 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>

Krok 3 – HTML dla minutnika

Dodaj poniższy kod HTML do elementu „Kod osadzania” i wyrównaj pozycję do środka. Nie zapomnij zastąpić nagłówka i opisu własnymi.

<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>

Krok 4 – Ustawienie docelowej daty

Data docelowa timera jest ustawiona w pliku skryptu „init.js” jako „31 grudnia 2016″ dla celów demonstracyjnych. Możesz zmodyfikować datę zgodnie ze swoimi potrzebami, zapisać zmiany i opublikować witrynę, aby zobaczyć odliczanie w akcji.

Darmowy widżet odliczający czas dla witryny Weebly

Data docelowa dla minutnika

Widżet odliczania czasu paralaksy na całej szerokości

Dodanie powyższego widżetu za pomocą elementu embed code sprawi, że będzie wyglądał prosto. Możesz stworzyć piękny licznik czasu paralaksy, używając elementu sekcji, jak poniżej:

Darmowy widżet odliczający czas dla witryny Weebly

Widżet odliczania czasu z tłem obrazu paralaksy

Postępuj zgodnie z poniższymi instrukcjami, aby utworzyć wykres kołowy z tłem obrazu paralaksy.

  • Przeciągnij i upuść element przekroju. Kliknij element sekcji w obszarze zawartości, a następnie kliknij opcję „Edytuj tło”.
  • Wybierz obraz jako tło i ustaw efekt przewijania jako paralaksę. Możesz także ustawić kolor tła, a tło wideo jest dostępne tylko dla użytkowników profesjonalnych.
  • Teraz przeciągnij i upuść element kodu osadzania i dodaj kod HTML, jak podano w powyższej sekcji.
  • Opublikuj swoją witrynę i zobacz animowany wykres kołowy z tłem obrazu paralaksy.

Źródło nagrywania: webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów