RSS reader on your blog or site in three steps

You want to display RSS feed on your blog or web site? You also want to have some control on appearance of this RSS feed on your blog and want to do it fast and keep things simple?
If answer on those question is positive, you should read this article. Final result will look similar to sample on picture.

1. Go on CustomRSS web page

CustomRSS is one of google gadgets. Highly customizable RSS reader to spice up your page with color and functionality. Tons of options! Capable of showing inline pictures and HTML formatting.


2. Adjust gadget settings

Most important is to enter FEED URL. In my case this URL was : http://interestingwebs.blogspot.com/feeds/posts/default/-/webs
Of course, you will enter your feed url.
You can choose Gadget Title Link, colors, fonts, link actions, number of items...
Every change you make you see in preview pane.
For colors you must use hexadecimal color codes. Safe Hexadecimal Color Codes will help you with colors.
When you are satisfied with your work you can click button "Get Code"


3. Copy and paste code on your blog or site

Final step is to paste code from CustomRSS web on your site.

For blogspot bloggers:

You can paste code in HTML/Javascript gadget. For details see How to add HTML or JavaScript gadget to blog (blogger).

For advanced users:

Advanced user might load more Custom RSS readers in separate div tags. Hide divs and show them with javascript clicks (see article about hiding and showing HTML elements). With this you can see different category lists without reloading page.
Code for advanced users:

<ul style="FONT-SIZE: x-small">
<li><a id="Category1" href="javascript:;" onclick="javascript:hideAllCategories();showCategory('RSS1')">Blog tutorial</a>
<li><a id="Category2" href="javascript:;" onclick="javascript:hideAllCategories();showCategory('RSS2')">Useful webs</a>
</li></li></ul>

<script type="text/JavaScript">    
<!--  
function showCategory(id)  
{  
 if (document.getElementById(id).style.display == 'none')  
 {  
  document.getElementById(id).style.display = '';  
 }  
}  
//-->  
   
<!--  
function hideCategory(id)  
{  
           document.getElementById(id).style.display = 'none';  
   
 }  
//-->  

<!--  
function hideAllCategories()  
{  
           document.getElementById('RSS1').style.display = 'none'; 
           document.getElementById('RSS2').style.display = 'none';
           document.getElementById('RSS3').style.display = 'none';
           document.getElementById('RSS4').style.display = 'none'; 
   
 }  
//-->  
</script> 

<div id="RSS1">
<script src="http://www.gmodules.com/ig/ifr?url=http://customrss.googlepages.com/customrss.xml&amp;up_rssurl=http%3A%2F%2Finterestingwebs.blogspot.com%2Ffeeds%2Fposts%2Fdefault%2F-%2Fblog-tutorial&amp;up_title=CustomRSS&amp;up_titleurl=http%3A%2F%2Finterestingwebs.blogspot.com%2Ffeeds%2Fposts%2Fdefault%2F-%2Fblog-tutorial&amp;up_num_entries=30&amp;up_linkaction=openlink&amp;up_background=669966&amp;up_border=CFC58E&amp;up_round=1&amp;up_fontfamily=Arial&amp;up_fontsize=8pt&amp;up_openfontsize=9pt&amp;up_itempadding=3px&amp;up_bullet=arrows&amp;up_custicon=Overrides%20favicon.ico&amp;up_boxicon=0&amp;up_opacity=20&amp;up_itemlinkcolor=FFFFFF&amp;up_itemlinkweight=Bold&amp;up_itemlinkdecoration=Underline&amp;up_vlinkcolor=000000&amp;up_vlinkweight=Bold&amp;up_vlinkdecoration=Underline&amp;up_showdate=1&amp;up_datecolor=9F9F9F&amp;up_tcolor=1C57A9&amp;up_thighlight=FFF19D&amp;up_desclinkcolor=1B5790&amp;up_color=000000&amp;up_dback=FFFFFF&amp;up_dborder=DFCE6F&amp;up_desclinkweight=Bold&amp;up_desclinkdecoration=Underline&amp;synd=open&amp;w=200&amp;h=250&amp;title=Blog tutorial&amp;border=%23ffffff%7C0px%2C1px solid %23595959%7C0px%2C1px solid %23797979%7C0px%2C2px solid %23898989&amp;output=js"></script>
</div>
<div id="RSS2" style="DISPLAY: none">
<script src="http://www.gmodules.com/ig/ifr?url=http://customrss.googlepages.com/customrss.xml&amp;up_rssurl=http%3A%2F%2Finterestingwebs.blogspot.com%2Ffeeds%2Fposts%2Fdefault%2F-%2Fwebs&amp;up_title=CustomRSS&amp;up_titleurl=http%3A%2F%2Finterestingwebs.blogspot.com%2Ffeeds%2Fposts%2Fdefault%2F-%2Fwebs&amp;up_num_entries=30&amp;up_linkaction=openlink&amp;up_background=669966&amp;up_border=CFC58E&amp;up_round=1&amp;up_fontfamily=Arial&amp;up_fontsize=8pt&amp;up_openfontsize=9pt&amp;up_itempadding=3px&amp;up_bullet=arrows&amp;up_custicon=Overrides%20favicon.ico&amp;up_boxicon=0&amp;up_opacity=20&amp;up_itemlinkcolor=FFFFFF&amp;up_itemlinkweight=Bold&amp;up_itemlinkdecoration=Underline&amp;up_vlinkcolor=000000&amp;up_vlinkweight=Bold&amp;up_vlinkdecoration=Underline&amp;up_showdate=1&amp;up_datecolor=9F9F9F&amp;up_tcolor=1C57A9&amp;up_thighlight=FFF19D&amp;up_desclinkcolor=1B5790&amp;up_color=000000&amp;up_dback=E1E9C3&amp;up_dborder=DFCE6F&amp;up_desclinkweight=Bold&amp;up_desclinkdecoration=None&amp;synd=open&amp;w=200&amp;h=100&amp;title=Interesting webs&amp;border=%23ffffff%7C0px%2C1px solid %23595959%7C0px%2C1px solid %23797979%7C0px%2C2px solid %23898989&amp;output=js"></script>
</div>