Erstellen Sie eine Ganzseiten-Newsticker-Anzeige mit CSS- und RSS-Widgets

Wenn Sie ein Nachrichtenblogger sind, ist es wichtig, auf dem Laufenden zu bleiben. Seit ich in meinem eigenen Blog mehr nachrichtenbezogene Ereignisse behandle, wurde mir klar, wie wichtig es war, Nachrichten in Echtzeit ständig zu überwachen.

Wenn Sie ein Nachrichtenblogger sind, ist es wichtig, auf dem Laufenden zu bleiben.  Seit ich in meinem eigenen Blog mehr nachrichtenbezogene Ereignisse behandle, wurde mir klar, wie wichtig es war, Nachrichten in Echtzeit ständig zu überwachen.
Werbung

Nachrichten-Ticker Wenn Sie ein Blogger sind, ist es wirklich wichtig, mit den neuesten Nachrichten in Ihrer speziellen Nische Schritt zu halten. Die Leute nehmen dich ernster, wenn du einer der Ersten bist, die ein wichtiges Ereignis abdecken - umso mehr, wenn du es verdeckst, bevor die Mainstream-Medien überhaupt davon erfahren.

Wenn Sie ein Nachrichtenblogger sind, ist es noch wichtiger, über aktuelle Nachrichten auf dem Laufenden zu bleiben. Seit ich in meinem eigenen Blog mehr nachrichtenbezogene Ereignisse behandle, wurde mir klar, wie wichtig es war, Nachrichten in Echtzeit ständig zu überwachen. Da ich zwei Bildschirme mit meinem Laptop verwende, wurde mir klar, dass ich einen Bildschirm einrichten könnte, der ausschließlich für das Streamen von eingehenden Nachrichten-Tickern gedacht ist.

Das einzige Problem ist, dass es zwar anständige Apps gibt, um einzelne Nachrichtenzeilen wie Yahoo Widgets oder GlowDart zu streamen. Diese Displays decken jedoch nur einen sehr kleinen Datenstrom ab oder lassen sich nur schwer anpassen ein Vollbildmodus.

Erstellen Sie Ihre eigene vollständige Seite Real-Time News Display

Um dieses Problem zu lösen, wurde mir klar, dass ich selbst etwas bauen müsste. Da ich mir wirklich keine Zeit nehmen wollte, eine komplette Anwendung zu schreiben, entschied ich mich, eine Webseite mit den eingebetteten RSS-Streams zu erstellen. Ich könnte diese Seite anzeigen, indem ich meinen Browser im Vollbildmodus öffne.

Die Werkzeuge, die ich verwendet habe, um diese Seite zu erstellen, und alles, was Sie zum Erstellen Ihrer eigenen benötigen, ist eine kostenlose CSS-basierte Webseitenvorlage (Ich wählte die von SliceJack erstellte kostenlose Geschäftsvorlage) und ein Google-Konto für den Zugriff auf Google Web Elements und Google Alerts

So sieht die Standardgeschäftsvorlage von SliceJack aus, bevor ich mit dem Hintergrundcode begonnen habe.

Nachrichten-Ticker

Dies ist meine Lieblingsmethode, um Webseiten zu erstellen, ich gebe es zu - ich hasse es, das Rad neu zu erfinden. Diese Seite enthält alle Elemente, die ich in meine finale Nachrichten-Streaming-Webseite integrieren möchte.

Die zwei Elemente an der Spitze - der Hauptartikel und das Bild - ich werde löschen. Was ich wirklich verwenden möchte, sind die drei Spalten in der Mitte der Seite.

kostenlose Nachrichten Ticker

Wenn Sie die Vorlage auf Ihren eigenen Computer herunterladen, finden Sie die Datei index.html im Hauptordner, dann die .css-Dateien in einem Stylesheet-Ordner. Wenn Sie die index.html-Datei anzeigen, ist es normalerweise ziemlich einfach, die Abschnitte zu finden, die Sie ändern möchten. In diesem Fall bearbeite ich die obere Leiste, um " Meine Nachrichten " anzuzeigen und die Menüverknüpfungen zu verschiedenen Kategorien zu ändern, für die ich zusätzliche Nachrichtenseiten erstellen werde.

kostenlose Nachrichten Ticker

