Friday, 24 September 2010

Simplex News Aggregator - RSS reader template

One man who mailed to me request a template that can get RSS news from other sites . He has a lot of blogs ,so he want to make a portal that can aggregate latest posts from these blogs. Like a blog network ^^ Here is my result



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 .

27 comments:

  1. I like this templates.... sir can ur create using read label only! coz this design nice...

    ReplyDelete
  2. That is Amazing !

    I still do not see any border of your site in IE8 http://dl.dropbox.com/u/11103024/Taiki/noborder.jpg. It does not support CSS3, I guess.

    ReplyDelete
  3. Is it possible to have this in a new page?

    ReplyDelete
  4. @All : thanks for your support .
    @Taiki : yes,it's CSS3 and IE doesn't support CSS3 .
    @Κωνσταντίνος : What do you mean ? To create a page ,do as other template ^^

    ReplyDelete
  5. @nhamngahanh : Whether you will publish the new template photoblog?

    ReplyDelete
  6. Google will index this blog results? or keywords?

    ReplyDelete
  7. Can we add another 3 column on it?
    like category 4, category 5, category 6?

    anyway you made a mindblowimg template dude, hats off on your talent.

    ReplyDelete
  8. Hello friend, greetings and respect to you. Let me tell you you're a great professional!
    I propose you an initiative, please convert this wordpress template to blogger.
    http://www.theme-junkie.com/themes/freshlife/
    You become better, and I think this will not give a lot of work compared with previous.
    Good day and God bless.
    Venezuela

    ReplyDelete
  9. By placing other categories they do not show the news categoria.E only by changing the number of posts per feed to display one of each it shows only two.
    How to do it as a common model blogger in the same structure but with three columns to the elements below and a sidebar of 200px for elements and also feeds and where the posts would be shared
    ----------------------------------------------------------------
    Ao colocar outras categorias elas não mostram as noticias somente a categoria.E ao mudar a quantidade de posts por feed para exibir uma de cada ela exibe apenas duas.
    Como fazer ele como um modelo comum blogger no mesma estrutura porem com tres colunas para elementos abaixo e uma coluna lateral de 200px tambem para elementos e onde e os feeds ficariam os posts comuns

    ReplyDelete
  10. TEmplate that is very cool, in Indonesia there are actually a blogger who also create templates feed agregrator like this. but there templates paid. while here for free thanks

    ReplyDelete
  11. Great work
    You can convert this
    http://zoom-aggregator-red.blogspot.com/

    ReplyDelete
  12. @Admin : my template can do this work . You don't need an conversion of http://zoom-aggregator-red.blogspot.com/ ^^ Just take a moment to decorating and it will look as good as site you sent me .

    ReplyDelete
  13. Gr8 Work

    and now we are looking for other version of this template to show feeds without thumbnail and we can make a mix one by integrate 2 types of feeds ( with and without thumbnail ) ... I think this will be supertemplate ^_^

    ReplyDelete
  14. I would like to add this at the bottom of my blog like a footer type? I know it's possible, I just cant decipher your coding. I can see the RSS feed & js file but is that all that makes it work?

    ReplyDelete
  15. It seems a very good template, exactly what I am looking for.
    Just one question, is it possible to throw in adsense in the template?
    A 728x90 and a wide skyscraper or any other format would do wonders.

    Would be grateful for response

    ReplyDelete
  16. you genius :)
    whether it can be made as popurls.com or alltop.com
    description and date created hidden, so it looks neater.

    for example like this
    zoom-aggregator-gray.blogspot.com

    thx for template :)

    ReplyDelete
  17. This comment has been removed by the author.

    ReplyDelete
  18. The javascript "gfeedfetcher.js" is still not working. Please provide the script for i'll try upload to my own hosting.

    thx

    ReplyDelete
  19. Hey dinu..
    Why should require javascript? I saw her blog assadotcom (http://assadotnet.blogspot.com/) no javascript and look more tidy than this template, maybe you can ask with assadotcom.

    ReplyDelete
  20. this is really a nice work buddy

    but is this possible that, when we click on link it open in our blog only instead of redirecting to other site(bbc ,yahoo ,the rss source)

    ReplyDelete
  21. very nice theme...
    but how to change "No Image Available" picture...?
    can i do that?

    ReplyDelete
  22. nice template..i like it..then i share to my friend..usefull..thanks..

    indo face blog

    ReplyDelete