Put Random Posts in the Sidebar of your Blog

Let's learn how to put a Gadget in the sidebar that contains Random Posts of your Blog.

This will help to your readers to navigate easily in your blog and see interesting posts that aren't in the front page of your blog.

The point it's keep your visitors more time reading your blog.

In Blogger go to Layout>Page Elements and click on "Ad a Gadget" in the sidebar.

Now choose the HTML/JavaScript Gadget and paste the following code:

<div id="random-posts">
<script type="text/javascript">
function getRandomPosts(json) {
var maxEntries = 5;
var numPosts = json.feed.openSearch$totalResults.$t;
var indexPosts = new Array();
for (var i = 0; i < numPosts; ++i) {
indexPosts[i] = i;
}
indexPosts.sort(function() {return 0.5 - Math.random()});
if (maxEntries > numPosts) {
maxEntries = numPosts;
}
var container = document.getElementById('random-posts');
var ul = document.createElement('ul');
for (i = 0; i < maxEntries; ++i) {
var entry = json.feed.entry[indexPosts[i]];
var li = document.createElement('li');
var a = document.createElement('a');
a.title = entry.title.$t;
for (var j = 0; j < entry.link.length; ++j) {
if (entry.link[j].rel == 'alternate') {
a.href = entry.link[j].href;
break;
}
}
a.appendChild(document.createTextNode(entry.title.$t));
li.appendChild(a);
ul.appendChild(li);
}
container.appendChild(ul);
}
</script>
<script src="http://URL OF YOUR BLOG/feeds/posts/summary?alt=json-in-script&callback=getRandomPosts&max-results=999" type="text/javascript"></script>
</div>

Replace the number "5" in red by the numbers of posts that you want to appears and the text "URL OF YOUR BLOG" in red by the actual url of your blog.

We have done, now you have Random Posts in your Blog.

Enjoy!

Share It!