VIEW ALL GALLERY LIGHTS

Friday, December 24, 2010

Simplex Aggregator 2 - News aggregator for blogspot

In a post several months ago ,I showed you my template Simplex News Aggregator ,a template that I developed base on Google feed Api and a script from DynamicHTML .This template will get news from many source and show them as time order in separated categories . But that template is very simple ,both of design and function ,so in this post ,I want to show you  Simplex News Aggregator 2 ,a template that comes with news aggregator ,support blogging ,page ,and widget .

Live Demo | Download

Here is steps to install this template :

1,Download template file .

2,Open template in a word editor .

3,To change logo ,find this code :
.logo a { color:#b24a35; background:url(http://img818.imageshack.us/img818/9282/logolb.png) no-repeat; }
and change the text in bold to your logo url .

4,Here is the code of menu navigation
<ul id="nav">
                 <li><a class='name' expr:href='data:blog.homepageUrl'>Home</a>
                     <ul>
                         <li><a title="Sub Pages 1" href="">Sub Pages 1</a></li>
                         <li><a title="Sub Page 3" href="">Sub Page 3</a></li>
                         <li><a title="Sub Page 4" href="">Sub Page 4</a></li>
                     </ul>
                 </li>
                 <li><a href="http://simplexnetwork.blogspot.com/search/label/blog">Blog</a></li>
                 
             </ul>
You can add link to your categories to this menu .

5,Code of header description  :
 <div class="clearfix" id="header-in">
             
             <p class="description">This is a network of news ,resources and tutorial ,feel free to browse them and if you want ,you can submit your news to us ,and we will be very pleased to show it out</p>
         </div>
change it to the text you want .

6,Here is the code of each news categories in home page :
<li>
                     <h3><img width="16" height="16" src="http://digg.com/favicon.ico"/> Technology News</h3>
                     <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>   
                 </li>
               
I will explain this code line by line :
-<h3><img width="16" height="16" src="http://digg.com/favicon.ico"/> Technology News</h3>
  • + http://digg.com/favicon.ico : Icon of news category.
  • + Technology News : name of news category 
-  var newsfeed=new gfeedfetcher("list1")  List1 is the id of news category ,each id must be unique ,for example list1,list2,list3... if there are two categories with one ide ,there's nothing will be shown .

-    newsfeed.addFeed("NYT", "http://www.nytimes.com/services/xml/rss/nyt/International.xml")
      newsfeed.addFeed("Yahoo News", "http://rss.news.yahoo.com/rss/world")
 These two lines will add news from sources (NYT and Yahoo News) to the news category in homepage . if you want to add news from other sources ,you can apply this structure :
      newsfeed.addFeed("Name of news source", "RSS link of news source")

-newsfeed.filterfeed(5) //Show 5 entries, sort by date this line specify the number of entry showed is 5 . You can increase this number to show more or decrease for less .
That's the code for showing news from news sources into one category in homepage . By understanding what these lines mean ,I hope you can modify them as you want . You can refer to my post on Simplex News Aggregator old version for more detail because the code for showing news in these two template are the same

7,When you browse blog posts in  my live demo ,you will notice the sidebar in the right hand . Here is the code for this sidebar :
<div id="sidebar">
                 <div class="col">
                     <h3><span>Categories</span></h3>   
                     <ul>
                         <li>
                             <a href="http://simplexnetwork.blogspot.com">Blog</a>
                         </li>
                     </ul>
                 </div>
             </div>
you can add the categories ,links you want to this sidebar .

8,Now ,you can upload template to Blogger .  There are many places for widget in this template ,and you can add or remove your own widget as you want .

9,That's all for this template .If you familiar to template from SimplexDesign ,you will see that very easy to editing template and make it show as you want ,you can also refer to other templates for more .

I hope this template will be helpful to you .

Merry christmas 2010 to you all .
 

No comments:

Post a Comment