how to display rss feed of a website in your blogger posts and pages

Hi friends I this post I am sharing how to display rss feed of a website to your blogger.Sometimes it is necessary to show important updates of a famous site to your blogger.But as a single person it is difficult to listen all times of that blog and to write.Still you have a chance to help your visitors to show updates of the famous site within your blogger itself.Eventhough there is a option ,add a gadget it is not enough to show in your blogger posts or pages.Now there is a option to show in your blogger,I searched in google and found a lot but many of them paid version.Finally I got   feed2js which is free and also available as opensource in github.So you can import I your hosting account if you have but need small programming skills.Only one thing image will not be displayed.

JUST ENTER THE URL OF FEED ,GENERATE JAVASCRIPT,COPY AND PASTE I BLOGGER

• First go to feed2js.org
• Enter the feed url of a site.I have chosen google blog.A sample was given below.

• Just preview and click generate javascript.

• Generated javascript code will be shown.Copy that code.             

• Now goto your blogger account.Goto your blogger account, choose your blog and click new post  and click HTML mode instead of Compose mode .Paste the javascript code and publish.Now view the post.You will get like below image.

If you look the output as very large ,you can use some of their available features.

Extra features in Feed to js

• In show channel check anyone radio button,show channel is used to display title and/or description about the publisher of the feed.
• To show how many number of posts to be displayed,enter value (for example:3)only 3 posts will be displayed from feed.”0” then nothing will be displayed.
• For description if value of n is ,                                                                                                                              
                      0                      =   no description

                      1                      =   To show full description
                      2or3or4or…    =   To show number of characters in description
                      -1                     =   To show only descriptions with no link

And some other options available .Also you can make css style.Already they give some style designs but if you want to change you can do it so.And you should use this class then only this css will work.

/* begin styles for RSS Feed */

.rss-box {
     margin: 1em;
     width: 200px;
     background-color: #000000;
}
.rss-items {
    margin-top:0px;
    padding:0.5em; 0.5em;
    margin-left:0px;
    color:#FFFFFF;
    text-align: right;
}
p.rss-title {padding:0.5em;}
.rss-title {
        text-transform:uppercase;
    text-decoration: none;
    font-family: "Trebuchet MS",Trebuchet,Verdana,Sans-Serif;
    font-size: 12px;
    background-color:#000;
    color:#ccc;
    font-weight:bold;
    margin: 0px;
        margin-bottom: 10px;
    padding:0em;
    text-align: right;
}

.rss-item  {
  font-family: "Trebuchet MS",Trebuchet,Verdana,Sans-Serif;
  font-size: 12px;
  font-weight : normal;
  list-style:none;
  padding-bottom:0em;
}

.rss-item a {
    text-decoration : none;
    color: #ad9;
    font-size: 12px;
    font-weight:light;
    font-family:"Trebuchet MS",Trebuchet,Verdana,Sans-Serif;
    }
   
.rss-item a:hover {
    color:#fff;
}

.rss-date {
    font-size: 85%;
    font-weight : normal;
    color: #fff;
    }

The concept explained In image,

• If you are using post summary in homepage of blogger then it shows only code. Inorder to avoid that write some content  and use an image.This will solves the problem of code display. Use the same concept in pages.

A sample demo was given below,

SHARE

About me

Hi. I am interested in blogging.And sometimes play with webdesign,web development,domain sale,designing logo and more.

• 
• 
•