Cool Random Post Sidebar For Blogger Platform

Planning to add random post on your sidebar for your blogger(blogspot)? As a bloggers everyday we create new blog post to make our blog up to date so that readers can see that we are still continuously active on our blog because people love active blogs, but I ask myself what about the old post that I made? The disadvantage of writing new blog post everyday is that all of the readers who came to your blog will not able to read what you wrote in the past(the old post), some post are buried too deep on your blog and most of your readers will never dig for it, that is why we need to find other way to re-purpose our old blog post so it will still drive traffic even its very very old.

To make sure this is what you are looking for, here is a sample random post image. Remember that the following post on the list are showing randomly every time it refreshes the page.

If this is not your type of design or color, dont worry, this widget will just adopt your templates skin.

There are other ways to re-purpose your old blog post for example promoting on other website or social media so old post will still gain traffic even its very very old, but the wises solution for re-purposing old post is adding a random post on your blogspot blog so it will passively promote to your old post to your current readers.

Step by Step how to Add Random Post for Your Blogspot / Blogger Blog?

To add random post on your blogspot blog the trick is pretty simple, the only thing you need to do is just copy the codes below:

1.Get the first codes below.

You cannot copy the given code below because the right click and select action is disabled on this page. To get this code you can download it here: Download Now

---------------------------------------------

ul#random-posts img {
    float: left;
    margin-right: 10px;
    margin-bottom: 20px;
}
ul#random-posts li {
    border-bottom: 1px solid #d2d2d2;
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.rp-info {
    font-style: italic;
}
.rp-snippet {
    font-style: normal;
}
ul#random-posts a {
    font-weight: bold;
}

---------------------------------------------

2. Go to Themes Page and click Customize.

3. Go to Advance then choose Add CSS. Copy the given code above then paste it on the Add Custom CSS box then click Apply to Blog on the upper right of the page.

The first code is all about the configuration of the widget. To able to add the physical widget on your sidebar, you need to get the second codes and paste it in your side bar.

4.Get the Second codes.

You cannot copy the given code below because the right click and select action is disabled on this page. To get this code you can download it here: Download Now

---------------------------------------------

<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=8;
var rdp_snippet_length=80;
var rdp_info='no';
var rdp_comment='';
var rdp_disable='';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'> 
function random_posts(json){for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="http://3.bp.blogspot.com/-5SoVe1K6JSk/Utl0OOmucAI/AAAAAAAAF6E/hQghgD_EJdQ/s1600/no_thumb.png"}}};document.write('<li>');document.write('<a href="'+rdp_posturl+'" rel="nofollow"><img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/></a>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span><div  class="rp-info">'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</div></span>'};document.write('<br/><div class="rp-snippet">'+rdp_snippet+'</div><div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>

---------------------------------------------

5. Go to Layout Page. and Click Add Gadget and choose HTML/Javascript.

6.Paste the Second Codes on the gadget you created and Save.

Congrats! You're Done!

If ever you got problems with the codes. Dont hesitate to contact me, my email is just below on this page!