Create A Full Page News Ticker Display With CSS & RSS Widgets
|
| ||||||||
| Compare: | Web Design Calculator | Web Design Cost Guidelines |
Are you an E-Commerce Web Designer? Add a Free Listing
When you’re a blogger, it is really important to stay up to speed with the latest news within your particular niche. People take you more seriously when you’re one of the first to cover a significant event – even more so if you cover it before the major mainstream media even catches wind of it.
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
Thu, 22 Dec 2011 19:01:37 GMT
Tags: css, feeds, news, RSS, tickers, Web Apps & Internet, widgets,
McFarland E-Commerce | Bremerton E-Commerce | Buford E-Commerce | Colombo E-Commerce | Springville-Mapleton E-Commerce | Lahore E-Commerce | Naples E-Commerce | Aliso Viejo E-Commerce | Bluff City E-Commerce | Pleasant Prairie E-Commerce |
css
Create Web Animations Using HTML5, CSS3 & JavaScript With The Help Of Adobe Edge [Windows & Mac]
Flash used to be the king of web animation, but now it's been slowly abandoned because of the possible future ruler: a combination of HTML5, CSS3, and JavaScript. Even though Adobe is still strongly supporting Flash, it is also beginning to embrace the n
Pendule – A Neat Web Developer Plugin [Chrome]
I do quite a bit of Web development, and Google Chrome is my main browser these days. Chrome is pretty developer-friendly as it is, and you can also set up Firebug on Chrome. But today I wanted to show you a different Chrome extension called Pendule. Pend
feeds
5 Interesting Ways To Use Google News RSS Feeds
We all love neat RSS hacks, right? Well, here’s some interesting ways to use Google RSS news feeds. Many of us MakeUseOf readers are keen readers of Google News because it’s an easy way to see news articles from newspapers worldwide, grouped b
FeedPlayBack: Subscribe To Old Archives For Any Awesome Blog You Have Just Discovered
Have you ever come across a really useful blog and wish you had discovered it earlier? There are plenty of awesome websites you love and subscribe to but how about the old posts that had been published there before you found the resource? If you ever want
Keep Google Reader On Your Desktop With Reeder [Mac]
If you're a fan of Google Reader's functionality but not of its appearance, Reeder for Mac Beta offers Mac users an alternative way to access Google Reader subscriptions in a much more visually appealing way. The minimalist appearance, together with th
news
MySQL 5.1 now supported on Cpanel / WHM
Just found out this morning that MySQL 5.1 is now officially supported on cpanel. MySQL 5.1 offers some major improvements in some areas to MySQL 5.0. MySQL 5.1 was released over a year ago and it’s been a long wait for those cpanel users needing 5.
BitTorrent Creates User-Friendly Client Chrysalis [News]
BitTorrent has released a new client this week called Chrysalis in an attempt to keep novice users interested in the BitTorrent service. Chrysalis has been specially designed with new users in mind, so it’s clearly laid out with free, legal content
Need E-commerce Design? Check out our member profiles:
Professional web site design and e-commerce solutions. Get your web site or store online usually same day. Great US based support and design - no jobs outsourced overseas.
Perrysburg, Ohio US
Easy Low-Cost Web Site Solutions. ANY web site, quick and fast! Turn your dream into reality today! I'M THE HOUSE M.D. OF WEB DESIGN AND DEVELOPMENT.
Rancho Cucamonga, California US
With over a decade in the market, we have solidified the greatest way to ensure maximum profit from any eCommerce website. New or existing, we research to perfection an increase in ROI.
Appleton, Wisconsin US
Affordable web hosting and affordable web design solutions. E-commerce products with card processing and Paypal integrated. Full Color printing services with design & layout.
Herkimer, New York US
Virtualtech Website Design and Promotion provides website design, Internet marketing (SEO), Email Marketing and Social Media services throughout Wisconsin and the United States. Located in Appleton.
Appleton, Wisconsin US
At SimpleWebs13 we design & develop websites from 2 & 3 page simple sites to eCommerce websites along with graphic & logo design work. We also offer SEO, web hosting and many other services.
Iowa Park, Texas US
Ecommerce web design SEO Albuquerque - Website Design Web Hosting Services
Rio Rancho, New Mexico US
IceStar Media are a successful team of website designers, IT consultants and software programmers who have a proven track record in designing and delivering reliable business applications and websites
Stevenage, England GB
5 Easy Tips That Would Protect You Against A Computer Hacker
Over the past few decades we ve seen many technological advancements In fact the advancements hav
5 Twitter Job Services For Some Real-Time Job Search
Twitter may not merit a serious look as a job hunting and recruitment tool But that s something a f
Cool Websites and Tools [September 5th 2011]
Check out some of the latest MakeUseOf discoveries Most of the listed websites are FREE or come wit
Google Extends Free North American Gmail Calls Through 2012 [News]
Gmail users in the US and Canada who have been enjoying Google s free calls deal over the last year
The 10 Coolest Google Chrome Themes
The big three as far as browsers are concerned have been making headlines as of late Microsoft
Hot Tech Deals [Apr 7th]
If you 8217 re in the market for a new computer laptop mobile phone games and other accessories
[ANNOUNCEMENT] 107 Best Websites On The Web
Here at MakeUseOf we love websites It s our very reason for existing and when new sites pop up w
Article Tags
E-commerce Design Articles
Web Apps & Internet (369)
News (290)
Web Apps (129)
Inspiration (128)
Music (119)
iPhone / iPad / iPod (114)
cool web apps (108)
Mobile Tips (100)
Google Android (100)
Announcements (99)
deals (88)
Games & Gaming Tips (84)
Tech Deals (82)
Opinion & Polls (76)
Cool Software Apps (76)
Browser Tips & Tricks (66)
iOS (66)
Social Media (65)
iPhone Apps (59)
Photography (58)
Freebies (58)
geeky fun (58)
iphone (55)
Google (53)
troubleshoot (53)
android (52)
Photoshop (52)
Graphics (51)
facebook (50)
How-To Articles (50)
Friends:
E-Commerce Website Pricing
Web Design Quote
Website Design
Graphic Designers
