Random Posts Widget for Blogger

04. Oct, 2009 11 Comments

Most like to crowd their sidebars with full of link list widgets to improve their pageviews. Though the only two widgets available to show post links are recent posts widget and popular posts widget. In the row of recent posts and related posts widget for blogger , Now here comes one more link list widget called ” Random posts widget”. As the name implies , this widget will call posts in a random manner and the number of posts links to be displayed can be controlled by the webmaster.

Code Customization instructions

This code uses the Math.random() built-in function to get the random posts from the json blogger feeds. This is the random posts widget script developed by Bloggodown.

The script gets the number of posts to be displayed using a variable named “numofpost”. After getting the number of posts this script uses a ” for loop ” to display only the number posts mentioned by the author.

I have set the number of posts to be 8. If you want to change the number of posts to be displayed then change the number in the text shown in red.

Installation Instructions

You can either install this widget in the sidebar or add this below the posts. First i will explain how to add this as a widget in the sidebar.

Adding the code in the sidebar is very simple. Just follow the below instructions.

Go to Layout section of your blog.
Then in the sidebar select ” Add a gadget ” option.
choose ” HTML / JAVASCRIPT” widget in that list.
Now add the above code in that widget and click save.

That’s you have successfully installed the random posts widget for blogger sidebar.

Adding random posts widget below posts

I have seen few who are showing the random list of posts below their posts. It’s also a good script placement which can increase your pageviews.

To add the code , just follow the above instructions.

Go to Layout Section
Navigate to EDIT HTML subtab
Now check expand widgets option
Search the <p><data:post.body/></p>
Now add the following code immediately below it

<div id="random-posts">
<h2>Random posts</h2>
<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=8;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write(‘<ul>’);
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel==’alternate’){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}
document.write(‘<li><a href="http://www.techieblogger.com" target="_blank">Random posts widget</a></li>’);document.write(‘</ul>’);}
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>
</div>

If you want to add custom CSS to this link list , then add the following code above </head>

Now you can see a beautiful Random posts appearing below the posts in your Blog.

hope you like this Random posts widget and hack, If you need any other modifications then do let me know via comments.

Mohamed Rias - has written 94 posts on Techie Blogger

I am Mohamed Rias , admin of Techieblogger.com. Basically I am Engineering student but still blogging is my passion. My areas of interest are HTML , CSS , Jquery , Javascript and PHP.

Visit Authors Website | All Articles From This Author

Other Recommended Posts

0
hits

If you like this article , then please help us by bookmarking

11 Responses to “Random Posts Widget for Blogger”

Tweets that mention Random Posts widget for Blogger Blogs @ Techie Blogger -- Topsy.com

[...] This post was mentioned on Twitter by freelancercrowd and nitish kunal. nitish kunal said: RT @techieblogger Random Posts Widget for Blogger http://bit.ly/mVynX [...]
BEBEN Reply 05. Oct, 2009 at 1:03 am

i am using hack ajax from google by hoctro…xixixixiix btw good trick good
z-vet Reply 08. Oct, 2009 at 6:48 am

Doesn’t work on my blog. Error console shows two errors:

Error: randomposts is not defined
Source File: http://www.prozacfield.com/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts
Line: 1

Error: syntax error
Source File: http://www.prozacfield.com/
Line: 1526, Column: 52
Source Code:
if(flag==0&&l!=0){randarray[i++]=l;}}document.write(’’);
sisea Reply 29. Oct, 2009 at 2:19 pm

why do it not work?
Franklin Reply 02. Nov, 2009 at 10:20 am

I am looking for an all in one widget with recent post, comments and tags.
25 of the Best Widgets For Blogger | Theme Today

[...] Random Posts -Displays random posts on your [...]
manish Reply 14. Nov, 2009 at 4:03 pm

I try to put the widget both ways:
1. as a widget in side bar where nothing was displayed in posts
2. within html code by expanding widget but fail to do so either way kindly help
manish Reply 14. Nov, 2009 at 4:05 pm

while i tried putting the random posts widget below posts by modifying html code i was told that xml code not well parsed.
please make sure that the code is correct
vmancer Reply 23. Dec, 2009 at 3:39 am

i use http://www.linkwithin.com/ for make random post.
this widget can bring a thumbnail and applied very easily, simply by adding the html widget.

by the way, thank you for the information
ronak Reply 23. Dec, 2009 at 9:22 am

hey buddy nice hack
can u make this widget with display post with image thumbnail and some post summary. if u do this its great for us
xD Blog Reply 10. Jan, 2010 at 3:18 am

Hi, I’ve been searching for something like this, actually for something exactcly like this, but with one difference: the possition. Although I’ve found this gadget in other places, not even one of them is made to be placed in the menu bar, under the header, like just another link in the menu. I hope there is a way to change that, thanks anyways!