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

Post a Comment

Popular posts from this blog

How to Test a Website Load Speed

Image
Website load testing is an important aspect of checking website condition. Website speed is one important aspect of search engine optimization that should be considered regularly. Various search engines such as Google, Bing and Yahoo search tends to like site with relevant original content with good load speed and load time How Can i do Website Load Testing? You can check and test a website load speed and time without using any website load testing software but using the site for the test. Not only checking the website load speed, you could also get other relevant information about the website using this site. The best site to test the loading condition of a website includes; Google PageSpeed Insight Feed The Bot Pingdom Test Tool You may not really need a software to this, just visit the site above and get information about your site load time and speed but other information that helps search engine optimization issues like image alt, meta tag, compression and size, m
Read more

Top Highest Paid Athletes -- Forbes

Image
Forbes Magazine just release its latest ranking for the biggest money making sportsmen in the world based on their performance in the past 12months.A few number of changes were seen based on the last world ranking where these big boys makes so much money and while some didn't make quite much leaving Floyd Mayweather Jr occupy the first on the list of highest earners with $85 million.See Top highest paying site . Forbes Ranking order : 10. Peyton Manning        : 42.4million.   9. Christiano Ronaldo    : $42.5 million.  8. David Beckham          : $44 million.  7. Phill Mickelson           : $ 47.8 million  6  Kobe Bryant               : $52.3 million  5. Roger Federer            : $52.7 million  4. Lebron James             : $53 million  3. Tiger Wood                 : $59.4 million   2. Manny Paquiao          : $62 million  1. Floyd Mayweather Jr : $85 million To get fresh updates from earnonlineng , please subscribe below.Better still,you may drop your comment if a
Read more

How to remove the Twitter flying bird widget on your blog

Image
Twitter is one of the biggest social networking site in the world where users can share and interact with each other.Twitter widget on any blog is an important tool which makes it easy for visitors to follow the site,share and a leave comment.Bloggers who might have install the twitter flying bird for either beautification or traffic purposes can also remove the twitter bird for any reason can do so by using the following steps below.If you to learn to blog or needs some information about blogging,please read how to start blogging The steps 1 . Login to your dashboard which i believe its the new
Read more