Random Posts Widget for Blogger

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.

<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>

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>

<style>
/*– (Random posts widget -below posts) –*/
#random-posts {
width:100%;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:10px;
}
#random-posts .widget{
padding-left:6px;
margin-bottom:10px;
}
#random-posts .widget h2 {
font-size: 1.6em;
font-weight: bold;
color: #0000FF;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#random-posts a{
color:#A10000;
}
#random-posts a:hover{
color:#A10000
}
#random-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:bold;
font-size:15px;
text-color:#000000
}
#random-posts ul li{
background:transparent url(http://www.techieblogger.com/wp-content/uploads/2009/10/bulltet.gif) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 13px;
padding-left: 30px;
padding-top:0px;}
</style>

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

Random posts widget

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




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

16 Responses to “Random Posts Widget for Blogger”

  1. […] 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 […]

  2. i am using hack ajax from google by hoctro…xixixixiix btw good trick good

  3. 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(’’);

  4. I am looking for an all in one widget with recent post, comments and tags.

  5. […] Random Posts -Displays random posts on your […]

  6. 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

  7. 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

  8. 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

  9. 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

  10. 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!

  11. I’m looking for something like this, but I want it to show only posts with a specific tag and only show one at a time, including an image and text excerpt. Is this possible?

  12. Cool hack 🙂 My blog looks cool with this widget 😉

  13. Hi,
    I have been working a lot on the random posts widget. I tried many solutions and finally adopted the official blogger widget : Random Posts Widget for Blogger with Thumbnails.
    But I was frustrated since I couldn’t really get what I wanted because options are in the configuration popup. Period.

    Besides, I don’t like an iframe in my blog: makes everything so slow and difficult to control.

    So I used your script (which is very efficient and small Bravo!), and added :
    – thumbnails support
    – date of post
    – number of comments
    – first lines of the post

    I added the widget in a HTML/javascript as advised and it works perfectly: I have now full control on the rendering.

    Check it out (‘Autres posts widget’): http://khatran.blogspot.com

    If anyone is interested, leave me a message on my blog, and I will send you the code.

    Or may the author contact me, I would send him the source code to update his own, since it is too long to fit in a comment.

    Thanks again

    Kha

Leave a Reply

You must be logged in to post a comment.