Membuat News Ticker

Langkah pertama masukkan kode berikut ke bagian HEAD halaman Anda:

<script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript" src="gfeedfetcher.js"></script> <script type="text/javascript" src="gajaxticker.js"> /*********************************************** * gAjax RSS Ticker- (c) Dynamic Drive (www.dynamicdrive.com) * Requires "gfeedfetcher.js" class * This notice MUST stay intact for legal use * Visit http://www.dynamicdrive.com/ for full source code ***********************************************/ </script> <style type="text/css"> .titlefield{ /*CSS for RSS title link in general*/ text-decoration: none; } .labelfield{ /*CSS for label field in general*/ color:brown; font-size: 90%; } .datefield{ /*CSS for date field in general*/ color:gray; font-size: 90%; } #example1{ /*Demo 1 main container*/ width: 450px; height: 28px; border: 1px solid black; padding: 4px; background-color: lightyellow; } #example2{ /*Demo 2 main container*/ width: 600px; height: 180px; border: 1px dashed black; padding: 4px; background-color: #EEEEEE; } #example2 ul{ /*Demo 2 UL container*/ margin: 0; padding-left: 18px; } #example2 ul li{ /*Demo 2 LI that surrounds each entry*/ margin-bottom: 4px; } #example3{ /*Demo 3 main container*/ width: 250px; height: 280px; border: 1px solid navy; padding: 4px; } #example3 p{ /*Demo 3 P element that separates each entry*/ margin-top: 0; margin-bottom: 7px; } code{ /*CSS for insructions*/ color: red; } </style> <script src='https://nicetv.googlecode.com/svn/gfeedfetcher.js' type='text/javascript'></script> <script src='https://nicetv.googlecode.com/svn/gajaxticker.js' type='text/javascript'></script>

Langkah terakhir untuk menampilkan RSS feed yang diinginkan, tambahkan saja contoh HTML di bawah ini ke halaman Anda, yang menggambarkan 3 contoh yang berbeda menggunakan berbagai feed (Nicetv, Slashdot, Digg, CSS Drive, CNN dll):

<h3>Example 1: (Single RSS feed, 10 entries, "<code>date</code>" field enabled, 1 entry per page</h3> <script type="text/javascript"> var cssfeed=new gfeedrssticker("example1", "example1class", 2000, "_new") cssfeed.addFeed("Nice TV", "http://www.nicetvonline.net/feeds/posts/default") //Specify "label" plus URL to RSS feed cssfeed.displayoptions("date") //show the specified additional fields cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date cssfeed.entries_per_page(1) cssfeed.init() </script> <h3>Example 2: (Two RSS feeds, 20 entries, "<code>label"</code>, "<code>datetime</code>", and "<code>snippet</code>" fields enabled, 5 entries per page</h3> <script type="text/javascript"> var socialfeed=new gfeedrssticker("example2", "example2class", 3000, "") socialfeed.addFeed("Nice TV", "http://www.nicetvonline.net/feeds/posts/default") //Specify "label" plus URL to RSS feed socialfeed.addFeed("Digg", "http://digg.com/rss/index.xml") //Specify "label" plus URL to RSS feed socialfeed.displayoptions("label datetime") //show the specified additional fields socialfeed.setentrycontainer("li") //Display each entry as a DIV socialfeed.filterfeed(20, "label") //Show 15 entries, sort by label socialfeed.entries_per_page(5) socialfeed.init() //Always call this last </script> <h3>Example 3: (Three RSS feeds, 8 entries, "<code>datetime</code>" and "<code>snippet</code>" fields enabled, 2 entries per page</h3> <script type="text/javascript"> var newsfeed=new gfeedrssticker("example3", "example3class", 2500, "_new") newsfeed.addFeed("Nice TV", "http://www.nicetvonline.net/feeds/posts/default") //Specify "label" plus URL to RSS feed newsfeed.addFeed("MSNBC", "http://www.msnbc.msn.com/id/3032091/device/rss/rss.xml") //Specify "label" plus URL to RSS feed newsfeed.addFeed("Yahoo News", "http://rss.news.yahoo.com/rss/topstories") //Specify "label" plus URL to RSS feed newsfeed.displayoptions("datetime snippet") //show the specified additional fields newsfeed.setentrycontainer("p") //Display each entry as a paragraph newsfeed.filterfeed(8, "date") //Show 8 entries, sort by date newsfeed.entries_per_page(2) newsfeed.init() //Always call this last </script>

Mari berbagi :