Blogger

Show Random Posts with Thumbnails in Blogger

Showing random posts out of your blog is really good to engage users more. You can show your random posts any where in the template where you think that this can prove to be eye catchy. Getting random posts in the WordPress with the power of PHP and MySQL is quite an easy job to be done but in case of blogger where you don’t have any freedom like this you need to show random posts via a trick which uses java script. Showing random posts with thumbnails is possible in the blogger. Fortunately it’s not a tough job you can just add a widget for showing random posts with thumbnails in a blogspot blog.

Steps to Show Random Posts with Thumbnails in Blogger:

1- Login to your blogger account and go to the blog where you need these random posts to show up.

2- Select the blog and open layout from the left sidebar of the blogger dashboard.

3- There you need to add new widget to the sidebar which should be Html/Javascript.

Html_Javascript widget in blogger

4- After adding the Html/Javascript you need to grab the following code with styles attached.

<ul id='random-posts'>
<script type='text/javaScript'>
var tow_numposts=5;
var tow_snippet_length=150;
var tow_info='yes';
var tow_comment='Comments';
var tow_disable='Comments Disabled';
var tow_current=[];var tow_total_posts=0;var tow_current=new Array(tow_numposts);function totalposts(json){tow_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<tow_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<tow_current.length;j++){if(tow_current[j]==rndValue){found=true;break}};if(found){i--}else{tow_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(tow_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){for(var i=0;i<tow_numposts;i++){var entry=json.feed.entry[i];var tow_posttitle=entry.title.$t;if('content'in entry){var tow_get_snippet=entry.content.$t}else{if('summary'in entry){var tow_get_snippet=entry.summary.$t}else{var tow_get_snippet="";}};tow_get_snippet=tow_get_snippet.replace(/<[^>]*>/g,"");if(tow_get_snippet.length<tow_snippet_length){var tow_snippet=tow_get_snippet}else{tow_get_snippet=tow_get_snippet.substring(0,tow_snippet_length);var space=tow_get_snippet.lastIndexOf(" ");tow_snippet=tow_get_snippet.substring(0,space)+"…";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var tow_commentsNum=entry.thr$total.$t+' '+tow_comment}else{tow_commentsNum=tow_disable};if(entry.link[j].rel=='alternate'){var tow_posturl=entry.link[j].href;var tow_postdate=entry.published.$t;if('media$thumbnail'in entry){var tow_thumb=entry.media$thumbnail.url}else{tow_thumb="http://2.bp.blogspot.com/-XQt2v4x5dl8/T1zdpFh392I/AAAAAAAABUU/xMJZDedw38k/s1600/default.jpg"}}};document.write('<li>');document.write('<img alt="'+tow_posttitle+'" src="'+tow_thumb+'"/>');document.write('<div><a href="'+tow_posturl+'" rel="nofollow" title="'+tow_snippet+'">'+tow_posttitle+'</a></div>');if(tow_info=='yes'){document.write('<span>'+tow_postdate.substring(8,10)+'/'+tow_postdate.substring(5,7)+'/'+tow_postdate.substring(0,4)+' - '+tow_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<tow_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+tow_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
<p><a href="https://www.talkofweb.com/show-random-posts-with-thumbnails-in-blogger" rel="nofollow" title="Talk of web Blogger Widgets">Grab this Widget</a></p>
</ul>
<style type='text/css'>
#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:100px;height:100px;padding:3px}
#random-posts li{margin: 0px 0px 10px 0px;}
</style>

5- Just paste this in the widget area and give widget the title of “You May Like to Read:” and click save. Re arrange the widget as per your need. If you want to increase the number of posts shown then kindly increase the number tow_numposts=5;. Simple! you are done have happy blogging 🙂

18 Comments