Live Demo
Download
This template is built base on GAjaxfetcher script from Dynamicdrive.com . I modified and imroved it for making this template .
This template can get RSS from other sites and display it in time order .
How to install this template :
1,Download this template .
2,Open it in any word editor you have
3,In template file ,you will see these div elements :
<div class="box">
<h1>Category 1</h1>
<script type="text/javascript">
var newsfeed=new gfeedfetcher("list1")
newsfeed.addFeed("NYT", "http://www.nytimes.com/services/xml/rss/nyt/International.xml")
newsfeed.addFeed("Yahoo News", "http://rss.news.yahoo.com/rss/world")
newsfeed.filterfeed(5) //Show 5 entries, sort by date
newsfeed.init() //Always call this last
</script>
</div>
<div class="box">
<h1>Category 2</h1>
<script type="text/javascript">
var newsfeed=new gfeedfetcher("list2")
newsfeed.addFeed("BBC", "http://feeds.bbci.co.uk/news/technology/rss.xml")
newsfeed.addFeed("CNN", "http://rss.cnn.com/rss/cnn_tech.rss")
newsfeed.addFeed("Pcworld", "http://feeds.pcworld.com/pcworld/techlog")
newsfeed.addFeed("todaypc", "http://feeds.pcworld.com/pcworld/blogs/todayatpcw")
newsfeed.filterfeed(5) //Show 5 entries, sort by date
newsfeed.init() //Always call this last
</script>
</div>
<div class="box">
<h1>Category 3</h1>
<script type="text/javascript">
var newsfeed=new gfeedfetcher("list3")
newsfeed.addFeed("BBC", "http://news.bbc.co.uk/rss/newsonline_world_edition/uk_news/politics/rss091.xml")
newsfeed.addFeed("CNN", "http://rss.cnn.com/rss/cnn_allpolitics.rss")
newsfeed.addFeed("YN", "http://rss.news.yahoo.com/rss/mideast")
newsfeed.filterfeed(5) //Show 5 entries, sort by date
newsfeed.init() //Always call this last
</script>
</div>
Here is the code of first category
<div class="box">
<h1>Category 1</h1>
<script type="text/javascript">
var newsfeed=new gfeedfetcher("list1")
newsfeed.addFeed("NYT", "http://www.nytimes.com/services/xml/rss/nyt/International.xml")
newsfeed.addFeed("Yahoo News", "http://rss.news.yahoo.com/rss/world")
newsfeed.filterfeed(5) //Show 5 entries, sort by date
newsfeed.init() //Always call this last
</script>
</div>
Let's take a closer look inside the code
- In this code <h1>Category 1</h1> is the title of category.
- This line var newsfeed=new gfeedfetcher("list1") define the element wrapping arround the RSS news , "list1" is the id of element . Id of element must be unique .
- This line newsfeed.addFeed("NYT", "http://www.nytimes.com/services/xml/rss/nyt/International.xml") will add a RSS feed at address http://www.nytimes.com/services/xml/rss/nyt/International.xml to the list of RSS source for Category 1 ,and NYT is the label of this feed source
-This line newsfeed.addFeed("Yahoo News", "http://rss.news.yahoo.com/rss/world") is similar to the line above
-This line newsfeed.filterfeed(5) //Show 5 entries, sort by date indicate the number of news item will be displayed .
-This line newsfeed.init() //Always call this last will start the function getting feeds from RSS sources above .
Other categories has the same structure .
Now ,everything is very clear .
To change the category name : you can change the text Category .. in <h1>Category ...</h1> to your category name ,for example ,Politics ,Business ...
To add feed sources ,just use this structure newsfeed.addFeed(" feed-label ", " feed address ")
Wanna show more items in each category ? change value "5" in this line newsfeed.filterfeed(5) //Show 5 entries, sort by date
to the value you want .
To add more category ,just copy this code :
<div class="box">
<h1>Category 1</h1>
<script type="text/javascript">
var newsfeed=new gfeedfetcher("list1")
newsfeed.addFeed("NYT", "http://www.nytimes.com/services/xml/rss/nyt/International.xml")
newsfeed.addFeed("Yahoo News", "http://rss.news.yahoo.com/rss/world")
newsfeed.filterfeed(5) //Show 5 entries, sort by date
newsfeed.init() //Always call this last
</script>
</div>
and paste it in template .
change the category title ,add your feed ,change the number of item ,and remember to change the "list1" in this line var newsfeed=new gfeedfetcher("list1") to an unique value .
4,To change the logo
find this <img src="http://img684.imageshack.us/img684/4229/logopa.jpg"/> and change http://img684.imageshack.us/img684/4229/logopa.jpg to your logo link .
Save template ,and upload it to Blogger .
Go to Blogger Dashboard ,click on Design - > Page Elements ,you can add or remove any widget you want in the footer .
That's all for this template . I hope this template helpful to your work .Feel free to leave me comments ^^ Thanks .
0 comments:
Post a Comment