Random Posts Widget with Thumbnail for Blogger Prajjwal Rajput Wednesday, June 25, 2014 No Comment

Hello Friends Today I'm back, we're previously shared an SEO tips with you that's a Professional 404 Error Page and now today I'm going to share an cool and clean Random Posts Widget for blogger blogs this random posts widget in blogger platform based blogs is needed when you have too many posts and visitors don't always seen the again same posts then your visitor are bored to look at same posts but now that is not but this widget are randomly change posts by refresh the blogger blog page. This widget allows your visitors to find more content or posts easily. Therefore this widget are very useful to get more popularity in the blogger blogs sites. In this posts I will show you how to add Random Posts Widget with thumbnails and snippets in blogger blogs.

How it Work?

Before add this widget in your blogger blog I would like to explain this widget. First of all this is the clean and simple random posts widget which make specially for blogger Platform blogs. It has also contain your published all  posts. It also help to randomly change post by per refresh page. This widget are fully CSS Optimize this widget created by NBT so, all credits goes to them. Let's ready to add this widget in your blogger blogs.
If your are not trust me look at right side of my blog you can seen an clean and cool random posts widget. Once you have seen this widget's demo then add this widget in your blogger blog.

How to Install Random Posts Widget in Blogger Blogs?

• Go to Blogger Dashboard>>Layout>>Add Gadget
• Select HTML/JavaScript Gadget
• Paste the below code in it

<style>
#random-posts img{border-radius: 70px;float:left;margin-right:5px;
width:40px;height:40px;background-color: #F5F5F5;padding: 3px;transition: all 0.2s linear 0s;}
#random-posts img:hover{opacity: 0.6;}
ul#random-posts {list-style-type: none;padding: 0px;}
#random-posts a {font-size: 12px;text-transform:uppercase; padding: 0px auto 5px;}
#random-posts a:hover {text-decoration: none;}
.rp-snippet {font-size: 11px;background: none; padding: 5px; margin-right: 8px;}
#random-posts span {}
#random-posts li {margin-bottom: -10px;border-bottom: 0px solid #000000; padding: 4px 4px -5px;}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=3;
var rdp_snippet_length=0;
var rdp_info='no';
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqkdgz9EN_97Kvq5q2DLVinsKB-i20anAh8V4Uz_Xl7MpzXRg4aL-qwv-OjXpiNue5sO2rOLB96W8OKxfb4xYZrSLaSOPO7jHsaF_xT8U8coEL2yz_GVdOlkbEF2_uT3sC5QkMXne50JQ/s1600/no_thumb.png"}}};document.write('<li>');document.write('<a href="'+rdp_posturl+'" rel="nofollow"><img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/></a>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span><div  class="rp-info">'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</div></span>'};document.write('<br/><div class="rp-snippet">'+rdp_snippet+'</div><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>

Customization:-

1. If you are adding your posts beginning words so, replace no to yes.
2. If your add maximum number of posts in this widget replace 3 to with your desired number posts.

• After added this code
• Now click on "Save" Button
• Done!

Last Words
I hope you can add this simple random posts widget in your blogger blog properly, if not? please leave a comment for your solution and don't forget to like our Facebook Page and also share this post on social networkin site with your friends.
Happy Blogging!

Tweet

Tags: Blogger Widget