Erstellen Sie eine ganzseitige News-Ticker-Anzeige mit CSS- und RSS-Widgets

Erstellen Sie eine ganzseitige News-Ticker-Anzeige mit CSS- und RSS-Widgets / Internet

Wenn Sie Blogger sind, ist es wirklich wichtig, mit den neuesten Nachrichten in Ihrer Nische auf dem Laufenden zu bleiben. Die Menschen nehmen Sie ernster, wenn Sie einer der ersten sind, der ein bedeutendes Ereignis abdeckt - vor allem, wenn Sie darüber berichten, bevor die großen Mainstream-Medien sogar Wind davon bekommen.

Wenn du ein bist Nachrichten Noch wichtiger ist es für Blogger, wenn es um aktuelle Nachrichten geht. Seitdem ich in meinem eigenen Blog mehr über Neuigkeiten berichtet habe, wurde mir klar, wie wichtig es ist, die Echtzeitnachrichten ständig zu überwachen. Da ich zwei Bildschirme mit meinem Laptop verwende, wurde mir klar, dass ich einen Bildschirm so einrichten kann, dass er ausschließlich zum Streamen eingehender Nachrichtenticker dient.

Das einzige Problem ist, dass es zwar anständige Apps für das Streaming einzelner Nachrichtenzeilen wie Yahoo Widgets oder GlowDart gibt, dass diese Anzeigen jedoch nur einen sehr kleinen Strom eingehenden Textes abdecken oder schwierig anpassbar sind, um genau so aussehen zu können, wie Sie möchten ein Vollbildmodus.

Erstellen Sie Ihre eigene ganzseitige Echtzeit-Nachrichtenanzeige

Um dieses Problem zu lösen, wurde mir klar, dass ich selbst etwas bauen musste. Da ich mir wirklich nicht die 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 öffnet.

Die Tools, die ich zum Erstellen dieser Seite verwendet habe, und alles, was Sie zum Erstellen Ihrer eigenen Seite benötigen, sind 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 sah die Standardgeschäftsvorlage von SliceJack aus, bevor ich mit dem Hacken des Hintergrundcodes begann.

Dies ist meine Lieblingsmethode zum Erstellen von Webseiten. Ich gebe es zu - ich hasse es, das Rad neu zu erfinden. Diese Seite enthält alle Elemente, die ich in meine letzte News-Streaming-Webseite integrieren möchte.

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

Wenn Sie die Vorlage auf Ihren eigenen Computer herunterladen, finden Sie die Datei index.html im Hauptordner, dann die .css-Dateien in einem Stylesheets-Ordner. Beim Anzeigen der Datei index.html ist es in der Regel recht einfach, die zu ändernden Abschnitte zu finden. In diesem Fall bearbeite ich die obere Leiste, um sie anzuzeigen “Meine Neuigkeiten” und die Menülinks in verschiedene Kategorien ändern, für die ich zusätzliche Nachrichtenseiten erstellen werde.

Sie können die Abschnitte der Seite normalerweise finden, indem Sie nach dem suchen

Stichworte. Das “id =” Parameter gibt an, mit welchem ​​CSS-Element die Formatierung definiert wird. In diesem Fall lösche ich jedoch nur den gesamten von “
. Es ist wirklich so einfach wie das Löschen des Abschnitts von der Seite.

Als Nächstes möchte ich mit der Vorlage die rechte Sidebar-Spalte in einen Streaming-News-Feed von YouTube ändern. Identifizieren Sie zunächst den Abschnitt, den Sie ersetzen möchten

wieder Tags. Ich habe die rechte Seitenleiste innerhalb der gefunden “Seitenleiste” div-Tag.

Ich mag die Farbe dieses Abschnitts nicht (sie ist grau und würde mit einem weißen Video dumm aussehen), also muss ich sie in weiß ändern. Suchen Sie nach der Haupt-CSS-Datei und suchen Sie nach der ID. ich fand “Seitenleiste” in main.css und der Hintergrund auf #FFF gesetzt. Um zu Weiß zu wechseln, habe ich dieses # 000 gemacht.

Einbetten von Widgets in Ihre benutzerdefinierte Seite

Nun zum Spaß. Sobald Sie über die richtige Formatierung verfügen, können Sie Streaming-Feeds in Ihre Seite einbetten. Als erstes möchte ich das YouTube-Element von hier aus einbetten [NICHT MEHR FUNKTIONIERT] Google Web Elements.

Sie wählen einfach die gewünschte Nachrichtenquelle aus und kopieren und fügen den Code ein. Tatsächlich können Sie Ihre gesamte Streaming-News-Seite nur mit Google Web Elements erstellen, indem Sie das Google Reader-Element verwenden. Ich möchte jedoch zeigen, wie viele Quellen für Echtzeitaktualisierungen verfügbar sind. Bevor Sie fortfahren, sollten Sie sich unbedingt das Google News Element sichern und den Code kopieren und in Ihre Seite einfügen.

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

Auch wenn Sie die Nachrichten in einer bestimmten Nische überwachen möchten, können Sie nicht vergessen, die Google-Suche in dieser Nische zu überwachen. Wählen Sie in Google Alerts einfach aus “Futter” in dem “Liefern an” Feld.

Anschließend können Sie diese Feed-URL in FeedWind verwenden, um das Widget für Google-Suchergebnisse zu erstellen. Nun, da all diese verschiedenen Nachrichtenquellen in die Seite eingebettet sind, ist die Anzeige der Echtzeit-Streaming-Nachrichten abgeschlossen. Im oberen Menü können Sie mehrere Seiten mit Widgets erstellen, die zielgerichtete Nachrichtenquellen enthalten.

Jetzt ist die erste Hauptseite fertig. Wie Sie sehen, bietet die Verwendung der CSS-Vorlage eine schön formatierte Seite, auf der Sie einfach Ihre verschiedenen News-Feeds einfügen können, um eine ganzseitige Echtzeit-Anzeige von Nachrichten zu erhalten.

Dies ist besser als bei den meisten Streaming-News-Ticker-Apps, die Sie kostenlos überall finden können. Außerdem können Sie sie genau an Ihre Bedürfnisse anpassen. Das ist der Vorteil, wenn Sie eher eine Webseite als eine App verwenden.

Haben Sie zusammen mit diesem Artikel eine eigene Seite erstellt? Haben Sie sich irgendwo aufgehängt oder andere coole Quellen für Echtzeit-Streaming-News-Widgets entdeckt? Teilen Sie Ihre Erkenntnisse im Kommentarbereich weiter unten.

Bildnachweis: ShutterStock

Erfahren Sie mehr über: RSS.