In der Regel finden Sie die Abschnitte der Seite, indem Sie nach den Tags suchen. Der Parameter "id =" gibt an, mit welchem ​​CSS-Element die Formatierung definiert wird. In diesem Fall werde ich jedoch nur den gesamten Abschnitt "löschen". Es ist wirklich so einfach wie nur den Abschnitt von der Seite zu löschen.

Das nächste, was ich mit der Vorlage tun möchte, ist, die rechte Spalte der Seitenleiste in einen Streaming-News-Feed von YouTube zu ändern. Identifizieren Sie zuerst den Abschnitt, den Sie durch die Tags ersetzen möchten. Ich habe den rechten Seitenleistenabschnitt innerhalb des Div-Tags "Seitenleiste" gefunden.

kostenlose Nachrichten Ticker

Ich mag die Farbe dieser Sektion nicht (sie ist grau und würde mit einem weißen Video darin albern aussehen), also muss ich sie in weiß ändern. Suchen Sie die Haupt-CSS-Datei und suchen Sie nach der ID. Ich habe "sidebar" in main.css gefunden und den Hintergrund auf #FFF gesetzt. Um zu Weiß zu wechseln, habe ich diese # 000 gemacht.

Desktop-Nachrichtenticker

Einbetten von Widgets in Ihre benutzerdefinierte Seite

Jetzt zum spaßigen Teil. Sobald Sie das Formatierungsrecht haben, können Sie Streaming-Feeds in Ihre Seite einbetten. Als erstes möchte ich das YouTube-Element von [NO LONGER WORKS] Google Web Elements einbetten.

Desktop-Nachrichtenticker

Sie wählen einfach die Quelle der gewünschten Nachrichten aus und kopieren und fügen dann den Code ein. In der Tat könnten Sie Ihre gesamte Streaming-Nachrichtenseite mit Google Web Elements mithilfe des Google Reader-Elements erstellen. Ich möchte jedoch zeigen, wie viele Quellen für Echtzeit-Updates verfügbar sind. Bevor Sie fortfahren, sollten Sie sich unbedingt das Google News-Element besorgen und den Code kopieren und in Ihre Seite einfügen.

Desktop-Nachrichtenticker

Eine weitere großartige Ressource, um Nachrichten über RSS zu erhalten, ist FeedWind. Ich mag es wirklich, weil Sie einfach den gewünschten Feed einfügen und anpassen, und Sie erhalten ein nettes, sauberes Widget, das Sie direkt in Ihre Seite einbetten können.

Erstellen Sie eine ganze Seite News Ticker Display mit CSS & RSS Widgets newsticker9

Wenn Sie die Nachrichten in einer bestimmten Nische überwachen, können Sie nicht vergessen, die Google-Suche innerhalb dieser Nische zu überwachen. Bei Google Alerts wählen Sie einfach "Feed" im Feld "Deliver to" aus.

Erstellen Sie eine vollständige Newsticker-Anzeige mit CSS & RSS-Widgets newsticker10

Anschließend können Sie diese Feed-URL in FeedWind verwenden, um Ihr Google-Suchergebnis-Widget zu erstellen. Jetzt, wo all diese verschiedenen Nachrichtenquellen auf der Seite eingebettet sind, ist das Echtzeit-Streaming-Nachrichten-Display endlich fertig. Im oberen Menü können Sie mehrere Seiten mit Widgets erstellen, die gezielt Nachrichtenquellen einbeziehen.

Nachrichten-Ticker

Und das ist jetzt einfach, da du die erste Hauptseite fertig hast. Wie Sie sehen können, bietet die Verwendung der CSS-Vorlage eine schön formatierte Seite, auf der Sie einfach Ihre verschiedenen News-Feeds für eine nette ganzseitige Echtzeit-Nachrichtenanzeige einfügen können.

Dies ist besser als die meisten Streaming-News-Ticker-Apps, die Sie überall kostenlos finden, und Sie können es auch genau an Ihre Bedürfnisse anpassen - das ist die Schönheit einer Webseite statt einer App.

Haben Sie zusammen mit diesem Artikel eine eigene Seite erstellt? Hast du irgendwo aufgehängt oder andere coole Quellen für Echtzeit-Streaming-Widgets gefunden? Teile deine Erkenntnisse in den Kommentaren unten.

Bildquelle: ShutterStock

In this article