Blogger

Show Random Posts with Thumbnails in Blogger

Random Posts in Blogger
Written by Wamiq Ali

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="http://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 🙂

About the author

Wamiq Ali

Programmer, Blogger and an Entrepreneur trying to make this web a better place by making others learn for free.

12 Comments

  • Hi there, I would like to alter this code so that only a thumbnail image shows (no title, no comments, no summary, only a thumbnail image). I would also like for the thumbnail image to be a clickable link to the post page. Any tips? Thank you for your time!

    • This can be done easily! If you have a look at code then you will get to know:
      The part starting with <a href="'+tow_posturl+'" is actually the code for title.
      The part starting with <span>'+tow_postdate. is actually for fetching the date, same you can guess for other parts also and can remove then to get your desired results. This is so simple if you know how to edit code. if you still can’t do it then contact me is the best way.
      Thanks!

      • i want to make a “mosaic table” (chess table) with random posts, where i show only the thumbnails (no titles, no comments, no snippets, no date …),
        the table will be probably 4×3.

        the aclual “li” tag make it bulleted list style, if i remove the “li” bullets dissapair, but the list are still column type …

        how can i put thumbnails only, like a chess table?

  • for a hidden reason to me, it seems you don’t wanna to help here; no replies, no solutions. this brings me the idea that this is not your script, but i don’t wanna be rude, so apologize.

    i’m not a programer but i trying to cut&paste your code to get what i want and need a little bit help with this part of code:
    [code]document.write( ”);[/code]
    this is where you “print” the image into the widget.
    I already modified it, adding the [b]alt=”‘+tow_posttitle+ ‘” [/b] tag, but i want to ask for a little bit more.

    I want to ask for a redirect to the selected post when i click any of this image from the widget. what i need to add to this code part? I dont wanna keep the actual “a href”, as i mentioned above, i want an image only widget.

Leave a Comment