Random Posts Widget for Blogger with Thumbnails!

The best way to increase a blog's page views is increasing the visitors engagement. And to increase the visitors engagement you can use widgets or gadgets on you blog. I have published several widget in this site like Multi Color Popular Posts Widget, Scrolling Popular Posts Widget, Recent Posts Widget etc. When a visitor visit your site he might interested another post from these widget, which increase the page views. Today I am gonna share Random Post Widget for Blogger blog.

This Random Posts Widget will display the randomly added posts of your blog. Because of the natural structure of your blog normally a visitor can easily get lost deep in your blog's archive. As result he may not be able to find the good old posts of your blog. And generally new visitors don't bother going back to find out the older posts of your blog.

The most effective and easiest way to keep the older posts of your blog alive is to display them in the sidebar. In this I will share a simple HTML/JavaScript code by which you can add random posts widget in your blogger blog. In this widget posts will be shown with thumbnails, post date and number of comment. It is very fast loading and also you can customize it as you need. Lets see how to add this widget to blogger...


Adding Random Posts Widget to Blogger:

• First Sign Into your Blogger Account and go to Dashboard.
• Then click on Layout option and Add a Gadget link where you want to place this widget.
• Then from the gadgets list select HTML/JavaScript.
• Now copy the code and paste it in the Content box.



 <style>  
 #random-posts img{float:left;margin-right:10px;  
 width:65px;height:65px;background-color: #F5F5F5;padding: 3px;}  
 ul#random-posts {list-style-type: none;}  
 #random-posts li {margin-bottom: 10px;}  
 .random-summary {display: block;}  
 </style> <ul id='random-posts'>  
 <script type='text/javaScript'>  
 var rdp_numposts=5;  
 var rdp_snippet_length=60;  
 var rdp_info='yes';  
 rdp_info2='no';  
 var rdp_comment='Comments';  
 var rdp_disable='Comments Disabled';  
 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMoX4x2VntJShwp7HNkMEic_pAdKtJrI4JEqxGMylHo84qIP2tnuray0Umegorse0E-gvRVMdAO5e1g5gmfauEpKJWWJcKP-LYVhlULRRjIiYJPy08463I3oWRRJq-XU0v5sxtHeomOoU/s1600/no_thumb.png"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" 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>'}  
 if(rdp_info2=='yes'){document.write('<span class="random-summary">'+rdp_snippet)+'</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="font-size: 10px; float: right;">Get this <a href="http://www.ittimesbd.com/2014/09/random-posts-widget-for-blogger.html" rel="nofollow">Random Posts Widget</a></div>  



• Then click on Save button to complete the process.

Customization:

• To change the number of displaying posts, change numposts=5 digit.
• To change the size of the Thumbnails, change width:65px;height:65px pixel value.
• To add text snippets, change no to yes in the following line of the above code.
• To add more character to the snippets, change snippet_length=60 value.
• To hide post date and comment, yes to no in the following line of the above code.

  

Stay with www.iTTimebd.com for more IT related Post