Countdown-Uhren in Blog-Artikeln verwenden (Ich zeige Euch wie es geht)

Wer einen Blog führt kommt früher oder später zu einem Artikel, der ein Ablaufdatum besitzt. Ein Ablaufdatum? wird sich der ein oder andere Fragen.

Na klar. Zum Beispiel eine Blogparade hat ein Ablaufdatum oder auch ein Gewinnspiel. Dort gibt man an, bis zu welchem Datum man an diesem Artikel teilhaben kann.

Ich verwende zum Beispiel Blog-Parade und lege fest, bis wann Besucher und Teilnehmer daran teilhaben können.

Wäre es jetzt nicht schön, solche Ereignisse mit Countdown-Uhren zu versehen? Also zu zeigen, wie lange in Tagen, Stunden, Minuten und Sekunden das Ereignis in der Zukunft liegt? Wie das geht, zeige ich Euch hier in diesem Artikel.


Was ist eine Countdown-Uhr?

Ich glaube diese Frage brauche ich nicht wirklich lang und breit zu erklären. Es ist eine Uhr die Rückwärts läuft und meistens Tage, Stunden, Minuten und Sekunden anzeigt.

Solche Uhren kann man verwenden um auf ein besonderes Ereignis hinzuweisen und den Benutzern durch einen schnellen Blick zu zeigen, wie lange das Ereignis in der Zukunft liegt.

Ich verwende seit kurzem eine solche Uhr in meinem 10.000 Besucherexperiment. Dort habe ich mit dem Ziel ausgerechnet, wie lange es wohl noch dauert, bis das Ziel erreicht ist und habe die Uhr darauf hin eingestellt.

Nun sehen die Besucher des Experimentes, wie viele Tage es wohl noch dauert, bis die 10.000 Besucher erreicht sind. Das ist doch toll oder?

Einbinden einer Countdown-Uhr

Als mit die Idee zur Countdown-Uhr kam, habe ich mich im Internet schlau gemacht und dort eine Webseite entdeckt, mit der man ganz Einfach solche Uhren bauen kann.

Auf der Webseite www.timeanddate.com. Dort kann man sich Countdown-Uhren selbst generieren.

image

Unten rechts sieht man eine Vorschau der entsprechenden Countdown-Uhr. Scrolled Ihr dort nach unten, dann findet Ihr eine Vielzahl an Einstellungen

Ich finde die Seite daher sehr gut, da Sie es ermöglicht die Uhr an den Blog anzupassen und damit das Layout zu strukturieren.

Der erste Knopf auf den ich Hinweisen will ist der Knopf Copy/Modify

image

Drückt man auf diesen Knopf kann man vorhandene Countdown-Uhren als Code kopieren und erhält sofort wieder alle Einstellungen.

Dies ist ja häufig ein Grundproblem bei Webseiten. Sie speichern die Einstellungen nicht und ich muss erst wieder kompliziert meine Countdown-Uhr einstellen. Hier kann man das über Copy/Modify verwenden.

Einstellungen der Countdown-Uhr

Ansonsten beginnt man damit das man seine Zeitzone eingibt. Dies ist die Basis der Countdown-Uhr.

image

Ich habe hier meine Heimatstadt Berlin ausgewählt. Dadurch läuft die Countdown-Uhr in meiner Zeitzone ab.

Im nächsten Schritt kann man das Ablaufdatum festlegen.

image

Hierbei wählt man Monat, Tag, Jahr, Stunde, Minute und Sekunde aus. Zu diesem Zeitpunkt wird die Countdown-Uhr Rückwärts laufen.

image

Nun kann man beginnen sich um den Style der Uhr zu kümmern. Es gibt einmal die HTML/Javascript-Variante und die Flash-Theme-Variante. Ich habe mich bei meiner ersten Uhr für Javascript entschieden, da hier nicht so viele Probleme auftreten.

Probiert es aber einfach bei Euch aus.

Jetzt kommen Einstellungen wie Schriftart, Hintergrund, Schriftgröße. Also Standardeinstellungen. Damit könnt Ihr die Uhr besser an Euren Blog oder die Webseite anpassen.

image

Viel Interessanter finde ich die nächsten Einstellmöglichkeiten.

image

Der Counter mode erlaubt es entweder den Countdown in Tagen/Stunden/Minuten/Sekunden ablaufen zu lassen oder mit einer einzelnen Zahl. Also nur in Sekunden.

Die Einstellung Smallest unit erlaubt das Festlegen der kleinsten Einheit. Millisekunden kann man Einstellen oder aber auch nur Tage.

Beim Unit texts kann man die Bezeichnungen an den Zahlen festlegen. Hier würde ich für den deutschen Raum auf Bezeichnungen verzichten oder die Kurzbezeichnungen D/H/M/S einstellen. Das versteht noch jeder.

Number rounding wird verwendet wenn die kleinste Einheit z.B. Tage ist. Dort wird festgelegt ob Ab- oder Aufgerundet werden soll.

When time has passed heißt soviel wie, was soll passieren wenn die Zeit abgelaufen ist. Stoppen bei 0 oder mit negativen Zeiten weiter laufen? Beide Optionen haben Ihre Einsatzgebiete.

Die Option Daylight Saving Time steuert eine Nachricht, wenn es zur Zeitumstellung im Sommer und Winter kommt.

Synchronization message gibt an wie Synchron die Uhr läuft und wie hoch die Abweichung ist.

Die folgenden Einstellungen geben an, was passieren soll, wenn die Zeit abgelaufen ist.

image

Hier kann man also Einstellen ob die Uhr sich ausblenden soll, einen bestimmten Hintergrund bekommt oder auch wie der Rand und der Abstand der Uhr eingestellt werden soll.

Hat man seine Uhr eingestellt, dann kann man nun auf den Knopf Show HTML für countdown timer klicken und erhält den HTML-Code, den man in seinen Blog einbauen kann.

Damit ist man Fertig. Es entsteht ein iframe-Code den man nun in seine Seite einbauen kann.

Beispiel

Ich habe hier mal als Beispiel eine Countdown-Uhr zu meinem nächsten Geburtstag eingebaut. Damit wisst Ihr wie lange es noch hin ist.

Als zweites Beispiel habe ich mal das gleiche Datum, dieses mal aber als Millisekunden eingestellt. Das finde ich spaßiger, da die Zahl doch wesentlich höher ist.

So, ich hoffe der ein oder andere kann diesen Artikel für sich verwenden. Mir macht es Spaß auf solche Zeiten hinzuweisen und dem Besucher zu zeigen, wie lange bestimmte Ereignisse noch hin sind.


Ähnliche Beiträge:

GD Star Rating
loading...

Ein Kommentar

  • Danke fuer den Beitrage, sehr interessant. Hast du auch iframe-Code fuer Zeit und Datum. Oder sonst noch andere anregungen die in Richtung Zeit, Uhren, gehen?

    Viele Dank fuer den Artikel

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

CommentLuv badge