How to create list of post links grouped by category using RSS (blogspot) ~ v code java script

This post presented how to make list of links of your blog posts which are grouped by categories. For example I have category "webs" and want that on the sidebar is list of my posts which are in "webs" category.

The result should look like this:

Useful webs

The difference between link list in this post and link list in How to create scrollable link list post is that in this case links are coming from RSS feed and there is no need for manual updating new links. When you add new post your link list will automatically be updated and this is main advantage.

There are two methods to fill link box. One is by using Feed2Jscript and another is by using Google AJAX Feed API - Code.

I chose Feed2Jscript because it is faster but this service is not guaranteed and it is possible to go away.

Steps for creating list of links grouped by category using RSS

Go to Feed2Jscript

Enter the web address of the RSS Feed

Web address of the RSS Feed can be for all posts or for all posts in one category

For all posts web address is http://[BLOG NAME].blogspot.com/feeds/posts/default

[BLOG NAME] is name of your blog

For my blog web address for all posts is http://interestingwebs.blogspot.com/feeds/posts/default

For all posts in one category web address is http://[BLOG NAME].blogspot.com/feeds/posts/default/-/[CATEGORY NAME]

[CATEGORY NAME] is a label, and all posts having this label will be listed

For more details about labels and categories in blogspot look Adding categories to blogspot (blogger)

For example in my blog address for category "webs" is http://interestingwebs.blogspot.com/feeds/posts/default/-/webs

To lear more about writing url for blogspot feed see article Parameters in Blogspot feed

You can type directly in web browser web address of the RSS Feed to check if address is correct

Chose remaining values and click button Generate JavaScript

You will get code which you can copy, or you can copy my code bellow

If you want to use my code, you should replace [BLOG-NAME] with name of your blog (for my blog [BLOG-NAME] is interestingwebs) and replace [CATEGORY] with your categories (for example in my blog webs and blog-tutorial), more about categories in Adding categories to blogspot (blogger)

<div> tag is for scrollbox

<div style="overflow:auto;width:96%;height:150px;border:1px solid #ccc;padding:5px">

</div>

Now you need to paste code in HTML/jscript gadget

Go to Layout.

Click on Add Gadget.

Select HTML/JavaScript.

Enter a title and paste adjusted HTML code from this article and click on button Save (for detailed instructions see How to add HTML code to blog)

You can to add more category lists in one HTML\jscript gadget if you want

That's it.

For those who wants to use Google AJAX Feed API - Code and in case that Feed2Jscript is turning off there are steps to create list of posts with Google AJAX Feed API:

You need to generate API key at http://code.google.com/intl/hr/apis/ajaxfeeds/signup.html

Use this code:

<!doctype 1.0 strict//en -//w3c//dtd
http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd public html xhtml>

Google AJAX Feed API - Simple Example
<script src="http://www.google.com/jsapi?key=[API-KEY]"
type="text/javascript"></script>
<script type="text/javascript">

google.load("feeds", "1");

function initialize() {
var feed = new google.feeds.Feed("http://[BLOG NAME].blogspot.com/feeds/posts/default/-/[CATEGORY NAME]
");
feed.setNumEntries(100);
feed.load(function(result) {
if (!result.error) {

var container = document.getElementById("feed");
var ul = document.createElement("ul");
for (var i = 0; i < result.feed.entries.length; i ) {
var entry = result.feed.entries[i];
var li = document.createElement("li");
var a = document.createElement("a");
li.appendChild(a);
a.href = entry.link;
a.appendChild(document.createTextNode(entry.title));

ul.appendChild(li);
}
container.appendChild(ul);
//div.appendChild(container);
}
});

}
google.setOnLoadCallback(initialize);

</script>

<div id="feed"
style="overflow:auto;width:100%;height:150px;border:1px solid
#ccc;"></div>

</!doctype>

Replace [API-KEY] with yours generated API KEY, [BLOG NAME] and [CATEGORY NAME]

About Admin MC3

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

v code java script

How to create list of post links grouped by category using RSS (blogspot)

About Admin MC3

Related Post