How to Install Random Post with Thumbnails on Blogger Blog


This is a simple process of adding a Random Post widget with thumbsnail for your blog or site on the blogger platform using this simple installation process described below.

pics of random post widgetInstalling the Random Post widget with thumbnails or pics on your site is a simple way to get your readers or visitors engaged with different post on your site. This widget also help improve the bounce rate of your site because it allow people stay more on the site with images also known as thumbnails.

How to Install Random Post on Blogger

1. Login to you Blogger Blog

2. Right there on your blogger dashboard, click on the drop down arrow beside the view blog

 See Aslo,  How to add Recent Comment widget on your site

3. You will see a list of programs, then click on layout

4. Click on add a gadget on any position you like

5.  A pop up program comes up where you also press on the Html /Javascript for third party codes

6.  Carefully copy and paste the code below on the content box

<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_snippet_length=150;
var rdp_info='yes';
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="http://2.bp.blogspot.com/-XQt2v4x5dl8/T1zdpFh392I/AAAAAAAABUU/xMJZDedw38k/s1600/default.jpg"}}};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>


7. You may change the 5 to any other desired figure you want it to display

See Also , How to add Twitter Follow Widget with Count on Blogger

8. Then Save the codes


9. Quickly head over to blogger dashboard again and check on the template

10. Expand edit template

11. Press Ctrl F and search for this code ]]></b:skin>

12. Just above  ]]></b:skin> Paste this    #random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:3px}
 
13. Press the Save Template and view your blog for the display

It will help reduce the Bounce rate of your site and improve your site traffic thereby showing post comments count and thumbnails too. Thanks

Codes from mybloggertricks
 

Comments

Popular posts from this blog

How to Check Own Sim Number on Etisalat Network

Factors That Encourage The Growth of Commerce.

Factors Affecting the Growth of Commerce in West Africa