TechBlogSD - Alles für WordPress und WEB-Entwicklung
WEB- und WordPress-Anleitungen, Neuigkeiten, Rezensionen zu Themes und Plugins

Kostenloses Countdown-Timer-Widget für Weebly Site

61

Mit dem Countdown-Timer-Widget können Sie einen praktischen Timer für Produkteinführungen, Veranstaltungsstarts usw. präsentieren. Der Widget-Code kann in das Element „ Code einbetten” eingebettet werden, sodass er zusammen mit anderen Inhalten überall auf der Seite hinzugefügt werden kann Wenn Sie es auf einer separaten Seite für die im Bau befindliche Site ohne Navigationsmenüs und Fußzeile hinzufügen möchten, erstellen Sie ein neues Seitenlayout und fügen Sie den Widget-Code hinzu.In diesem Artikel konzentrieren wir uns auf das Hinzufügen des kostenlosen Countdown-Timer-Widgets für die Weebly- Site innerhalb eines Seiteninhalts.

Das Countdown-Timer-Widget sieht wie folgt aus und Sie können die Farben nach Bedarf an das Layout Ihrer Website anpassen.

Kostenloses Countdown-Timer-Widget für Weebly Site

Laden Sie die Skriptdateien zum Erstellen dieses Widgets herunter.

Schritt 1 – Laden Sie die Skripte herunter und fügen Sie sie hinzu

Das Widget basiert auf den Skripten init.js/countdown.js und wurde mit zusätzlichem CSS an eine Weebly-Site angepasst. Laden Sie die Skriptdateien herunter und laden Sie sie unter „Theme > HTML/CSS bearbeiten > Assets” auf Ihrer Weebly-Site hoch. Verknüpfen Sie dann die Skriptdateien im Abschnitt „ Fußzeilencode ” Ihrer Seite wie folgt:

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

Sie können auch die absoluten Dateipfade verwenden, indem Sie den oben genannten URLs Ihren Weebly-Site-Namen voranstellen.

Schritt 2 – CSS hinzufügen

Fügen Sie das folgende CSS im Abschnitt "Header-Code" Ihrer Weebly-Seite hinzu:

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

Schritt 3 – HTML für den Countdown-Timer

Fügen Sie den folgenden HTML-Code in ein "Embed Code"-Element ein und richten Sie die Position zentriert aus. Vergessen Sie nicht, die Überschrift und die Beschreibung durch Ihre eigenen zu ersetzen.

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

Schritt 4 – Zieldatum festlegen

Das Zieldatum für den Timer ist in der Skriptdatei „init.js” zu Demozwecken als „31. Dezember 2016″ festgelegt. Sie können das Datum nach Bedarf ändern, die Änderungen speichern und die Site veröffentlichen, um den Countdown-Timer in Aktion zu sehen.

Kostenloses Countdown-Timer-Widget für Weebly Site

Zieldatum für Countdown-Timer

Parallax-Countdown-Timer-Widget in voller Breite

Wenn Sie das obige Widget mit dem Einbettungscodeelement hinzufügen, sieht es einfach aus. Sie können einen schönen Parallax- Countdown-Timer mit dem folgenden Abschnittselement erstellen :

Kostenloses Countdown-Timer-Widget für Weebly Site

Countdown-Timer-Widget mit Parallax-Bildhintergrund

Befolgen Sie die nachstehenden Anweisungen, um ein Tortendiagramm mit Parallax-Bildhintergrund zu erstellen.

  • Ziehen Sie ein Abschnittselement per Drag & Drop. Klicken Sie auf das Abschnittselement im Inhaltsbereich und dann auf die Option „Hintergrund bearbeiten”.
  • Wählen Sie ein Bild als Hintergrund und stellen Sie den Bildlaufeffekt als Parallaxe ein. Sie können auch einen farbigen Hintergrund festlegen und der Videohintergrund ist nur für Pro-Benutzer verfügbar.
  • Ziehen Sie nun ein Einbettungscodeelement per Drag & Drop und fügen Sie den HTML-Code wie im obigen Abschnitt beschrieben hinzu.
  • Veröffentlichen Sie Ihre Site und sehen Sie sich das animierte Tortendiagramm mit Parallax-Bildhintergrund an.

Aufnahmequelle: www.webnots.com
Hinterlasse eine Antwort

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen