Description: gAjax RSS Pausing scroller is a flexible RSS scroller that's extremely easy to set up to boot. Using the gAjax RSS Displayer script engine, there's nothing to install or host on your server. Furthermore, you can display results from multiple feeds intermixed, sort them in a variety of ways, specify how many entries to show at once, what portion of each entry to show etc. There is simply no more versatile script RSS scroller out there!
Demo: Look at my sidebar! (Recent Comments)
Step 1
: Insert the following code into the HEAD section of your page:
<head>code</head>
<script src='http://www.google.com/jsapi?key=YOUR-API-KEY' type='text/javascript'></script>
<script src='http://putratoo.googlepages.com/gfeedfetcher.js' type='text/javascript'></script>
<script src='http://putratoo.googlepages.com/gajaxscroller.js' type='text/javascript'>
</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: 316px;
height: 30px;
border: 1px solid black;
padding: 4px;
background-color: lightyellow;
}
#example2{ /*Demo 2 main container*/
width: 316px;
height: 180px;
border: 1px dashed black;
padding: 4px;
background-color: #EEEEEE;
}
#example2 div ul{ /*Demo 2 UL container*/
margin: 0;
padding-left: 18px;
}
#example2 div ul li{ /*Demo 2 LI that surrounds each entry*/
margin-bottom: 4px;
}
#example3{ /*Demo 3 main container*/
width: 316px;
height: 280px;
border: 1px solid navy;
padding: 4px;
}
#example3 div p{ /*Demo 3 P element that separates each entry*/
margin-top: 0;
margin-bottom: 7px;
}
code{ /*CSS for insructions*/
color: red;
}
</style>
IMPORTANT: Notice the "YOUR-API-KEY" portion at the very top of the code. You need to replace that with your free Google API Key. Go to this page and enter your site's domain (aka the domain you wish to display this script on). A key that is super-long is generated. Replace "YOUR-API-KEY" with this key!
The generate key will work on any page within the specified domain. If you need to use this script on another domain, generate another key.
Step 2
: Finally, to display the desired RSS feeds, just add the below sample HTML to your page, which illustrates 3 different examples using various feeds (Slashdot, Digg, CSS Drive, CNN etc):
Back to Page Elements => Add A Gadgat => HTML/JavaScript and Past this code:
<h3>"<code>Recent Comments</code>"</h3>
<script type="text/javascript">
var cssfeed=new gfeedpausescroller("example1", "example1class", 2500, "")
cssfeed.addFeed("CSS Drive", "http://www.yuljet.co.cc/feeds/comments/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(30, "date") //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
<h3>"<code>Yul Jet</code>, "</h3>
<script type="text/javascript">
var socialfeed=new gfeedpausescroller("example2", "example2class", 3000, "")
socialfeed.addFeed("Yul Jet", "http://www.yuljet.co.cc/feeds/posts/default") //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(100, "label") //Show 95 entries, sort by label
socialfeed.entries_per_page(5)
socialfeed.init() //Always call this last
</script>
<h3>"<code>Other Post</code>"</h3>
<script type="text/javascript">
var newsfeed=new gfeedpausescroller("example3", "example3class", 2500, "_new")
newsfeed.addFeed("Pyruos", "http://www.pyruos.co.cc/feeds/posts/default") //Specify "label" plus URL to RSS feed
socialfeed.displayoptions("label datetime") //show the specified additional fields
newsfeed.addFeed("Movies", "http://www.pyruos.co.cc/feeds/posts/default") //Specify "label" plus URL to RSS feed
newsfeed.addFeed("Theme", "http://www.themesg.co.cc/feeds/posts/default") //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(20, "date") //Show 15 entries, sort by date
newsfeed.entries_per_page(5)
newsfeed.init() //Always call this last
</script>
Browse » Home »
H - How to ,
Java Script ,
XML and RSS
» Scripts- gAjax RSS Pausing Scroller (hosted)
Scripts- gAjax RSS Pausing Scroller (hosted)
Subscribe to:
Post Comments (Atom)
តិចតួចទេ គ្មានអស្ចារ្យទេ មិនដល់ផល្លាទេ