If you’re a news blogger, the importance of staying up to date on breaking news is even more critical. Ever since I started covering more news-related events on my own blog, I realized how important it was to constantly monitor real-time news. Since I use two screens with my laptop, I realized that I could set up one screen to be exclusively for streaming incoming news tickers.
The only problem is that while there are decent apps for streaming single lines of news, like Yahoo Widgets or GlowDart, those displays either cover just a very small stream of incoming text, or they are difficult to customize to look exactly the way you want in a full-screen sort of mode.
Creating Your Own Full Page Real-Time News Display
To solve this problem, I realized that I would have to build something myself. Since I really didn’t want to take the time to write an entire application, I decided to create a webpage with the embedded RSS streams. I could display that page by opening up my browser in full-screen mode.
The tools that I used to create this page, and all you need to create your own, is a free CSS-based webpage template (I chose the free business template created by SliceJack), and a Google account for access to Google Web Elements and Google Alerts.
Here’s what the default business template by SliceJack looked like before I got started with hacking up the background code.
This is my favorite method to create webpages, I admit it – I hate re-inventing the wheel. This page has all of the elements that I want to integrate into my final news-streaming webpage.
The two elements at the top – the main article and the picture – I’m going to delete. What I really want to use are the three columns in the center of the page.
When you download the template to your own computer, you’ll find the index.html file in the main folder, but then .css files in a stylesheets folder. Viewing the index.html file, it’s usually pretty simple to find the sections that you want to modify. In this case, I’m editing the top bar to display “My News” and changing the menu links to different categories that I’m going to create additional news pages for.
You can usually find the sections of the page by looking for the <div> tags. The “id=” parameter tells you what CSS element is used to define the formatting. However, in this case I’m just going to wipe out the entire section defined by “<div id=”sub-header”>. It really is as easy as just deleting the section from the page.
The next thing I want to do to the template is change the right sidebar column to a streaming news feed from YouTube. First, identify the section you want to replace with the <div> tags again. I found the right sidebar section within the “sidebar” div tag.
I don’t like the color of that section (it’s gray and would look silly with a white video inside it), so I have to change it to white. Find the main css file and search for the ID. I found “sidebar” inside main.css, and the background set to #FFF. To change to white, I made this #000.
Embedding Widgets Into Your Custom Page
Now for the fun part. Once you have the formatting right, you can start embedding streaming feeds into your page. The first thing I want to do is embed the YouTube element from Google Web Elements.
You just select the source of news you want and then copy and paste the code. In fact, you could build your entire streaming news page with just Google Web Elements using the Google Reader element. However, I want to show just how many sources are available for real-time updates. Before moving on, definitely make sure to grab the Google News Element, and copy and paste that code into your page as well.
Another great resource to get news feeds via RSS is FeedWind. I really like it because you just paste in the feed you want, customize, and it gives you a nice, clean widget that you can embed right into your page.
Also, if you’re going to be monitoring the news within a certain niche, you can’t forget to monitor Google search within that niche. Within Google Alerts, just select “Feed” in the “Deliver to” field.
Then, you can use that feed URL in FeedWind to create your Google Search results widget. Now that all of these different news sources are embedded onto the page – the real-time streaming news display is finally finished. The top menu allows you to create multiple pages like this, with widgets that bring in targeted news sources.
And doing so is easy now that you’ve got the first main page done. As you can see, using the CSS template provides a nice formatted page where you can just insert your various news feeds for a nice full-page real-time news display.
This is better than most of the streaming news ticker apps that you’ll find anywhere for free, and it also allows you to customize it exactly to your needs – that’s the beauty of using a webpage rather than an app.
Did you create your own page along with this article? Did you get hung up anywhere, or discover any other cool sources for real-time streaming news widgets? Share your insights in the comments section below.
Image Credit: ShutterStock
Similar Stuff
-
How To Create A RSS Feed Bundle On Google Reader
-
Four Really Good Free Desktop News Ticker Apps
-
News RSS Ticker: An Elegant News Ticker For Windows & Linux
No comments:
Post a Comment
[Please do not advertise, or post irrelevant links. Thank you for your cooperation.]