Welcome to InfoExpo - "Explore the World of technology" ~ New: N-Tools | Make Money Online | Latest: Google DriveR | BigRock Discount ~ Guide On: Online Shopping


Saturday, July 6, 2013

Blogger Random Post Widget with Thumbnail and ScrollBar

Blogger Ramdom Post Widget with Thumbnail and ScrollBar
Scrollable Random post widget with small thumbnail for adding more most names in less space of right side bar.
Random post Widget is one of most important widget for a blogger blog to connect different post pages to any single page. It helps to display a set of custom generated post names from your published post without and sorting like popular posts or recently posted ones. It alternately displays all published posts, but a minimum number at a time, which you can set for eg: 10 or 15
Right sidebar is a place where to display more widgets, so space is an important problem here, so we had adder a limited space for this random post widget but the same time added scroll bar to adjust maximum number of posts within a limited space.

 Read: Basic Requirements of Blogger blog
Basic requirements of a blogger blog in 2013
Basic requirements of a blogger blog in 2013

Random Post Widget with Thumbnail and Scroll-Bar will greatly useful to link maximum number of posts to any single page. Below there is a Live Demo of how the Random Post Widget with Thumbnail and Scroll-Bar looks.


Live Demo

Blogger Random Post Widget with Thumbnail and ScrollBar


If you are interested in this widget.Follow below instruction to add this to your blog too.

Read: Latest SEO tricks for Bing and Yahoo Search engine


How to install Random Post Widget
  • Go to Blogger Layout
  • Add new Widget, HTML/JS widget
  • Paste the Below Code In it Click Save
<div style="overflow:auto;width:340px;   height:400px;  padding:12px;">


<style>#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:30px;height:30px;padding:3px}</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=15;
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://1.bp.blogspot.com/-v6XbCYAVV7o/UEMRCev1H-I/AAAAAAAADf0/PFwqDiY4jVg/s1600/na_image.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('<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>
<center><a href="http://www.infoexpo.in/2013/07/blogger-random-post-widget-with-thumbnail-Scrollbar.html" target="_blank"> Get This Widget �</a></center></div>
  • View the new random post widget in your Blog.

 OR



    Customization
    • Change 15   for setting number of posts names to be displayed in the widget.
    • You can set the  width:340px;   height:400px; according to the size of your right sidebar. 
    • You are Done

     Read: Facebook PopUp Like Box - Fastest and Effective

    Final Words 

    Hope You like this widget. Add this to your blog for more navigation help for your visitor.
    If any problem while installing this widget , be free to ask your queries by posting a comment.

    Read: Google Plus Add to Circles widget with Thumbnails




    About Author:

    Sreeraj Melath is a passionate blogger from India,
    who makes technological experiments and writes to his readers. He enjoys writing on Technology,Computer,Software,SmartPhones and Mobiles niche.
    He is Editor of this tech blog.

    Follow him @ Google+ | Twitter




    Buy Everything Online at Cheap Price


    Get Free Updates to your Inbox
    Follow us on:
    facebook twitter gplus pinterest rss