Random Posts Widget For Blogger / Blogspot Blogs
On Wordpress blogs, random posts widgets is very common because the widget is readily available for Wordpreess bloggers but that is not the case with blogger blogs / bloogspot blogs. I personally like this widget very much because unlike recent posts widget or popular posts widget that shows only the most view posts, random posts digg deep into your blog archive and displays old and new posts randomly.
In the rest of this article, I'll be showing you how you can install the random posts widget to your blog.
How To Add Random Posts Widget To Blogger / Blogspot Blogs
Step 1: Login to your blogger dashboard
Step 2: Goto Layout and click Add a Gadget
Step 3: Choose HTML / JavaScript on the window that opens
Step 4: Copy the code below and paste it in the HTML box
<style type='text/css'>
#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:89px;height:64px;padding:3px}
#random-posts a {color: #000000; }
#random-posts a {font-size: 15px; }
#random-posts a:hover{color:#cccccc; }
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=7;
var rdp_snippet_length=0;
var rdp_info='no';
var rdp_comment='Comments';
var rdp_disable='Turn off comments';
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){a=location.href;y=a.indexOf('?m=0');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)+"…";};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;if(y!=-1){rdp_posturl=rdp_posturl+'?m=0'}var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<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>
<div style="text-align: right;"><a href="http://www.techsentral.com/2013/01/random-posts-widget-for-blogger-blog.html">Get this widget</a></div>
<div style="text-align: right;"><a href="http://www.techsentral.com/2013/01/random-posts-widget-for-blogger-blog.html">Get this widget</a></div>
Step 5: Click Save
Customizing Blogger Random Posts Widget
Now that you have installed the widget, you may wanna customize it to go along with your blog design. So let's go ahead and do that.Change #000000 to chage the posts cloud
Change #cccccc to chage the hover color
Change 7 to the number of posts you want it to display
Change width:89px to change the width of the image displayed
Change height:64px to change the height of the image displayed
And that's it! I hope like this widget? If you encounter any problem while adding this widget or if you would like to add something, please leave us a comment in the comments below.









very Gooooooood! thank you.
ReplyDelete